欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android Flutter實(shí)現(xiàn)興趣標(biāo)簽選擇功能

 更新時(shí)間:2022年11月07日 08:24:23   作者:島上碼農(nóng)  
我們在首次使用內(nèi)容類 App 的時(shí)候,不少都會(huì)讓我們選擇個(gè)人偏好,通過這些標(biāo)簽選擇可以預(yù)先知道用戶的偏好信息。我們本篇就來看看 Flutter 如何實(shí)現(xiàn)興趣標(biāo)簽的選擇,需要的可以參考一下

前言

我們在首次使用內(nèi)容類 App 的時(shí)候,不少都會(huì)讓我們選擇個(gè)人偏好。這種通常是通過標(biāo)簽來實(shí)現(xiàn),比如列舉出一系列的技術(shù)棧,然后讓我們選擇。通過這些標(biāo)簽選擇可以預(yù)先知道用戶的偏好信息,從而可以選擇感興趣的內(nèi)容進(jìn)行推送,這樣會(huì)讓用戶快速看到想看的內(nèi)容。我們本篇就來看看 Flutter 如何實(shí)現(xiàn)興趣標(biāo)簽的選擇,這可以通過 InputChip 來輕松實(shí)現(xiàn)。

InputChip

InputChip 類是一個(gè)簡單的小組件,它的內(nèi)容區(qū)左側(cè)有一個(gè) avatar 子組件,右側(cè)是一個(gè) label 組件。然后支持刪除和標(biāo)記選中,因此非常適合做興趣標(biāo)簽的選擇。下面是未選中和選中的兩個(gè)狀態(tài),選中的時(shí)候會(huì)在左側(cè)的 avatar 區(qū)域打個(gè)勾表示選中。這個(gè)組件相比我們自己去寫一個(gè)類似的組件來說會(huì)簡化很多。而且,多個(gè)InputChip 組件可以作為Wrap 組件的子組件,實(shí)現(xiàn)多個(gè) InputChip 時(shí)自動(dòng)等間距排布和超出寬度自動(dòng)換行,這也恰恰是做興趣標(biāo)簽所需要的。

我們來看一下 InputChip 構(gòu)造方法和主要屬性。

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,
})

屬性很多,但是實(shí)際用的是下面這幾個(gè):

  • avatar:左側(cè)的子組件,通??梢杂檬褂脠A形(如CircularAvatar)組件,注意高度是不可改的,隨整個(gè) InputChip 的高度決定;
  • label:右側(cè)的標(biāo)簽組件,通常是一個(gè)文本組件,支持單行或多行文本,該組件決定了 InputChip 的高度;
  • labelPadding:標(biāo)簽的內(nèi)邊距;
  • selected:選中狀態(tài),如果是選中狀態(tài)則會(huì)在左側(cè)有個(gè)打勾的標(biāo)記;
  • isEnabled:是否啟用,默認(rèn)是啟用狀態(tài),如果禁用則選中事件的回調(diào)(onSelected)和點(diǎn)擊事件回調(diào)(onPressed)都無法使用,但是刪除是可以用的。
  • onSelected:選中狀態(tài)改變時(shí)的回調(diào)函數(shù)。
  • deleteIcon:刪除圖標(biāo),默認(rèn)是 Icons.cancel 圖標(biāo)。
  • onDeleted:刪除事件回調(diào)。
  • onPressed:點(diǎn)擊事件回調(diào);
  • backgroundColorselectedColor:默認(rèn)背景色和選中后背景色。

通過這些屬性我們就可以構(gòu)建基礎(chǔ)的興趣標(biāo)簽,比如下面的代碼,這里的 item 是標(biāo)簽的數(shù)據(jù)實(shí)體對象,有三個(gè)屬性,分別是標(biāo)簽名稱 name,標(biāo)簽?zāi)J(rèn)背景色color 和選中狀態(tài) selected。 當(dāng)標(biāo)簽選中后我們將 InputChipavatar設(shè)置為 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,
    ),
  )

興趣標(biāo)簽選擇實(shí)現(xiàn)

興趣標(biāo)簽通常會(huì)有多個(gè),這時(shí)候需要逐個(gè)等間距排開,超出寬度后換行。這個(gè)可以通過 Wrap 組件和 InputChip 組件實(shí)現(xiàn)。代碼非常簡單,就是將一組 InputChip 組件作為 Wrap 組件的 children 參數(shù),然后設(shè)置 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(),
),

最終我們實(shí)現(xiàn)的效果如下圖所示。

總結(jié)

本篇介紹了 Flutter 中的 InputChip組件的使用,同時(shí)給出了如何用 InputChip實(shí)現(xiàn)興趣標(biāo)簽的選擇。在實(shí)際應(yīng)用中,InputChip 還可以用于多選,在聊天會(huì)評論列表展示用戶信息(頭像加昵稱)??梢钥吹剑琁nputChip 是個(gè)非常小巧但很實(shí)用的組件。

到此這篇關(guān)于Android Flutter實(shí)現(xiàn)興趣標(biāo)簽選擇功能的文章就介紹到這了,更多相關(guān)Android Flutter標(biāo)簽選擇內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論