Flutter笔记45：Scaffold组件

Scaffold组件非常重要，决定了整个页面的风格，里面包含了很多属性，如body放置正文主体，drawer侧边弹出抽屉、bottomNavigationBar底部导航栏等等

class _DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //顶部AppBar应用栏
      appBar: AppBar(
        //AppBar背景
        backgroundColor: Colors.red,
        //标题
        title: Text(
          '标题',
          style: TextStyle(color: Colors.white),
        ),
        //标题居中，默认false
        centerTitle: true,
        //appBar底部阴影大小
        elevation: 10.0,
        //左侧内容，这里放图标
        leading: Icon(Icons.home),
        //右侧内容，这里也放图标
        actions: [
          Icon(Icons.add),
        ],
        //AppBar标题底部的内容，会撑开AppBar，通常用来放公告、tab选项卡等比较合适
        bottom: PreferredSize(
          child: Container(
            height: 50.0,
            child: Center(
              child: Text('显示在AppBar标题下面的内容'),
            ),
            decoration: BoxDecoration(color: Colors.orange),
          ),
          preferredSize: Size.fromHeight(50.0),
        ),
      ),

      //中间内容
      body: Center(
        child: Text('中间内容'),
      ),

      //侧边栏抽屉 手指滑动可以拉出来  如果AppBar的leading 没有设置其他内容，当Drawer存在，会自动在左上角AppBar里加个菜单按钮，点击菜单按钮可以展开Drawer
      drawer: Drawer(
        child: Container(
          width: 150.0,
          color: Colors.orange,
          child: Text(
            '侧边栏',
            style: TextStyle(color: Colors.white, fontSize: 24.0),
          ),
        ),
      ),

      //底部tab栏，BottomNavigationBar、BottomAppBar皆可
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          fixedColor: Colors.redAccent,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('主页')),
            BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('聊天')),
            BottomNavigationBarItem(
                icon: Icon(Icons.person), title: Text('我的')),
          ]),

      //FAB按钮
      // floatingActionButton: FloatingActionButton(
      //   onPressed: () {},
      //   child: Icon(Icons.add),
      // ),
      floatingActionButton: Builder(builder: (BuildContext context) {
        return FloatingActionButton(
          onPressed: () {
            var snackbar = SnackBar(
              content: Text('显示屏幕底部消息snackBar'),
              backgroundColor: Colors.red,
              duration: Duration(microseconds: 3000),
              action: SnackBarAction(
                  label: '撤销',
                  onPressed: () {
                    print('1');
                  }),
            );
            Scaffold.of(context).showSnackBar(snackbar);
          },
          child: Icon(Icons.bluetooth),
          backgroundColor: Colors.orange,
        );
      }),

      //底部持久化按钮，显示在bottomNavigationBar和FloatingActionButton之间
      persistentFooterButtons: [Icon(Icons.ac_unit)],
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！