Scaffold

该组件是页面结构的脚手架,包含了页面的基本组成单元,例如:

  • appBar【头部导航条区域】

  • body【页面主题内容区域】

Scaffold  - 图1

  • drawer【侧边栏抽屉区域】

Scaffold  - 图2

  • bottomNavigationBar【底部tabBar区域】

Scaffold  - 图3

  • floatingActionButton【右下角浮动按钮区域】

Scaffold  - 图4

基本代码示例:

  1. Scaffold(
  2. appBar: AppBar(
  3. title: Text('页面标题'),
  4. ),
  5. body: Center(
  6. child: Text('主体内容'),
  7. ),
  8. floatingActionButton: FloatingActionButton(
  9. onPressed: () {},
  10. child: Icon(Icons.add),
  11. ),
  12. drawer: Drawer(),
  13. ),
  14. // 主题颜色
  15. theme: ThemeData(primarySwatch: Colors.red),
  16. )

Scaffold  - 图5