当前版本 Flutter 3.19.5

前言

Scaffold 用于构建应用程序的基本布局结构。它提供了一个标准的应用程序布局，包括顶部的应用栏、底部的导航栏、抽屉菜单等，以及中间可变化的主体内容区域。

Scaffold API

属性

属性一览

• appBar: 页面上方导航条
• backgroundColor: 背景色
• body: 页面容器
• bottomNavigationBar: 底部导航条
• bottomSheet: 一个持久停留在body下方，底部控件上方的控件
• drawer: 左侧菜单
• drawerDragStartBehavior: 控制 drawer 的一些特性
• drawerEdgeDragWidth: 侧滑栏拉出来的宽度
• drawerEnableOpenDragGesture: 左侧侧滑栏是否可以滑动
• drawerScrimColor: 侧滑栏拉出来时，用来遮盖主页面的颜色
• endDrawer: 右侧菜单
• endDrawerEnableOpenDragGesture: 右侧侧滑栏是否可以滑动
• extendBody: body 是否延伸到底部控件
• extendBodyBehindAppBar: 默认 false，为 true 时，body 会置顶到 appbar 后，如appbar 为半透明色，可以有毛玻璃效果
• floatingActionButton: 悬浮按钮
• floatingActionButtonAnimator: 悬浮按钮动画
• floatingActionButtonLocation: 悬浮按钮位置
• onDrawerChanged
• onEndDrawerChanged
• persistentFooterAlignment
• persistentFooterButtons: 显示在底部导航条上方的一组按钮
• primary: 是否在屏幕顶部显示Appbar, 默认为 true，Appbar 是否向上延伸到状态栏，如电池电量，时间那一栏
• resizeToAvoidBottomInset: 默认为 true，防止一些小组件重复
• restorationId

appBar: 页面上方导航条

可以用来实现导航栏的部件有: AppBar/ Tab / TabBar / CupertinoTabBar / ObstructingPreferredSizeWidget / PreferredSize

一般不会单独把 Tab / TabBar 拿来实现appBar

实现

final PreferredSizeWidget? appBar;

AppBar 示例

Scaffold(
  appBar: AppBar(
    elevation: 1,
    title: const Text('This is a AppBar'),
    shadowColor: Colors.green,
  ),
)

完整的AppBar用法详解

Tab 示例

Scaffold(
  appBar: Tab(
    icon: Icon(Icons.directions_car),
    text: 'Tab',
    iconMargin: EdgeInsets.only(top: 50),
    height: 100,
  ),
)

TabBar 示例

return const DefaultTabController(
  length: 6,
  initialIndex: 1,
  child: Scaffold(
    appBar: TabBar(
      tabs: [
        Tab(icon: Icon(Icons.directions_car)),
        Tab(icon: Icon(Icons.directions_bike)),
        Tab(icon: Icon(Icons.directions_car)),
        Tab(icon: Icon(Icons.directions_bike)),
        Tab(icon: Icon(Icons.directions_car)),
        Tab(icon: Icon(Icons.directions_bike)),
      ],
    ),
  ),
);

完整的TabBar用法详解

CupertinoTabBar 示例

return DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: CupertinoTabBar(
      items: const [
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.star_fill),
          label: 'Favorites',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.clock_solid),
          label: 'Recents',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.person_alt_circle_fill),
          label: 'Contacts',
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.circle_grid_3x3_fill),
          label: 'Keypad',
        ),
      ],
    ),
  ),
);

完整的CupertinoTabBar用法详解

...未完待续...