Flutter开发之——Scaffold

}) : 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(“右侧抽屉”),

Text(“右侧抽屉”),

],

)

),

persistentFooterButtons: [Icon(Icons.send),Text(“One”),RaisedButton.icon(onPressed: (){}, icon: Icon(Icons.print), label: Text(“打印”))],

backgroundColor: Colors.grey,

primary: true,

extendBody: false,

body: Column(

children: [

Text(“Body”,textScaleFactor: 2,),

],

),

最后

希望本文对你有所启发，有任何面试上的建议也欢迎留言分享给大家。

好了，今天的分享就到这里，如果你对在面试中遇到的问题，或者刚毕业及工作几年迷茫不知道该如何准备面试并突破现状提升自己，对于自己的未来还不够了解不知道给如何规划，来看看同行们都是如何突破现状，怎么学习的，来吸收他们的面试以及工作经验完善自己的之后的面试计划及职业规划。

好了~如果你看到了这里，觉得文章写得不错就给个赞呗？如果你觉得那里值得改进的，请给我留言。一定会认真查询，修正不足。谢谢。

为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！希望读到这的您能点个小赞和关注下我，以后还会更新技术干货，谢谢您的支持！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
图片转存中…(img-SXTYziep-1714740390665)]

为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！希望读到这的您能点个小赞和关注下我，以后还会更新技术干货，谢谢您的支持！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！