Android Flutter实现兴趣标签选择功能
作者:岛上码农 发布时间:2021-07-05 14:29:17
前言
我们在首次使用内容类 App 的时候,不少都会让我们选择个人偏好。这种通常是通过标签来实现,比如列举出一系列的技术栈,然后让我们选择。通过这些标签选择可以预先知道用户的偏好信息,从而可以选择感兴趣的内容进行推送,这样会让用户快速看到想看的内容。我们本篇就来看看 Flutter 如何实现兴趣标签的选择,这可以通过 InputChip
来轻松实现。
InputChip
InputChip
类是一个简单的小组件,它的内容区左侧有一个 avatar
子组件,右侧是一个 label
组件。然后支持删除和标记选中,因此非常适合做兴趣标签的选择。下面是未选中和选中的两个状态,选中的时候会在左侧的 avatar
区域打个勾表示选中。这个组件相比我们自己去写一个类似的组件来说会简化很多。而且,多个InputChip
组件可以作为Wrap
组件的子组件,实现多个 InputChip
时自动等间距排布和超出宽度自动换行,这也恰恰是做兴趣标签所需要的。
我们来看一下 InputChip
构造方法和主要属性。
const InputChip({
Key? key,
this.avatar,
required this.label,
this.labelStyle,
this.labelPadding,
this.selected = false,
this.isEnabled = true,
this.onSelected,
this.deleteIcon,
this.onDeleted,
this.deleteIconColor,
this.deleteButtonTooltipMessage,
this.onPressed,
this.pressElevation,
this.disabledColor,
this.selectedColor,
this.tooltip,
this.side,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.backgroundColor,
this.padding,
this.visualDensity,
this.materialTapTargetSize,
this.elevation,
this.shadowColor,
this.selectedShadowColor,
this.showCheckmark,
this.checkmarkColor,
this.avatarBorder = const CircleBorder(),
@Deprecated(
'Migrate to deleteButtonTooltipMessage. '
'This feature was deprecated after v2.10.0-0.3.pre.'
)
this.useDeleteButtonTooltip = true,
})
属性很多,但是实际用的是下面这几个:
avatar
:左侧的子组件,通常可以用使用圆形(如CircularAvatar
)组件,注意高度是不可改的,随整个InputChip
的高度决定;label
:右侧的标签组件,通常是一个文本组件,支持单行或多行文本,该组件决定了InputChip
的高度;labelPadding
:标签的内边距;selected
:选中状态,如果是选中状态则会在左侧有个打勾的标记;isEnabled
:是否启用,默认是启用状态,如果禁用则选中事件的回调(onSelected
)和点击事件回调(onPressed
)都无法使用,但是删除是可以用的。onSelected
:选中状态改变时的回调函数。deleteIcon
:删除图标,默认是Icons.cancel
图标。onDeleted
:删除事件回调。onPressed
:点击事件回调;backgroundColor
和selectedColor
:默认背景色和选中后背景色。
通过这些属性我们就可以构建基础的兴趣标签,比如下面的代码,这里的 item 是标签的数据实体对象,有三个属性,分别是标签名称 name
,标签默认背景色color
和选中状态 selected
。 当标签选中后我们将 InputChip
的avatar
设置为 null
,从而不显示 avatar
。
InputChip(
labelPadding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
backgroundColor: item.color,
selectedColor: Colors.red[400],
selected: item.selected,
onSelected: (isSelected) {
setState(() {
item.selected = isSelected;
});
},
avatar: item.selected
? null
: CircleAvatar(
backgroundColor: Colors.lightBlue,
child: Text(
item.name.substring(0, 1),
style: const TextStyle(color: Colors.white),
),
),
label: Text(
item.name,
),
)
兴趣标签选择实现
兴趣标签通常会有多个,这时候需要逐个等间距排开,超出宽度后换行。这个可以通过 Wrap
组件和 InputChip
组件实现。代码非常简单,就是将一组 InputChip
组件作为 Wrap
组件的 children
参数,然后设置 Wrap
中子组件的间距即可。
Wrap(
spacing: 10.0,
children: _techList
.map(
(item) => InputChip(
labelPadding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
backgroundColor: item.color,
selectedColor: Colors.red[400],
selected: item.selected,
onSelected: (isSelected) {
setState(() {
item.selected = isSelected;
});
},
avatar: item.selected
? null
: CircleAvatar(
backgroundColor: Colors.lightBlue,
child: Text(
item.name.substring(0, 1),
style: const TextStyle(color: Colors.white),
),
),
label: Text(
item.name,
),
),
)
.toList(),
),
最终我们实现的效果如下图所示。
来源:https://juejin.cn/post/7163059109665701902
猜你喜欢
- 本文实例讲述了Java实现的微信公众号获取微信用户信息。分享给大家供大家参考,具体如下:注: 这里获取用户信息方式和网页授权获取
- 上一篇,我们已经详细讲解了Android微信支付,今天接着为大家带来支付宝支付,支付宝支付相对微信支付要简单一些,吐槽一下,而且支付宝文档确
- 方法1: int d=10; d.ToString("x") //或把x改为X,,,就变成了16位的字符串了. int
- 第1部分 ArrayList介绍ArrayList简介ArrayList 是一个数组队列,相当于 动态数组。与Java中的数组相比,它的容量
- 目录使用格式化编辑手机号格式化编辑身份证号设置监听移除格式化的文本实现原理项目地址格式化编辑的需求一般是从编辑手机号开始的,UI 给出的效果
- 一、介绍Mesh类:通过脚本创建或是获取网格的类,网格包含多个顶点和三角形数组。顶点信息包含坐标和所在面的法线。unity中3D的世界的所有
- 本文实例讲述了C#分布式事务的超时处理的方法。分享给大家供大家参考。具体分析如下:事务是个很精妙的存在,我们在数据层、服务层、业务逻辑层等多
- 本人刚参加工作,面试的时候遇四道笔试题,其中就有这道多线程有序读取文件的题目,初看时拿不准,感觉会,又感觉不会。于是放弃了这道题,今天闲下来
- 作为开发人员,掌握开发环境下的调试技巧十分有必要。我们在编写java程序的过程中,经常会遇到各种莫名其妙的问题,为了检测程序是哪里出现问题,
- 在 C# 以二进制形式读取数据时使用的是 BinaryReader 类。BinaryReader 类中提供的构造方法有 3 种,具体的语法形
- 当初学的是通信专业,毕业以后,同学们各奔东西,去追逐自己的梦想,奔波于大大小小的工地之间。哈哈,开个玩笑,也有厉害的,进了某某研究所,嗯?他
- 今天就是国赛的第一天直接开摆打国赛不如玩羊了个羊玩羊了个羊不如玩MATLAB版写作不易留个赞叭(比赛之余放松一下也行,反正MATLAB版我设
- 大家真正在工作中开发 java 应用都会使用eclipse,myeclipse, IntelliJ等等不过依然值得花10分钟学习如何使用最原
- 我就废话不多说了,大家还是直接看代码吧~/** * 从list中随机抽取元素 * * @param
- 1.获取String osName =System.getProperties().getProperty(&quo
- 1.概述Spring Boot Admin是一个Web应用程序,用于管理和监视Spring Boot应用程序。每个应用程序都被视为客户端,并
- 本文实例讲述了Android编程之菜单实现方法。分享给大家供大家参考,具体如下:菜单是许多应用程序不可或缺的一部分,Android中更是如此
- 一. 加载预加载:1.反射注解框架Reflect信息,在Application内多线程预加载至缓存。2.资源预加载懒加载:1.Fragmen
- 一、定界符成帧Framer接口package framer;import java.io.IOException;import java.i
- 1.SpringCache的概念首先我们知道jpa,jdbc这些东西都是一些规范,比如jdbc,要要连接到数据库,都是需要用到数据库连接,预