用户登录

在这个 SliverAppBar 里面,可以再设置一下它的 actions 参数,它的值是一组小部件,这组小部件默认会在 SliverAppBar 的右侧显示。

在 lib/app/header/components 里面新建一个文件,名字是 app_header_search.dart,文件里定义一个小部件,名字是 AppHeaderSearch ,小部件用一个 Container,里面可以用 padding 添加点边距,EdgeInsets.symmetric ,把水平方向添加点边距,大小是 8 。

child 暂时用一个 Icon 小部件,小图标可以用一下 Icons.search_outlined。

app_header_user.dart

在新建一个文件,放在 lib/app/header/components 里面,名字是 app_header_user.dart ,定义一个小部件,名字是 AppHeaderUser,小部件里先用一个 Container ,用 padding 添加点边距,EdgeInsets.symmetric ,horizontal 是 8 。

小部件的 child 暂时用一个 Container,把 width 设置成 32,再把 height 设置成 32,它的 child 可以用一个 CircleAvatar 小部件,backgroundImage 用一个 NetworkImage,设置一下网络图像的地址。

app_header.dart

回到 app_header.dart ,在这个 actions 里面,先添加一个 AppHeaderSearch ,再添加一个 AppHeaderUser。

然后观察一下页面顶部,这里会显示一个搜索小图标,还有一个用户头像。现在这个头像的显示比例有点问题。打开 app_header_user ,选中这个 Container ,给它包装一个 Center 小部件。然后再观察一下页面顶部这里的显示。

创建首页头部动作(AppHeaderSearch,AppHeaderUser)《 Flutter 移动端实例:内容列表 》

统计

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

社会化网络

关于

微信订阅号

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