Flutter组件————Scaffold

Scaffold

Scaffold 是一个基础的可视化界面结构组件，它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏（AppBar）、内容区域（body）、抽屉菜单（Drawer）、底部导航栏（BottomNavigationBar）等元素的界面。

参数

Scaffold 参数列表

参数名	类型	描述
appBar	PreferredSizeWidget	设置页面顶部的应用栏，通常是一个 AppBar 组件。
body	Widget	页面的主要内容区域，可以是任意类型的 widget。
floatingActionButton	Widget	定义浮动按钮，通常是一个 FloatingActionButton 组件。
floatingActionButtonLocation	FloatingActionButtonLocation	定义浮动按钮的位置，默认为 FloatingActionButtonLocation.endFloat。
floatingActionButtonAnimator	FloatingActionButtonAnimator	定义浮动按钮动画行为，默认使用 FloatingActionButtonAnimator.scaling。
drawer	Widget	定义侧边抽屉菜单，通常是一个 Drawer 组件。
endDrawer	Widget	类似于 drawer，但它位于屏幕的另一侧。
bottomNavigationBar	Widget	设置页面底部的导航栏，如 BottomNavigationBar。
bottomSheet	Widget	显示在底部的模态弹出层，通常用于临时显示信息或操作选项。
backgroundColor	Color	设置 Scaffold 的背景颜色。
resizeToAvoidBottomInset	bool	控制是否调整 body 的大小以避免被键盘遮挡，默认值为true。
primary	bool	指示此 Scaffold 是否应该被视为应用程序的主要 Scaffold，影响滚动行为。
extendBody	bool	如果设置为 true，则 body 将延伸到 bottomNavigationBar 或 persistentFooter 下方。
extendBodyBehindAppBar	bool	如果设置为 true，则 body 将延伸到 appBar 下方。
persistentFooterButtons	List	定义一组固定在页面底部的按钮。
drawerScrimColor	Color	当 Drawer 打开时，屏幕上其他部分的颜色（半透明）。
drawerEdgeDragWidth	double	定义从屏幕边缘拖动打开 Drawer 的宽度。默认情况下，整个屏幕宽度都可以触发拖动手势。
restorationId	String	用于状态恢复的标识符，允许 Scaffold 在应用程序重启后恢复其状态。

内部组件使用

1.Flutter组件————AppBar
2.Flutter组件————FloatingActionButton
3.Flutter组件————BottomNavigationBar

代码示例

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int pageIndex = 0;
  //所有右侧行为按钮
  List<Widget> actionList = const [
    Icon(Icons.social_distance),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.cyclone),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.manage_accounts),
    SizedBox(
      width: 40,
    )
  ];
  List<Widget> pageList = const [
    Text("首页"),
    Text("新增"),
    Text("用户"),
  ];

  void floatBtnFunc() {
    debugPrint("点击了悬浮按钮");
    HapticFeedback.vibrate();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary, //背景颜色
        foregroundColor: const Color.fromARGB(135, 226, 5, 255),
        // leading: const Icon(Icons.accessibility_new_rounded), //左侧按钮
        title: const Text("Flutter 示例"), //标题
        // actions: actionList, //右侧按钮
        elevation: 10, //下方阴影
        shadowColor: const Color.fromARGB(136, 0, 225, 255), //阴影颜色
        centerTitle: true, // 标题是否居中（ios默认居中，Android默认居左）
        surfaceTintColor: const Color.fromARGB(172, 249, 128, 0), //表面颜色
        toolbarHeight: 50, //顶部栏高度
        iconTheme: const IconThemeData(
            size: 20, color: Color.fromARGB(207, 255, 251, 0)), //控制内部元素样式
        primary: true, // 是否显示主要按钮
        titleSpacing: 10, //标题内边距
        bottom: const TabBar(tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ]), //顶部栏底部按钮
        shape: const RoundedRectangleBorder(
            borderRadius:
                BorderRadius.vertical(bottom: Radius.circular(15)) //顶部栏底部按钮样式
            ),
      ), //顶部栏
      body: Center(
        child: ListView(
          padding: const EdgeInsets.only(top: 15),
          children: [
            Row(
              children: [pageList[pageIndex]],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: floatBtnFunc, //点击事件
        tooltip: "悬浮按钮", //长按提示信息
        backgroundColor: Colors.blue, //背景颜色
        foregroundColor: Colors.white, // 内部组件颜色
        elevation: 10, //阴影
        shape: ShapeBorder.lerp(
            const CircleBorder(), const CircleBorder(), 0.5), //按钮形状
        mini: false, //是否小尺寸
        hoverColor: Colors.green, //悬浮颜色
        splashColor: Colors.yellow, //点击颜色
        focusColor: Colors.red, //获取焦点颜色
        autofocus: true, //是否自动获取焦点

        clipBehavior: Clip.hardEdge, //裁剪方式
        child: const Icon(Icons.info), // //按钮内部组件
      ), //浮动按钮
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked, //浮动按钮位置
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home), //图标
            label: "首页",  //标签
            tooltip: "首页",   //长按提示信息
            backgroundColor: Colors.blueAccent, //背景颜色
            activeIcon: Icon(Icons.home_filled), //选中图标
          ),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增"),
          BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),
        ], //底部导航栏
        currentIndex: pageIndex, //当前页面索引
        onTap: (index) {
          setState(() {
            pageIndex = index;
          });
        }, //点击事件
        type: BottomNavigationBarType.fixed, //导航栏的类型
        iconSize: 25,  //图标大小
        elevation: 20, //阴影
        selectedFontSize: 12, //选中字体大小
        unselectedFontSize: 12, //未选中字体大小
        selectedItemColor: Colors.blue, //选中颜色
        unselectedItemColor: Colors.black, //未选中颜色
        showUnselectedLabels: true, //是否显示未选中的标签
        selectedLabelStyle: const TextStyle(color: Colors.blue), //选中文本样式
        unselectedLabelStyle: const TextStyle(color: Colors.black), //未选中文本样式
        backgroundColor: const Color.fromARGB(255, 99, 255, 247),
        showSelectedLabels: true, //分别控制是否显示选中和未选中的标签文本，默认都是显示的
      ),
      backgroundColor: Colors.white24, //背景颜色
      persistentFooterButtons: const [Icon(Icons.add_a_photo_outlined),Icon(Icons.add_alarm_rounded)], //底部固定按钮
      drawer: Drawer(child: ListView(children: const [Text("侧边栏")],),),   //左侧边栏（不可以使用appBar的leader）
      endDrawer:  Drawer(child: ListView(children: const [Text("右侧侧边栏")],),)  // 右侧边栏(不可以使用appBar的actions)
    );
  }
}

效果

原文地址：https://blog.csdn.net/qq_44993558/article/details/144618448

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！