今日应做的事没有做，明天再早也是耽误了。

前言

不知道你们是怎么想的，我在学习新的语言开发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两者结合就能实现底部导航切换效果，效果如下：

TabbarController.gif

再看下首页（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原生开发的程序猿来说，还是一个比较牛皮的组件，几个简单的属性（抽屉、悬浮按钮还没提呢）赋值就能实现对于原生来说比较复杂的页面，快，太快了。

Flutter学习之十 Scaffold