Flutter 学习之路 - APP骨架Scaffold

利用Material 提供Scaffold组件可以很方便的搭建出页面的骨架.

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

顶部导航栏

AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。下面我们看看AppBar的定义：

属性	介绍
leading	导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
automaticallyImplyLeading	如果leading为null，是否自动实现默认的leading按钮
title	页面标题
actions	导航栏右侧菜单
bottom	导航栏底部菜单，通常为Tab按钮组
elevation	导航栏阴影
centerTitle	标题是否居中
backgroundColor

如果给Scaffold添加了抽屉菜单，默认情况下Scaffold会自动将AppBar的leading设置为菜单按钮，点击它便可打开抽屉菜单。如果我们想自定义菜单图标，可以手动来设置leading，如：

final GlobalKey<ScaffoldState> _key = GlobalKey();
...

Scaffold(
  key: _key,
  appBar: AppBar(
    title: Text("App Name"),
    leading: Builder(builder: (context) {
      return IconButton(
        icon: Icon(Icons.dashboard), //自定义图标
        onPressed: () {
          // 打开抽屉菜单  
          _key.currentState!.openDrawer();
        },
      );
    }),
    ...  
  )  

抽屉菜单

Scaffold的drawer和endDrawer属性可以分别接受一个Widget来作为页面的左、右抽屉菜单。如果开发者提供了抽屉菜单，那么当用户手指从屏幕左（或右）侧向里滑动时便可打开抽屉菜单。本节开始部分的示例中实现了一个左抽屉菜单MyDrawer，它的源码如下：

class MyDrawer extends StatelessWidget {
  const MyDrawer({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
        context: context,
        //移除抽屉菜单顶部默认留白
        removeTop: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 38.0),
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ClipOval(
                      child: Image.asset(
                        "imgs/avatar.png",
                        width: 80,
                      ),
                    ),
                  ),
                  Text(
                    "Wendux",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: const <Widget>[
                  ListTile(
                    leading: Icon(Icons.add),
                    title: Text('Add account'),
                  ),
                  ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('Manage accounts'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

FloatingActionButton

FloatingActionButton是Material设计规范中的一种特殊Button，通常悬浮在页面的某一个位置作为某种常用动作的快捷入口。我们可以通过Scaffold的floatingActionButton属性来设置一个FloatingActionButton，同时通过floatingActionButtonLocation属性来指定其在页面中悬浮的位置，这个比较简单，不再赘述。

...
return Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    tooltip: 'Increment',
    focusColor: Colors.yellow,
    child: const Icon(Icons.add),
  ), // This trailing comma makes auto-formatting nicer for build methods.
);
...

底部Tab导航栏

我们可以通过Scaffold的bottomNavigationBar属性来设置底部导航，如本节开始示例所示，我们通过Material组件库提供的BottomNavigationBar和BottomNavigationBarItem两种组件来实现Material风格的底部导航栏。

Material组件库中提供了一个BottomAppBar 组件，它可以和FloatingActionButton配合实现“打洞”效果：

bottomNavigationBar: BottomAppBar(
  color: Colors.white,
  shape: CircularNotchedRectangle(), // 底部导航栏打一个圆形的洞
  child: Row(
    children: [
      IconButton(icon: Icon(Icons.home)),
      SizedBox(), //中间位置空出
      IconButton(icon: Icon(Icons.business)),
    ],
    mainAxisAlignment: MainAxisAlignment.spaceAround, //均分底部导航栏横向空间
  ),
);

BottomAppBar的shape属性决定洞的外形，CircularNotchedRectangle实现了一个圆形的外形，我们也可以自定义外形

页面 body

Scaffold 有一个 body 属性，接收一个 Widget，我们可以传任意的 Widget 。

TabBarView是一个可以进行页面切换的组件，在多 Tab 的 App 中，一般都会将 TabBarView 作为 Scaffold 的 Body。

TabBar & TabBarView

TabBarView 是 Material 组件库中提供了 Tab 布局组件，通常和 TabBar 配合使用。

字段	描述
children
controller
physics	属性同下TabBar
dragStartBehavior	属性同下TabBar

TabBar属性列表

字段	属性	描述
tabs	List	两个多个的Tab列表
controller	TabController	控制tab的控制器
isScrollable	bool	标签栏是否可以水平滚动
indicatorColor	Color	设置选中Tab指示器的颜色
automaticIndicatorColor	Adjustmentbool	是否自动调整indicatorColor
indicatorWeight	double	设置选中Tab指示器线条的粗细
indicatorPadding	EdgeInsetsGeometry	设置选中Tab指示器间距，默认值为 EdgeInsets.zero
indicator	Decoration	设置选中Tab指示器的外观
indicatorSize	TabBarIndicatorSize	设置选中Tab指示器的大小
labelColor	Color	设置选中Tab文字的颜色
labelStyle	TextStyle	设置选中Tab文字的样式
labelPadding	EdgeInsetsGeometry	设置选中Tab文字的间距
unselectedLabelColor	Color	设置未选中Tab文字的颜色
unselectedLabelStyle	TextStyle	设置未选中Tab文字的样式
dragStartBehavior	DragStartBehavior	处理拖动开始行为的方式
overlayColor	MaterialStateProperty	定义响应焦点、悬停和飞溅颜色
mouseCursor	MouseCursor	鼠标指针进入或悬停在鼠标指针上时的光标
enableFeedback	bool	检测到的手势是否应提供声音和/或触觉反馈
onTap	ValueChanged	单击Tab时的回调
physics	ScrollPhysicsTabBar	的滚动视图如何响应用户输入

TabController 用于监听和控制 TabBarView 的页面切换，通常和 TabBar 联动。如果没有指定，则会在组件树中向上查找并使用最近的一个 DefaultTabController

Tab属性列表

字段	属性	介绍
text	String	文本
icon	Icon	图标
iconMargin	EdgeInsets	图标编剧
height		高度
child	widget	自定义 widget

注意，text 和 child 是互斥的，不能同时制定。

List tabs = ["新闻", "历史", "图片"];
...
return DefaultTabController(
    length: tabs.length,
    child: Scaffold(
    appBar: AppBar(
      title: Text("App Name"),
      bottom: TabBar(
        tabs: tabs.map((e) => Tab(text: e)).toList(),
      ),
    ),
    body: TabBarView( //构建
      children: tabs.map((e) => Container(
            alignment: Alignment.center,
            child: Text(e, textScaleFactor: 5)
        )
      ).toList(),
    ),
  );
);