首页 > 建站教程 > APP开发,混合APP >  Flutter笔记45:Scaffold组件正文

Flutter笔记45:Scaffold组件

Scaffold组件非常重要,决定了整个页面的风格,里面包含了很多属性,如body放置正文主体,drawer侧边弹出抽屉、bottomNavigationBar底部导航栏等等
01class _DemoPageState extends State<DemoPage> {
02  @override
03  Widget build(BuildContext context) {
04    return Scaffold(
05      //顶部AppBar应用栏
06      appBar: AppBar(
07        //AppBar背景
08        backgroundColor: Colors.red,
09        //标题
10        title: Text(
11          '标题',
12          style: TextStyle(color: Colors.white),
13        ),
14        //标题居中,默认false
15        centerTitle: true,
16        //appBar底部阴影大小
17        elevation: 10.0,
18        //左侧内容,这里放图标
19        leading: Icon(Icons.home),
20        //右侧内容,这里也放图标
21        actions: [
22          Icon(Icons.add),
23        ],
24        //AppBar标题底部的内容,会撑开AppBar,通常用来放公告、tab选项卡等比较合适
25        bottom: PreferredSize(
26          child: Container(
27            height: 50.0,
28            child: Center(
29              child: Text('显示在AppBar标题下面的内容'),
30            ),
31            decoration: BoxDecoration(color: Colors.orange),
32          ),
33          preferredSize: Size.fromHeight(50.0),
34        ),
35      ),
36 
37      //中间内容
38      body: Center(
39        child: Text('中间内容'),
40      ),
41 
42      //侧边栏抽屉 手指滑动可以拉出来  如果AppBar的leading 没有设置其他内容,当Drawer存在,会自动在左上角AppBar里加个菜单按钮,点击菜单按钮可以展开Drawer
43      drawer: Drawer(
44        child: Container(
45          width: 150.0,
46          color: Colors.orange,
47          child: Text(
48            '侧边栏',
49            style: TextStyle(color: Colors.white, fontSize: 24.0),
50          ),
51        ),
52      ),
53 
54      //底部tab栏,BottomNavigationBar、BottomAppBar皆可
55      bottomNavigationBar: BottomNavigationBar(
56          currentIndex: 0,
57          fixedColor: Colors.redAccent,
58          items: <BottomNavigationBarItem>[
59            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('主页')),
60            BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('聊天')),
61            BottomNavigationBarItem(
62                icon: Icon(Icons.person), title: Text('我的')),
63          ]),
64 
65      //FAB按钮
66      // floatingActionButton: FloatingActionButton(
67      //   onPressed: () {},
68      //   child: Icon(Icons.add),
69      // ),
70      floatingActionButton: Builder(builder: (BuildContext context) {
71        return FloatingActionButton(
72          onPressed: () {
73            var snackbar = SnackBar(
74              content: Text('显示屏幕底部消息snackBar'),
75              backgroundColor: Colors.red,
76              duration: Duration(microseconds: 3000),
77              action: SnackBarAction(
78                  label: '撤销',
79                  onPressed: () {
80                    print('1');
81                  }),
82            );
83            Scaffold.of(context).showSnackBar(snackbar);
84          },
85          child: Icon(Icons.bluetooth),
86          backgroundColor: Colors.orange,
87        );
88      }),
89 
90      //底部持久化按钮,显示在bottomNavigationBar和FloatingActionButton之间
91      persistentFooterButtons: [Icon(Icons.ac_unit)],
92    );
93  }
94}