MaterialApp
先看下上图的具体用法:
1. title:标题
2. actions:表示右侧的按钮的动作
3. leading:表示左侧的按钮的动作
4. flexibleSpace:
5. backgroundColor: Colors.red, //导航栏和状态栏的的颜色
6. elevation: 10, //阴影的高度
7.bottom :导航栏下面显示的widget
8.brightness :状态栏的亮度
9. iconTheme,左侧图表的样式
12. toolbarOpacity: 0.5, //整个导航栏的不透明度
14. titleSpacing: 10, //标题两边的空白区域,
appBar代码:
1. title:标题
可以是文字或者widget,可以自定义
如:
2. actions:表示右侧的按钮的动作
是一个包含widget的数组:
上面表示两个按钮,同时还有点击事件,只不过上面我把点击事件写成了空的。
3. leading:表示左侧的按钮的动作
这个也是一个widget,也可以自定义动作,如下:
4. flexibleSpace:
堆叠在工具栏和标签栏后面。 它的高度与应用栏的整体高度相同。
flexible space 实际上并不灵活,除非[AppBar]的容器改变了[AppBar]的大小。 [CustomScrollView]中的[SliverAppBar]在滚动时更改[AppBar]的高度。
也可以看下 FlexibleSpaceBar
5. backgroundColor: Colors.red, //导航栏和状态栏的的颜色
导航栏的颜色和样式可以再Main.dart的MaterialApp里面配置统一的。
但有时间我们的某些页面有单独的设计,这个背景也是可以修改的。
6. elevation: 10, //阴影的高度
默认在导航栏的下面有4的高度阴影,这个也可以修改的
7.bottom :导航栏下面显示的widget
看上面图片中的bottom文字
其中这个bottom是需要PreferredSize
的,里面有child和宽高,宽高用size来设置
8.brightness :状态栏的亮度
这与[backgroundColor],[iconTheme],[textTheme]
一起设置。
默认是和 ThemeData.primaryColorBrightness
一致的.
9.iconTheme,左侧图标的样式
表示颜色是黄色,不透明度是0.5,最大值是1;以及大小是30,默认的大小是24
10.textTheme:字体的样式
我们要设置的话一般用merge,这样不会改变其他的值。
默认有13中样式:
其中thin 表示字体的粗细为FontWeight.w100
normal是FontWeight.w400
medium是FontWeight.w500
字符间距为0.0
size就是字体的大小
11.centerTitle:标题是否居中
默认是false,一般我们的设计都是把导航栏的标题居中,不遵循android的md设计,都是按照苹果的设计来的