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

效果




相关推荐
九丝城主9 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware
瓜子三百克14 小时前
七、性能优化
flutter·性能优化
恋猫de小郭1 天前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
小蜜蜂嗡嗡1 天前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
瓜子三百克1 天前
十、高级概念
flutter
帅次2 天前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
小蜜蜂嗡嗡2 天前
flutter flutter_vlc_player播放视频设置循环播放失效、初始化后获取不到视频宽高
flutter
孤鸿玉2 天前
[Flutter小技巧] Row中widget高度自适应的几种方法
flutter
bawomingtian1232 天前
FlutterView 源码解析
flutter
Zender Han2 天前
Flutter 进阶:实现带圆角的 CircularProgressIndicator
flutter