乐趣区

关于flutter:Flutter深入浅出组件篇Scaffold

作者：

jiezi

在

Scaffold介绍

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

Scaffold在什么状况下应用

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

示例代码

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

Scaffold属性和阐明

总共23个属性

字段 属性 形容
appBar PreferredSizeWidget 显示脚手架的顶部导航区
body Widget 显示脚手架的次要内容
floatingActionButton Widget 悬浮按钮，位于右下角
floatingActionButtonLocation FloatingActionButtonLocation 决定悬浮按钮的地位
floatingActionButtonAnimator FloatingActionButtonAnimator 决定悬浮按钮的动画
persistentFooterButtons List<Widget> 显示在脚手架底部的一组按钮
drawer Widget 左侧抽屉菜单组件
onDrawerChanged DrawerCallback 左侧抽屉菜单扭转事件回调
endDrawer Widget 右侧抽屉菜单组件
onEndDrawerChanged DrawerCallback 右侧抽屉菜单扭转事件回调
bottomNavigationBar Widget 底部导航条
bottomSheet Widget 长久在body下方，底部控件上方的控件
backgroundColor Color 脚手架背景色彩
resizeToAvoidBottomInset bool 避免小组件反复
primary bool 脚手架是否延长到顶部
drawerDragStartBehavior DragStartBehavior 检测手势行为形式，与drawer配合应用
extendBody bool 是否延长到底部
extendBodyBehindAppBar bool 是否延长到顶部，用于做半透明、毛玻璃成果的次要管制属性
drawerScrimColor Color 侧边栏弹出时非遮蔽层主页面的色彩
drawerEdgeDragWidth double 侧边栏弹出时非遮罩层的宽度
drawerEnableOpenDragGesture bool 左侧抽屉是否反对手势滑动
endDrawerEnableOpenDragGesture bool 右侧抽屉是否反对手势滑动
restorationId String 状态还原标识符

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，其余属性都是在特定的状况才会应用。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章