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 将延伸到 bottomNavigationBarpersistentFooter 下方。
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

代码示例

dart 复制代码
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)
    );
  }
}

效果




相关推荐
Zender Han9 小时前
Flutter 实现人脸检测 — 使用 google_mlkit_face_detection
android·flutter·ios
西西学代码9 小时前
Flutter---默认程序(计数器)
flutter
君逸臣劳9 小时前
玩Android Flutter版本,通过项目了解Flutter项目快速搭建开发
android·flutter
_大学牲15 小时前
Flutter 之魂 GetX🔥(二)全面解析路由管理
前端·flutter
恋猫de小郭16 小时前
Flutter 在 iOS 26 模拟器跑不起来?其实很简单
android·前端·flutter
大雷神1 天前
Flutter鸿蒙开发
flutter·华为·harmonyos
shelutai2 天前
实现提供了完整的 Flutter Web 文件上传解决方案
前端·flutter
小仙女喂得猪2 天前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
猪哥帅过吴彦祖2 天前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
程序员老刘2 天前
为什么我从不推荐GetX?11k星标背后的真相
flutter·客户端