Android 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);backgroundColor
和selectedColor
:默認(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)簽選中后我們將 InputChip
的avatar
設(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)文章
android studio 3.4配置Android -jni 開發(fā)基礎(chǔ)的教程詳解
這篇文章主要介紹了android studio 3.4配置Android -jni 開發(fā)基礎(chǔ),本文圖文并茂給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09Android開發(fā)中比較耗時(shí)的一些操作小結(jié)
這篇文章主要介紹了Android開發(fā)中比較耗時(shí)的一些操作小結(jié),本文根據(jù)實(shí)際開發(fā)經(jīng)驗(yàn)總結(jié)了6條比較耗時(shí)的編程操作,請大家注意下,需要的朋友可以參考下2015-06-06Android編程實(shí)現(xiàn)Toast只顯示最后一條的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)Toast只顯示最后一條的方法,結(jié)合實(shí)例形式總結(jié)了Toast只顯示最后一條的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-08-08cocos2d-2.0-x-2.0.3 交叉編譯到android報(bào)錯(cuò)解決
我用的是cocos2d-2.0-x-2.0.3 之前弄了一天也沒成功 今天來了下載了最新的ndk8 更新了sdk 又重新是了一遍 居然成功了,不知道是工具的版本問題還是哪一步出錯(cuò)誤了,在這里詳細(xì)的整理一下,感興趣的朋友可以了解下2013-01-01Android實(shí)現(xiàn)清除應(yīng)用緩存功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)清除應(yīng)用緩存功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11android使用DataBinding來設(shè)置空狀態(tài)
本篇文章主要介紹了android使用DataBinding來設(shè)置空狀態(tài),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03Android仿微信右上角點(diǎn)擊加號彈出PopupWindow
這篇文章主要為大家詳細(xì)介紹了Android仿微信右上角點(diǎn)擊加號彈出PopupWindow,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04Android 個(gè)人理財(cái)工具二:使用SQLite實(shí)現(xiàn)啟動(dòng)時(shí)初始化數(shù)據(jù)
本文主要介紹 Android 使用SQLite實(shí)現(xiàn)啟動(dòng)時(shí)初始化數(shù)據(jù),這里對SQLite 的數(shù)據(jù)庫進(jìn)行詳解,附有示例代碼,有興趣的小伙伴可以參考下2016-08-08