用户登录

在 AppHeader 的下面可以再添加一个应用工具栏,在它里面可以显示内容导航还有布局切换器这些东西。创建一个文件,放在 lib/app/toolbar 里面,名字是 app_toolbar.dart。

在文件里定义一个小部件,名字叫 AppToolbar ,小部件的 build 方法里面声明一个 Widget? 名字是 primary ,下面先让这个 primary 等于 Text('Primary') ,然后再声明一个 Widget? 名字是 secondary,再让这个 secondary 等于一个 Text ,文字是 Secondary。

小部件 return 的东西可以用一个 SliverToBoxAdapter [əˈdæptər] ,它的 child 是一个 Container,它的 child 可以是一个 Column ,在它的 children 里面再添加一个 Container ,用 alignment 设置一下对齐,设置成 Alignment.bottomLeft,再用 padding 添加点边距,EdgeInsets.only,把左边的边距设置成 24。它的 child 设置成 primary。

在这个 Column 里面再添加一个 Container ,用 alignment 把对齐设置成 Alignment.bottomRight,用 padding 设置一下边距,EdgeInsets.only,把 right 设置成 8 。小部件的 child 设置成 secondary。

post_index.dart

打开 post_index.dart ,在这个 slivers 里面,在这个 AppHeader 的下面,再添加一个 AppToolbar 小部件。然后再观察一下应用的界面。现在应用头部的下面,就会显示一个 AppToolbar 小部件。

app_theme.dart

这个应用栏的背景颜色可以再修改一下,打开 app_theme.dart,找到在这里定义的 appBarThemeDark,修改一下它的 backgroundColor 的值,设置成 primaryBackgroundColorDark ,修改以后需要重新启动一下。

最后在模拟器上再测试一下。

创建应用工具栏(AppToolbar)《 Flutter 移动端实例:内容列表 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点