用户登录

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

先在类里面添加一个列表数据 .. 列表项目的值是 String .. 列表的名字叫 _tags .. 里面添加几个字符串类型的列表数据 .. 苹果 .. 香蕉 .. 还有柠檬 ..

下面我们可以基于这个列表数据去生成一组 Chip .. 可以把它们放在一个 Wrap 里面 .. 添加一个 spacing 设置一下项目之间的间隔 .. 它的 children 属性可以用一下_tags .. map ,迭代处理一下 _tags 里的项目 .. 处理的结果转换成一个 List .. 用一下 toList ..

给 map 提供的一个方法 .. 再给当前处理的项目起个名字,比如 tag .. 方法 return 的是 Chip 小部件 .. 里面用 label 设置一下标签 .. Text .. 文字可以使用 tag 表示 ..

再添加一个 onDeleted .. 设置一下方法 ... 按了删除小图标会执行这个方法 .. 里面用一下 setState .. 再用一下 _tags.remove ,从列表里面删除掉当前的 tag ..

现在屏幕上会显示一组带删除小图标的 Chip ... 按一下删除小图标,可以从屏幕界面去掉这个 Chip ..

下面可以再添加一个重置功能 .. 给 Scaffold 添加一个 floatingActionButton .. 对应的值是 FloatingActionButton .. 它的 child 可以用一个小图标 .. 图标是 Icons.restore ..

再给它一个 onPressed .. 在这个点按的回调方法里面,用一下 setState .. 重新设置一下 _tags 的值 .. 一个列表数据 .. 里面有苹果,香蕉,还有柠檬 ..

按一下屏幕上显示的这个漂浮动作按钮 .. 之前被删除掉的 Chip 又会出现在屏幕上 ..

Chip:用列表生成带删除功能的小碎片《 Flutter 移动应用:MDC 》

统计

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

社会化网络

关于

微信订阅号

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