Scaffold介绍

Scaffold 咱们通常俗称为脚手架，在后面的文章中咱们说到，Material 组件（MDC）帮忙开发者实现 Material Design，Scaffold 实现了根本的 Material Design 布局构造。在 Material 设计中定义的单个界面上的各种布局元素，在 Scaffold 中都反对。

Scaffold在什么状况下应用

在每一个页面中根本都须要用到Scaffold ，除非当你的页面不须要导航区，但仍心愿您应用 Scaffold 来作为每个页面的顶级组件。

示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

Scaffold属性和阐明

总共23个属性
字段属性形容
appBarPreferredSizeWidget显示脚手架的顶部导航区
bodyWidget显示脚手架的次要内容
floatingActionButtonWidget悬浮按钮，位于右下角
floatingActionButtonLocationFloatingActionButtonLocation决定悬浮按钮的地位
floatingActionButtonAnimatorFloatingActionButtonAnimator决定悬浮按钮的动画
persistentFooterButtonsList<Widget>显示在脚手架底部的一组按钮
drawerWidget左侧抽屉菜单组件
onDrawerChangedDrawerCallback左侧抽屉菜单扭转事件回调
endDrawerWidget右侧抽屉菜单组件
onEndDrawerChangedDrawerCallback右侧抽屉菜单扭转事件回调
bottomNavigationBarWidget底部导航条
bottomSheetWidget长久在body下方，底部控件上方的控件
backgroundColorColor脚手架背景色彩
resizeToAvoidBottomInsetbool避免小组件反复
primarybool脚手架是否延长到顶部
drawerDragStartBehaviorDragStartBehavior检测手势行为形式，与drawer配合应用
extendBodybool是否延长到底部
extendBodyBehindAppBarbool是否延长到顶部，用于做半透明、毛玻璃成果的次要管制属性
drawerScrimColorColor侧边栏弹出时非遮蔽层主页面的色彩
drawerEdgeDragWidthdouble侧边栏弹出时非遮罩层的宽度
drawerEnableOpenDragGesturebool左侧抽屉是否反对手势滑动
endDrawerEnableOpenDragGesturebool右侧抽屉是否反对手势滑动
restorationIdString状态还原标识符

Scaffold属性具体应用

1、appBar

显示脚手架的顶部导航栏

应用办法

Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),);

2、body

显示脚手架的次要内容

应用办法

Scaffold(  appBar: AppBar(      title: Text("Scaffold"),  ),  body: Center(      child: Text("body"),  ),);

3、floatingActionButton

悬浮按钮，默认位于右小角

应用办法

Scaffold(  appBar: AppBar(      title: Text("Scaffold"),  ),  body: Center(      child: Text("body"),  ),  floatingActionButton: FloatingActionButton(    onPressed: (){           print("add");    },    child: Icon(Icons.add)  ),);

4、floatingActionButtonLocation

决定悬浮按钮的地位

应用办法

Scaffold(  appBar: AppBar(      title: Text("Scaffold"),  ),  body: Center(      child: Text("body"),  ),  floatingActionButton: FloatingActionButton(    onPressed: (){           print("add");    },    child: Icon(Icons.add)  ),  floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,);

5、floatingActionButtonAnimator

决定悬浮按钮的动画

应用办法

Scaffold(  appBar: AppBar(      title: Text("Scaffold"),  ),  body: Center(      child: Text("body"),  ),  floatingActionButton: FloatingActionButton(    onPressed: (){           print("add");    },    child: Icon(Icons.add)  ),  floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,);

6、persistentFooterButtons

显示在脚手架底部的一组按钮

应用办法

Scaffold(  appBar: AppBar(      title: Text("Scaffold"),  ),  body: Center(      child: Text("body"),  ),    persistentFooterButtons: [    TextButton(onPressed: (){}, child: Text("Text1")),    TextButton(onPressed: (){}, child: Text("Text2")),  ],);

7、drawer

左侧抽屉菜单组件，如果须要自定义可通过设置 Scaffold 的 key 来操作手动关上侧边栏，代码如下

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(      title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(      child: Text("body"),  ),    drawer: Drawer(    child: Center(child: Text("draw"),),  ));

8、onDrawerChanged

左侧抽屉菜单扭转事件回调

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(      title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(      child: Text("body"),  ),    drawer: Drawer(    child: Center(child: Text("draw"),),  ),  onDrawerChanged: (isOpen) {      print(isOpen);  },);

9、endDrawer

右侧抽屉菜单组件,性能和 drawer 一样，惟一的区别是一个在左侧，一个在右侧。

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(      title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(      child: Text("body"),  ),    endDrawer: Drawer(      child: Center(child: Text("draw"),),  ),);

10、onEndDrawerChanged

右侧抽屉菜单扭转事件回调，应用形式和 onDrawerChanged 一样。

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(      title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(      child: Text("body"),  ),    endDrawer: Drawer(      child: Center(child: Text("draw"),),  ),  onEndDrawerChanged: (isOpen) {    print(isOpen);  },);

11、bottomNavigationBar

底部导航条，罕用于切换底部 item

应用办法

  int _currentIndex = 0;  List<Widget> _pages = [    Center(child: Text("tab1"),),    Center(child: Text("tab2"),),  ];Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),  body: _pages[_currentIndex],  bottomNavigationBar: BottomNavigationBar(    items: [      BottomNavigationBarItem(        label: "tab1",        icon: Icon(Icons.settings)      ),      BottomNavigationBarItem(        label: "tab2",        icon: Icon(Icons.settings)      )    ],    currentIndex: _currentIndex,    onTap: (currentIndex) {      setState(() {        _currentIndex = currentIndex;      });    },  ),);

12、bottomSheet

长久在body下方，底部控件上方的控件

应用办法

Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),  body: _pages[_currentIndex],    bottomSheet: Container(child: Row(    children: [      Expanded(child: TextField()),      ElevatedButton(onPressed: (){}, child: Text("发送"))    ],  ),));

13、backgroundColor

脚手架背景色彩

应用办法

Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),  body: _pages[_currentIndex],    backgroundColor: Colors.pink,);

14、resizeToAvoidBottomInset

避免组件反复，当键盘弹起时会挡住组件，该值设置为 ture 可避免键盘遮挡

应用办法

Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),  body: _pages[_currentIndex],    resizeToAvoidBottomInset: true,);

15、primary

脚手架是否延长到顶部

应用办法

Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),  body: _pages[_currentIndex],    primary: true,);

16、drawerDragStartBehavior

拖动行为形式，与 drawer 配合应用，用于关上和敞开抽屉的拖动行为将在检测到拖动手势时开始。 如果设置为 DragStartBehavior.down，它将在首次检测到 down 事件时开始。当拖动返回时会应用 DragStartBehavior.down 是有很显著的卡顿，倡议应用 DragStartBehavior.start

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(      title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(      child: Text("body"),  ),    drawer: Drawer(    child: Center(child: Text("draw"),),  ),  drawerDragStartBehavior: DragStartBehavior.start);

17、extendBody

是否延长到底部，次要用于做半透明成果。

应用办法

Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),  body: _pages[_currentIndex],    extendBody: true,);

18、extendBodyBehindAppBar

是否延长到顶部，用于做半透明、毛玻璃成果的次要管制属性

应用办法

Scaffold(  appBar: AppBar(    title: Text("Scaffold"),  ),  body: _pages[_currentIndex],    extendBodyBehindAppBar: true,);

19、drawerScrimColor

侧边栏弹出时非遮蔽层主页面的色彩

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(      title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(      child: Text("body"),  ),    drawer: Drawer(    child: Center(child: Text("draw"),),  ),  drawerScrimColor: Colors.green,);

20、drawerEdgeDragWidth

侧边栏弹出时非遮罩层的宽度，当滑动的间隔小于该值时，遮罩层会弹出。默认值是20

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(    title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(    child: Text("body"),  ),  drawer: Drawer(    child: Center(child: Text("draw"),),  ),  drawerScrimColor: Colors.green,  drawerEdgeDragWidth: 100,);

21、drawerEnableOpenDragGesture

左侧抽屉是否反对手势滑动，如果设置为 false ，将不能通过侧滑手势滑出，默认true

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(    title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(    child: Text("body"),  ),  drawer: Drawer(    child: Center(child: Text("draw"),),  ),  drawerScrimColor: Colors.green,  drawerEnableOpenDragGesture: false,);

22、endDrawerEnableOpenDragGesture

右侧抽屉是否反对手势滑动，如果设置为 false ，将不能通过侧滑手势滑出，默认 true

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(    title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(    child: Text("body"),  ),  drawer: Drawer(    child: Center(child: Text("draw"),),  ),  drawerScrimColor: Colors.green,  drawerEnableOpenDragGesture: false,  endDrawerEnableOpenDragGesture: false,);

23、restorationId

状态还原标识符

应用办法

GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();Scaffold(  key: _scaffoldKey,  appBar: AppBar(    title: Text("Scaffold"),    leading: IconButton(onPressed: (){      _scaffoldKey.currentState.openDrawer();    }, icon: Icon(Icons.menu_open)),  ),  body: Center(    child: Text("body"),  ),    restorationId: "scaffold");

总结

以上是针对Scaffold的所有应用办法，最罕用的属性有appBar、body，其余属性都是在特定的状况才会应用。