用户登录

Chip .. 就是一种像小标签,小碎片的东西。比如给内容选择的内容标签,过滤的条件这些东西,都可以使用 Chip 小部件来展示它们。

我们先在这个 Chip 的演示里面,添加一个简单的 Chip .. 用一个 Chip 小部件 .. 只需要设置一下它的 label 属性,给它一个标签文字就行了 .. 文字是 Life ..

界面上显示的就是一个简单的 Chip .. 它的背景颜色默认是灰色,可以给 Chip 添加一个 backgroundColor 去设置一下 Chip 的背景颜色,复制一份这个 Chip ... 修改一下 Chip 的标签文字 .. 里面再添加一个 backgroundColor .. 使用一种橙色 ..

在这两个 Chip 之间可以添加点间隔,中间用一个 SizedBox .. 设置一下它的 width ,大小是 8.0 ..

在 Chip 上面还可以添加一个 avatar ... 再复制一份 .. 修改一下标签文字 .. 再给它添加一个 avatar .. 它的值可以用一个 CircleAvatar .. 设置一下它的 backgroundColor .. 用一种灰色 .. 然后可以给它添加一个 child .. 用一个 Text 小部件 .. 里面添加一个文字 ..

这个 avatar 会在标签文字的左边显示 ..

这个头像里面可以添加一个背景图像 .. 再复制一份这个 Chip .. 添加一个 backgroundImage .. 用一个来自网络的图像 .. NetworkImage .. 设置一下图像的地址 ... https://resources.ninghao.net/images/wanghao.jpg

这次头像的上面会显示一个背景图像 .. 去掉 CircleAvatar 的 child 可以去掉 ..

Chip:小碎片《 Flutter 移动应用:MDC 》

统计

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

社会化网络

关于

微信订阅号

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