Flutter 实现用户偏好标签设置

本文正在参加「金石方案 . 分割6万现金大奖」

前言

咱们在初次运用内容类 App 的时候，不少都会让咱们挑选个人偏好。这种一般是经过标签来完成，比方列举出一系列的技能栈，然后让咱们挑选自己。经过这些标签挑选能够预先知道用户的偏好信息，从而能够挑选与标签匹配感的内容推送给用户，让用户快速看到感爱好的内容。咱们本篇就来看看 Flutter 怎么完成爱好标签的挑选，这能够经过 InputChip 来轻松完成。

InputChip

InputChip 类是一个简单的小组件，它的内容区左边有一个 avatar 子组件，右侧是一个 label 组件。然后支持删去和符号选中，因而十分适合做爱好标签的挑选。下面是未选中和选中的两个状况，选中的时候会在左边的 avatar 区域打个勾表示选中。这个组件相比咱们自己去写一个类似的组件来说会简化许多。而且，多个InputChip 组件能够作为Wrap 组件的子组件，完成多个 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(),
),

终究咱们完成的效果如下图所示。

总结

本篇介绍了 Flutter 中的 InputChip组件的运用，同时给出了怎么用 InputChip完成爱好标签的挑选。在实践应用中，InputChip 还能够用于多选，在聊天会谈论列表展现用户信息（头像加昵称）。能够看到，InputChip 是个十分细巧但很有用的组件。

本篇源码已上传至：有用组件相关代码。

我是岛上码农，微信大众号同名。如有问题能够加本人微信交流，微信号：island-coder。

：觉得有收成请点个赞鼓励一下！

：保藏文章，便利回看哦！

：谈论交流，相互进步！

本文正在参加「金石方案 . 分割6万现金大奖」