属性
1. appBar 显示在界面顶部的一个 AppBar，也就是 Android 中的 ActionBar 、Toolbar
AppBar 控件属性有这些：
- leading 最左边范围的 Widget 控件，如放一个返回键
-
automaticallyImplyLeading 如果 leading 不为 null ，则这个属性无效，如果 leading为 null ，并且该属性为 false ，则这个范围的空间会给 Title 。如图
image.png - title appBar 的标题，在 leading 后面
-
actions 一个 List<Widget> 可以使用 IconButton 控件从右往左排图标，
IconButton.png
也可以使用 PopupMenuButton 最右边显示 3 个点弹出更多，如图
PopupMenuButton.png - flexibleSpace 配合 SliverAppBar 实现类似 CoordinatorLayout 控件 AppBar 折叠效果
- bottom 一个 TabBar ，类似 TabLayout 控件
- elevation 阴影程度，默认为 4
- shape ShapeBorder ，当 elevation 大于 0 ，该属性有效，定义阴影的形状。有 RoundedRectangleBorder，ContinuousRectangleBorder，BeveledRectangleBorder
- backgroundColor appBar背景颜色
- brightness AppBar 的亮度，有白天 Brightness.light 和黑夜模式 Brightness.dark
- iconTheme AppBar 图标的样式 ，通过 IconTheme.of(context) 可以进行设置
- actionsIconTheme actions 属性设置的图标的样式，使用通 iconTheme
- textTheme appBar 的文字样式 可以使用 Theme.of(context).textTheme 来进行设置
- primary appBar 内容是否 嵌入 StatusBar 里面。false 为 嵌入
- centerTitle 标题是否居中显示
- titleSpacing 标题左右间距
- toolbarOpacity 应用程序栏的工具栏的透明程度。值 1.0 是完全不透明的，值 0.0 是完全透明的
- bottomOpacity appBar 底部透明度，结合 bottom 属性使用设置方式同 toolbarOpacity
appBar: AppBar(
leading: null,
automaticallyImplyLeading : false,
title: Text(widget.title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.ac_unit),
onPressed: (){
},
),
new PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem(child: new Text("我的")),
new PopupMenuItem(child: new Text("设置")),
new PopupMenuItem(child: new Text("钱包")),
]
)
],
elevation: 10,
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
style: BorderStyle.none,
)),
backgroundColor:Colors.green,
brightness: Brightness.light,
iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
primary:true,
centerTitle: true,
titleSpacing:10,
toolbarOpacity:1.0,
bottomOpacity :0.5,
),
效果为
appBar.png
2. body 给一个 Widget ，当前界面所显示的主要布局内容 ，也就是 AppBar 下面部分，如
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello Flutter',
),
],
),
),
显示效果
body.png
3. floatingActionButton 类似 Android 的 FloatingActionButton 控件。
FloatingActionButton 有以下几个属性
- child FloatingActionButton 包含的子 Widget
- tooltip FloatingActionButton 控件长按显示的提示文本
- foregroundColor 除了 FloatingActionButton 的背景色，其他元素的颜色
- backgroundColor FloatingActionButton 的背景色
- focusColor focus 为 true 获取焦点按钮显示的颜色
- hoverColor 悬浮颜色，貌似没啥用
- heroTag 设置 Tag ，防止同一个页面两个 FloatingActionButton 冲突问题
- elevation 阴影程度
- focusElevation 聚焦阴影程度
- hoverElevation 悬浮状态阴影颜色
- highlightElevation 高亮对应的颜色
- disabledElevation 按钮禁用时的颜色
- onPressed 按钮点击事件
- mini 是小图标还是大图标
- shape 按钮的形状(矩形 Border，圆形图标 CircleBorder )
- clipBehavior Clip.antiAlias 剪辑具有抗锯齿功； Clip.antiAliasWithSaveLayer 在剪辑后立即剪辑具有抗锯齿和 saveLayer ：Clip.hardEdge：剪辑，但不应用抗锯齿；Clip.none：不剪辑。
- focusNode FocusNode，对焦点事件的一些设置和处理
- materialTapTargetSize 点击的效果
- isExtended 是否有一个显示的动画
4. floatingActionButtonLocation
设置 FloatingActionButton 的位置，有如下几个属性
FloatingActionButton .png
5. floatingActionButtonAnimator
FloatingActionButton 控件出现或消失的动画
6. persistentFooterButtons 固定在下方显示的按钮，比如对话框下方的确定、取消按钮
persistentFooterButtons:<Widget>[
Text('取消'),
Text('确定')
],
persistentFooterButtons.png
7. drawer 侧边栏控件
通过 Drawer 创建侧边栏
drawer: new Drawer(
child: new UserAccountsDrawerHeader(
accountName: new Text(
"Flutter",
),
accountEmail: new Text(
"Flutter@gmail.com",
),
),
),
drawer.png
8. backgroundColor 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor
9. bottomNavigationBar 显示在页面底部的导航栏
bottomNavigationBar:BottomNavigationBar(
items:[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'首页',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'社区',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'我的',
),
),
],
currentIndex:0,
),
bottomNavigationBar.png
10. bottomSheet 底部弹出框
11. resizeToAvoidBottomPadding 类似于 Android 中的android:windowSoftInputMode=”adjustResize”，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
12. resizeToAvoidBottomInset 重新计算布局空间大小
13. primary 布局是否显示到顶部状态栏
14. drawerDragStartBehavior 默认为 DragStartBehavior.down ，还有一种为
DragStartBehavior.start ，暂时不知道啥作用。
15. extendBody 暂时不知道啥作用。
16. drawerScrimColor Drawer 展开后剩余空间的颜色，可是 30% 透明那种
最后代码 ：
Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading : false,
title: Text(widget.title),
actions: <Widget>[
IconButton(
icon: Icon(Icons.ac_unit),
onPressed: (){
},
),
new PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
new PopupMenuItem(child: new Text("我的")),
new PopupMenuItem(child: new Text("设置")),
new PopupMenuItem(child: new Text("钱包")),
]
)
],
elevation: 10,
shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: new BorderSide(
style: BorderStyle.none,
)),
backgroundColor:Colors.green,
brightness: Brightness.light,
iconTheme: IconTheme.of(context).copyWith(color: Colors.black),
actionsIconTheme: IconTheme.of(context).copyWith(color: Colors.black),
textTheme: Theme.of(context).textTheme.apply(fontSizeFactor: 1.2),
primary:true,
centerTitle: true,
titleSpacing:10,
toolbarOpacity:1.0,
bottomOpacity :0.5,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello Flutter',
),
],
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
tooltip: 'Increment',
foregroundColor: Colors.cyanAccent,
backgroundColor: Colors.green,
focusColor: Colors.red,
hoverColor:Colors.black,
onPressed: _showMessage,
shape :const CircleBorder(),
clipBehavior: Clip.none,
focusNode: _node,
isExtended: true,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButtonAnimator:FloatingActionButtonAnimator.scaling,
persistentFooterButtons:<Widget>[
Text('取消'),
Text('确定')
],
drawer: new Drawer(
child: new UserAccountsDrawerHeader(
accountName: new Text(
"Flutter",
),
accountEmail: new Text(
"Flutter@gmail.com",
),
),
),
bottomNavigationBar:BottomNavigationBar(
items:[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'首页',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'社区',
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'我的',
),
),
],
currentIndex:0,
),
bottomSheet:Text('底部弹出框'),
primary:true,
drawerDragStartBehavior: DragStartBehavior.down,
extendBody: true,
drawerScrimColor: Color.fromARGB(50, 0, 0, 0),
);
效果为:
效果1.png
效果图2.png
