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)], ); } }
Flutter笔记45:Scaffold组件
Scaffold组件非常重要,决定了整个页面的风格,里面包含了很多属性,如body放置正文主体,drawer侧边弹出抽屉、bottomNavigationBar底部导航栏等等