日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Android?Flutter實現興趣標簽選擇功能_Android

作者：島上碼農 ? 更新時間： 2022-12-07 編程語言

前言

我們在首次使用內容類 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(),
),

最終我們實現的效果如下圖所示。

總結

本篇介紹了 Flutter 中的 InputChip組件的使用，同時給出了如何用 InputChip實現興趣標簽的選擇。在實際應用中，InputChip 還可以用于多選，在聊天會評論列表展示用戶信息（頭像加昵稱）。可以看到，InputChip 是個非常小巧但很實用的組件。

原文鏈接：https://juejin.cn/post/7163059109665701902

欄目分類
最近更新