用户登录

下面我们再去创建一个用户头像小部件,新建一个文件,放在 lib/user/components 里面,名字是 user_avatar.dart。在这个文件里定义一个小部件,名字是 UserAvatar。

在小部件里面添加一个属性,类型是 PostUser 名字是 user,再添加一个属性,类型是 double,名字是 size。添加一个构造方法,名字是 UserAvatar,添加一个参数,用 required 标记一下,this.user,再添加一个 this.size ,默认值可以设置成 32。

在小部件的 build 方法里面,声明一个 userId ,值是 user.id,再声明一个 avatarUrl ,它的值是用户头像地址,这个地址里面先用一下 AppConfig 里的 apiBaseUrl,后面加上 users,然后是 $userId,再加上一个 avatar ,再用一个 size 查询符设置一下需要的图像尺寸,比如 medium。这个头像地址是我们的服务端应用提供的一个接口地址。

小部件里用一个 Container ,用 width 设置一下宽度,值可以用一下 size,再添加一个 height,值也是 size,也就是这个用户头像小部件里的 size 这个属性的值。这个 Container 的 child 可以用一个 CircleAvatar 小部件,设置一下 backgroundImage,值可以用一个 NetworkImage,给它提供一个图像地址,这里就是上面准备好的 avatarUrl。

post_header.dart

打开 post_header.dart,在这个小部件的 Row 小部件里面用一个 UserAvatar 小部件,把它的 user 设置成 post.user!。 在它下面再添加一个 SizedBox,把 width 设置成 16 。在这个 Row 小部件里面,再用 crossAxisAlignment 设置一下交叉轴的对齐,设置成 CrossAxisAlignment.start。

观察一下应用的界面,现在列表项目里面都会显示这个内容的作者头像。

定义用户头像小部件(UserAvatar)《 Flutter 2:内容项目 》

统计

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

社会化网络

关于

微信订阅号

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