今日应做的事没有做，明天再早也是耽误了。
前言
不知道你们是怎么想的，我在学习新的语言开发UI的时候，都会和自己最熟悉的语言做比较。想对应iOS的UITabbarController（底部导航）是哪个？UINavigationController（导航控制器）是哪个？UIViewController（视图控制器）是哪个？从去年的U3D到现在的Flutter，我刚开始接触的时候都这么想的。U3D的暂且不谈，在Flutter中，有一个组件和上面三者都有关系，那就是Scaffold（页面骨架）。
正文
一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部 Tab 导航菜单等。如果每个路由页面都需要开发者自己手动去实现这些，这会是一件非常麻烦且无聊的事。幸运的是，Flutter Material 组件库提供了一些现成的组件来减少我们的开发任务。Scaffold 是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。
构造函数
Scaffold({
Key? key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.onDrawerChanged,
this.endDrawer,
this.onEndDrawerChanged,
this.bottomNavigationBar,
this.bottomSheet,
this.backgroundColor,
...
/// 省略部分
})
-
appBar：是一个Material风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。 -
body：页面主要内容。 -
floating开头的是右下角悬浮按钮，有些电商App内容比较多，一般喜欢在右下角加个按钮，一键回到顶部。 -
drawer相关的，是抽屉效果。 -
bottomNavigationBar：底部导航，对应原生UITabbarController。
举个栗子
我们要实现一个App页面，它包含：
- 一个导航栏
- 页面
- 底部导航
底部导航代码：
class TabbarController extends StatefulWidget {
const TabbarController({Key? key}) : super(key: key);
@override
State<TabbarController> createState() => _TabbarControllerState();
}
class _TabbarControllerState extends State<TabbarController> {
int _selectedIndex = 0;
List<Widget> pages = <Widget>[
const HomePage(),
const UIPage(),
const AnimationPage(),
const MePage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: pages,
sizing: StackFit.expand,
),
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
BottomNavigationBarItem(icon: Icon(Icons.view_agenda), label: 'UI'),
BottomNavigationBarItem(icon: Icon(Icons.animation), label: '动画'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
],
currentIndex: _selectedIndex,
fixedColor: Colors.blue,
type: BottomNavigationBarType.fixed,
onTap: _onItemTapped,
),
);
}
_onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
}
TabbarController用到了两个组件，BottomNavigationBar和IndexedStack。简单介绍一下BottomNavigationBar，就是类似原生的UITabbarController。
BottomNavigationBar
-
items：数组放是按钮。 -
currentIndex：当前选中。 -
fixedColor：选中的颜色，还有基础颜色可自行查看构造方法。 -
onTap：点击事件。
IndexedStack就是里面的Widget是在堆叠的，给定指定下标就能显示对应的Widget。
IndexedStack：
-
children：视图数组，里面存放堆叠的Widget。 -
index：需要显示的Widget下标
BottomNavigationBar和IndexedStack两者结合就能实现底部导航切换效果，效果如下：
再看下首页（HomePage()）的代码：
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() {
return HomePageState();
}
}
//state 控制widget的改变
class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('首页'),
),
body: ListView(
children: [
Image.asset(
'images/top.jpeg',
height: 240,
fit: BoxFit.cover,
),
titleSection,
buttonSection,
textSection,
],
),
);
}
/// 省略 titleSection、 buttonSection、textSection的实现
}
可以看到，首页用到了组件AppBar，废话不多说，先看看构造函数：
AppBar({
Key? key,
this.leading, //导航栏最左侧Widget，常见为抽屉菜单按钮或返回按钮。
this.automaticallyImplyLeading = true, //如果leading为null，是否自动实现默认的leading按钮
this.title,// 页面标题
this.actions, // 导航栏右侧菜单
this.bottom, // 导航栏底部菜单，通常为Tab按钮组
this.elevation = 4.0, // 导航栏阴影
this.centerTitle, //标题是否居中
this.backgroundColor,
... //其他属性见源码注释
})
注释已经写好，也是很简单，常用的就左右两侧的按钮，leading是左侧按钮，actions是右侧的，是个数组，便于实现右侧多按钮页面。
总结
通过上面的对Scaffold的使用，可以得出以下结论：
-
Scaffold只用AppBar和body两个属性，那么该Widget就相当于原生有的导航栏UIViewController。 -
Scaffold用到BottomNavigationBar，那个该Widget就相当于原生的UITabbarController。
有兴趣的小伙伴可以看下我的 Flutter学习记录
后记
Scaffold对于我这开始是iOS原生开发的程序猿来说，还是一个比较牛皮的组件，几个简单的属性（抽屉、悬浮按钮还没提呢）赋值就能实现对于原生来说比较复杂的页面，快，太快了。
