十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
最近在开发中想实现一个AppBar下面有选项卡,来回切换的页面功能,百度了很多没有和自己需求符合的,网上大都是返回的Scaffold,使用系统的Appbar,添加至.bottom中,但是现在项目中用的是自定义的Appbar,不想破坏系统的统一封装。
专注于为中小企业提供网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业石拐免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了超过千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
所以在body 中实现TabBar 和 TabBarView,开始使用Column一直不行,只能显示一个,但是在body里面同时放置 TabBar 和 TabBarView需要注意
TabBarView 的父 Widget 必须知道宽高才能布局,否则,会报错:BoxConstraints forces an infinite height.
使用 Column + Expanded 即可:
注:还有设置tabbar的tab背景颜色,tabbar中的tab的背景颜色取的实际是AppBar的主题色,所以我们将tabbar放在Material中来重置了主题色,变成我们想要的背景色.
buildTabBar为创建TabBar的方法:
buildBodyView创建视图方法:
本次主要是记录Fultter Theme主题的设备与AppBar中的一些属性的使用及说明。目前项目开发有了四个界面。前期主题没太注意,今天看来要好好总结一下近期所学。
首先,Android主题沉浸式设置,Flutter篇:
根据字面意思就能看出来是对状态懒得设置,其中用到了 dart:io 与 flutter/services.dart 这两个重点Mark一下,有时间深入探究一下用法跟能力。回归正题。
主题数据,其中最常用的是 primarySwatch 、 primaryColor 、 accentColor 。
primarySwatch:UI右下角的FloatingActionButton的颜色就是默认取值MaterialColor,
默认是蓝色的,如果修改成primarySwatch,就会变成这个颜色值。只支持MaterialColor。
primaryColor:顶部导航栏和状态栏的颜色修改,需要用到这个属性,类型 Color。
accentColor:前景色(文本、按钮、覆盖边缘效果等)。
看一下项目中的使用
其中 brightness 主题设置较为关键,它是设置状态栏图标与字体颜色的。
brightness: Brightness.dark 状态栏图标与字体颜色为白色。
brightness: Brightness.light 状态栏图标与字体颜色为黑色。
iconTheme :设置appbar icon的颜色,appbar中icon的颜色会根据primaryColor的改变来确定自身的颜色,这里可以在iconTheme中指定icon的颜色。
默认不做修改前:
这篇将会解决手动切换主题以及跟随手机切换主题来更新UI(包括自己创建的Widget)
主题切换有个问题,就是如果是我们自定义或者在 build() 自己创建的部件是不会随着系统的主题切换而发生主题色变化的(实际测试中,如果页面在顶层(没有被push)切换主题并不会触发 build() 方法,(push之后的页面切换系统主题是可以触发 build() 的,而且会频繁触发好多次...),既然无法通过重新 build 更新组件的主题色,那么我们在切换主题后,强制触发整个app的 build() 就可以了)
color: Color(0xFF5e12a9)
00%=FF(不透明)
5%=F2
10%=E5
15%=D8
20%=CC
25%=BF
30%=B2
35%=A5
40%=99
45%=8c
50%=7F
55%=72
60%=66
65%=59
70%=4c
75%=3F
80%=33
85%=21
90%=19
95%=0c
100%=00(全透明)
参考原文链接:
主要用到的是appbar中的brightness属性,brightness有两个值可取,分别是Brightness.dark和Brightness.light.
另一种方案是:就是用AnnotatedRegionSystemUiOverlayStyle包裹,
发现一种更灵活的办法,如下:
只需要在最外层包裹一下,然后设置状态栏字体颜色就可以了,可以不用appbar,更加灵活