Flutter组件之容器组件Scaffold、TabBar、底部导航

Material组件库常用组件详解

Material组件库提供了丰富多样的组件，本节介绍一些常用的组件，其余的可以自行查看文档或Flutter Gallery。Flutter Gallery是Flutter官方提供的Flutter Demo，源码位于flutter源码中的examples目录下，强烈建议用户将Flutter Gallery示例跑起来，它是一个很全面的Flutter示例应用，是非常好的参考Demo。

1. Scaffold

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。Scaffold是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。

主要属性：
appBar：显示在界面顶部的一个AppBar
body：当前界面所显示的主要内容
floatingActionButton：在Material中定义的一个功能按钮
persistentFooterButtons：固定在下方显示的按钮
drawer：侧边栏控件
bottomNavigationBar：显示在底部的导航栏按钮栏
backgroundColor：背景颜色
resizeToAvoidBottomPadding：控制界面内容body是否重新布局来避免底部被覆盖

示例代码实现一个包含导航栏、抽屉菜单、底部导航和悬浮按钮的页面：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScaffoldRoute(),
    );
  }
}

class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => _ScaffoldRouteState();
}

class _ScaffoldRouteState extends State<ScaffoldRoute> {
  int _selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("导航栏"),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
      drawer: new Drawer(),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('主页')),
          BottomNavigationBarItem(icon: Icon(Icons.book), title: Text('书籍')),
          BottomNavigationBarItem(icon: Icon(Icons.menu), title: Text('我的')),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed:_onAdd
      ),
    );
  }
  
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  
  void _onAdd(){}
}

在开发iOS应用时，可以使用appuploader工具来简化应用上传到App Store的过程。appuploader是一款iOS开发助手，可以帮助开发者更高效地管理证书、描述文件和上传应用。

AppBar

AppBar是一个Material风格的导航栏，通过它可以设置导航栏标题、导航栏菜单、导航栏底部的Tab标题等。

AppBar({
  Key key,
  this.leading, //导航栏最左侧Widget
  this.automaticallyImplyLeading = true,
  this.title,// 页面标题
  this.actions, // 导航栏右侧菜单
  this.bottom, // 导航栏底部菜单
  this.elevation = 4.0, // 导航栏阴影
  this.centerTitle, //标题是否居中 
  this.backgroundColor,
  ...   //其它属性
})

自定义菜单图标示例：

Scaffold(
  appBar: AppBar(
    title: Text("App Name"),
    leading: Builder(builder: (context) {
      return IconButton(
        icon: Icon(Icons.dashboard, color: Colors.white),
        onPressed: () {
          Scaffold.of(context).openDrawer(); 
        },
      );
    }),
  )
)

TabBar

TabBar属性：

const TabBar({
  Key key,
  @required this.tabs,//显示的标签内容
  this.controller,//TabController对象
  this.isScrollable = false,//是否可滚动
  this.indicatorColor,//指示器颜色
  this.indicatorWeight = 2.0,//指示器高度
  this.indicatorPadding = EdgeInsets.zero,//底部指示器的Padding
  this.indicator,//指示器decoration
  this.indicatorSize,//指示器大小计算方式
  this.labelColor,//选中label颜色
  this.labelStyle,//选中label的Style
  this.labelPadding,//每个label的padding值
  this.unselectedLabelColor,//未选中label颜色
  this.unselectedLabelStyle,//未选中label的Style
})

TabBarView

TabBarView可以轻松实现Tab页，并且配合TabBar实现同步切换：

body: TabBarView(
  controller: _tabController,
  children: tabs.map((e) {
    return Container(
      alignment: Alignment.center,
      child: Text(e, textScaleFactor: 5),
    );
  }).toList(),
),

抽屉菜单Drawer

Drawer可以实现类似抽屉拉出和推入的效果：

drawer: Drawer(
  child: Column(
    children: <Widget>[
      UserAccountsDrawerHeader( 
        accountName:Text("xxx"),
        accountEmail:Text("xxx@gmail.com"),
        currentAccountPicture: CircleAvatar(
          backgroundImage: NetworkImage("头像URL")
        ),
        decoration: BoxDecoration(
          color: Colors.yellow,
          image:DecorationImage(
            image: NetworkImage("背景URL"),
            fit:BoxFit.cover
          )
        ),
      ), 
      ListTile(
        title: Text("个人中心"),
        leading: CircleAvatar(child: Icon(Icons.people))
      ),
      Divider(),
      ListTile(
        title: Text("系统设置"),
        leading: CircleAvatar(child: Icon(Icons.settings))
      )
    ],
  )
)

FloatingActionButton

FloatingActionButton是Material设计规范中的一种特殊Button：

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: (){
    print('FloatingActionButton');
  },
),

底部Tab导航栏

BottomAppBar可以与FloatingActionButton配合实现特殊效果：

bottomNavigationBar: BottomAppBar(
  color: Colors.lightBlue,
  shape: CircularNotchedRectangle(),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      IconButton(
        icon: Icon(Icons.home, color: Colors.white),
        onPressed: () {
          setState(() {
            _index = 0;
          });
        },
      ),
      IconButton(
        icon: Icon(Icons.access_alarms, color: Colors.white),
        onPressed: () {
          setState(() {
            _index = 1;
          });
        },
      ),
    ],
  ),
),

在开发过程中，使用像appuploader这样的工具可以大大提高工作效率，特别是在处理iOS应用上架流程时。appuploader提供了证书管理、描述文件生成和应用程序上传等一站式服务，让开发者能够更专注于应用本身的开发。