Flutter开发之——Scaffold，Android开发指南

this.drawer, //左边的抽屉

this.onDrawerChanged,//左边抽屉发生变化

this.endDrawer, //右边的抽屉

this.onEndDrawerChanged, //右边抽屉发生变化

this.bottomNavigationBar, //底部导航菜单

this.bottomSheet,//底部持久化提示框

this.backgroundColor, //内容背景色

this.resizeToAvoidBottomPadding,//键盘出现时，界面重新布局(已过时)

this.resizeToAvoidBottomInset, //键盘出现时，界面重新布局(代替resizeToAvoidBottomPadding)

this.primary = true,//AppBar是否显示在屏幕顶部(默认显示为true)

this.drawerDragStartBehavior = DragStartBehavior.start,

this.extendBody = false,

this.extendBodyBehindAppBar = false,

this.drawerScrimColor,

this.drawerEdgeDragWidth,

this.drawerEnableOpenDragGesture = true,

this.endDrawerEnableOpenDragGesture = true,

}) : assert(primary != null),

assert(extendBody != null),

assert(extendBodyBehindAppBar != null),

assert(drawerDragStartBehavior != null),

super(key: key);

2.2 属性解释

| 属性名 | 说明 | 取值 |

| :-: | :-: | :-: |

| appBar | 导航栏 | AppBar对象 |

| backgroundColor | 背景颜色 | Color对象 |

| body | 内容 | Widget |

| bottomNavigationBar | 底部导航栏 | Widget |

| bottomSheet | 持久化显示的底部抽屉 | Widget |

| drawer | 左侧抽屉 | Widget |

| endDrawer | 右侧抽屉 | Widget |

| floatingActionButton | 悬浮按钮 | Widget |

| persistentFooterButtons | 底部按钮组件 | List |

| primary | appBar是否从屏幕顶部布局 | bool对象 |

2.3 Scaffold中组件

2.3.1 AppBar

| 属性名 | 说明 | 取值 |

| :-: | :-: | :-: |

| actions | 按钮列表 | List |

| backgroundColor | 背景颜色 | Color |

| centerTitle | 是否居中 | bool |

| leading | 标题左侧组件 | Widget |

| title | 标题 | Widget |

2.3.2 BottomNavigationBar

| 属性名 | 说明 | 取值 |

| :-: | :-: | :-: |

| items | 标签组(多个值) | List |

| onTap | 点击标签的回调 | Func |

| BottomNavigationBarType | 设置类型 | fixed-自适应宽度

shifting-位置和尺寸都有单击动画 |

| fixedColor | 选中颜色 | Color |

| backgroundColor | 背景颜色 | Color |

| inconSize | 图标尺寸，默认24 | 数值 |

| selectedItemColor | 选中标签颜色 | Color |

| unselectedItemColor | 未选中标签颜色 | Color |

| selectedIconTheme | 选中风格 | |

| unselectedIconTheme | 未选中风格 | |

三 示例

---

3.1 代码

Scaffold(

appBar: AppBar(title: Text(widget.title),

backgroundColor:Colors.orange ,

centerTitle: true,

//leading: Text(“左侧组件”),

),

bottomNavigationBar: BottomNavigationBar(items: [

BottomNavigationBarItem(icon: Icon(Icons.print),title: Text(“打印”)),

BottomNavigationBarItem(icon: Icon(Icons.stop),title: Text(“停止”)),

],

type: BottomNavigationBarType.fixed,

backgroundColor: Colors.blue,

iconSize: 34,

selectedItemColor: Colors.red,

unselectedItemColor: Colors.cyan,

),

//bottomSheet: Text(“持久化显示底部抽屉”),

resizeToAvoidBottomPadding: true,

resizeToAvoidBottomInset: true,

drawer: Drawer(

child: Center(

child: Container(

color: Colors.orange,

child: Text(‘左侧边栏’,style: TextStyle(color: Colors.white,fontSize: 24.0),),

),

)

),

onDrawerChanged: _drawLeftChange ,

onEndDrawerChanged: _drawEndChange,

endDrawer: Drawer(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Text(“右侧抽屉”),

Text(“右侧抽屉”),