当前位置：首页 > article >正文

Flutter组件————Scaffold

article 2025/3/5 1:04:33

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)
    );
  }
}