cover

Flutter组件--Scaffold相关属性

Flutter中Scaffold组件

~废弃回忆 �༄

440人浏览 · 2022-10-13 09:39:39

~废弃回忆 �༄ · 2022-10-13 09:39:39 发布

Scaffold介绍

Scaffold 我们通常俗称为脚手架.在每一个页面中基本都需要用到Scaffold ，除非当你的页面不需要导航区，但仍希望您使用 Scaffold来作为每个页面的顶级组件.

Scaffold属性和说明

序列号	字段	属性	描述
1	appBar	PreferredSizeWidget	显示脚手架的顶部导航区
2	body	Widget	显示脚手架的主要内容
3	floatingActionButton	Widget	悬浮按钮，位于右下角
4	floatingActionButtonLocation	FloatingActionButtonLocation	决定悬浮按钮的位置
5	floatingActionButtonAnimator	FloatingActionButtonAnimator	决定悬浮按钮的动画
6	persistentFooterButtons	List	显示在脚手架底部的一组按钮(固定在底部不动的)
7	drawer	Widget	左侧抽屉菜单组件
8	onDrawerChanged	DrawerCallback	左侧抽屉菜单改变事件回调
9	endDrawer	Widget	右侧抽屉菜单组件
10	onEndDrawerChanged	DrawerCallback	右侧抽屉菜单改变事件回调
11	bottomNavigationBar	Widget	底部导航条
12	bottomSheet(可以作为评论时候的输入框)	Widget	持久在body下方，底部控件上方的控件
13	backgroundColor	Color	脚手架背景颜色
14	resizeToAvoidBottomInset	bool	防止小组件重复
15	primary	bool	脚手架是否延伸到顶部
16	drawerDragStartBehavior	DragStartBehavior	检测手势行为方式，与drawer配合使用
17	extendBody	bool	是否延伸到底部
18	extendBodyBehindAppBar	bool	是否延伸到顶部，用于做半透明、毛玻璃效果的主要控制属性
19	drawerScrimColor	Color	侧边栏弹出时未遮盖层主页面的颜色
20	drawerEdgeDragWidth	double	侧边栏弹出时未遮罩层的宽度
21	drawerEnableOpenDragGesture	bool	左侧抽屉是否支持手势滑动
22	endDrawerEnableOpenDragGesture	bool	右侧抽屉是否支持手势滑动
23	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"
);

华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

GaussDB性能调优

华为开发者空间

cover

领取云主机，带你基于PyTorch构建高效手写体识别系统

华为开发者空间

cover

华为“云上先锋”实践赛·AI赛道现场会活动成功举办

华为开发者空间

所有评论(0)

查看更多评论

~废弃回忆 �༄

已为社区贡献2条内容