01 | class _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 | } |