Flutter Material风格组件(Scaffold)

Scaffold是Material组件的布局容器，可用于展示抽屉（Drawer）、通知（Snack Bar）及底部导航的效果。

Scaffold主要属性如表所示：

下面是Scaffold的基本用法：

Scaffold(
  appBar: AppBar(title: Text('Flutter 实战入门'),),
  body: Container(
child: Text('body'),
alignment: Alignment.center,
  ),
  drawer: Drawer(
child: ListView(
  children: <Widget>[
    DrawerHeader(
      child: Text('头像'),
    ),
    ListTile(title: Text("我的"),),
    ListTile(title: Text("关于"),),
    ListTile(title: Text("主页"),)
  ],
),
  ),
  endDrawer: Drawer(
child: ListView(
  children: <Widget>[
    DrawerHeader(
      child: Text('头像（end）'),
    ),
    ListTile(title: Text("我的"),),
    ListTile(title: Text("关于"),),
    ListTile(title: Text("主页"),)
  ],
),
  ),
  floatingActionButton: FloatingActionButton(onPressed: (){},child:
Text('+'),),
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
  persistentFooterButtons:List.generate(3, (index){
return RaisedButton(onPressed: (){},child:
  Text("persistent"),textColor: Colors.black,);
  }),
  bottomNavigationBar: Row(
children: <Widget>[
  Expanded(
    child: RaisedButton(onPressed: (){},child: Text("微信"),),
    flex: 1,
  ),
  Expanded(
    child: RaisedButton(onPressed: (){},child: Text("通讯录"),),
    flex: 1,
  ),
  Expanded(
    child: RaisedButton(onPressed: (){},child: Text("发现"),),
    flex: 1,
  ),
  Expanded(
    child: RaisedButton(onPressed: (){},child: Text("我"),),
    flex: 1,
  ),
],
  ),
  bottomSheet: RaisedButton(onPressed: (){},child: Text('bottomSheet'),),

)

运行效果如图所示：

打开Drawer的效果如图所示：

酷客网相关文章：

• Flutter Material风格组件(MaterialApp)
• Flutter容器类组件(Row和Column)
• Flutter容器类组件(Container)
• Flutter按钮组件(Button)