Flutter?Widgets之標(biāo)簽類控件Chip詳解
概述:
Flutter 標(biāo)簽類控件大全ChipFlutter內(nèi)置了多個(gè)標(biāo)簽類控件,但本質(zhì)上它們都是同一個(gè)控件,只不過是屬性參數(shù)不同而已,在學(xué)習(xí)的過程中可以將其放在放在一起學(xué)習(xí),方便記憶。
RawChip
Material風(fēng)格標(biāo)簽控件,此控件是其他標(biāo)簽控件的基類,通常情況下,不會直接創(chuàng)建此控件,而是使用如下控件:
- Chip
- InputChip
- ChoiceChip
- FilterChip
- ActionChip
如果你想自定義標(biāo)簽類控件,通常使用此控件。
RawChip可以通過設(shè)置onSelected
被選中,設(shè)置onDeleted
被刪除,也可以通過設(shè)置onPressed
而像一個(gè)按鈕,它有一個(gè)label
屬性,有一個(gè)前置(avatar
)和后置圖標(biāo)(deleteIcon
)。
RawChip(label: Text('RawChip')),
效果:
設(shè)置左側(cè)控件,一般是圖標(biāo):
RawChip( avatar: CircleAvatar(child: Text('R'),), label: Text('RawChip'), isEnabled: false,//禁止點(diǎn)選狀態(tài) ),
設(shè)置label的樣式和內(nèi)邊距:
RawChip( avatar: CircleAvatar(child: Text('R'),), label: Text('RawChip'), // isEnabled: false,//禁止點(diǎn)選狀態(tài) labelPadding: EdgeInsets.symmetric(horizontal: 20), padding: EdgeInsets.only(left: 10,right: 10,top: 5), ),
設(shè)置刪除相關(guān)屬性:
RawChip( label: Text('RawChip'), onDeleted: (){ print('onDeleted'); }, deleteIcon: Icon(Icons.delete), deleteIconColor: Colors.red, deleteButtonTooltipMessage: "刪除", // isEnabled: false,//禁止點(diǎn)選狀態(tài) labelPadding: EdgeInsets.symmetric(horizontal: 10), padding: EdgeInsets.only(left: 10,right: 10,top: 5,bottom: 5), ),
設(shè)置形狀、背景顏色及內(nèi)邊距,陰影:
RawChip( label: Text('RawChip'), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), backgroundColor: Colors.blue, padding: EdgeInsets.symmetric(vertical: 10), elevation: 8, shadowColor: Colors.grey, )
materialTapTargetSize是配置組件點(diǎn)擊區(qū)域大小的屬性,很多組件都有此屬性,比如:
[FloatingActionButton], only the mini tap target size is increased. * [MaterialButton] * [OutlineButton] * [FlatButton] * [RaisedButton] * [TimePicker] * [SnackBar] * [Chip] * [RawChip] * [InputChip] * [ChoiceChip] * [FilterChip] * [ActionChip] * [Radio] * [Switch] * [Checkbox]
MaterialTapTargetSize有2個(gè)值,分別為:
- padded:最小點(diǎn)擊區(qū)域?yàn)?8*48。
- shrinkWrap:子組件的實(shí)際大小。
設(shè)置選中狀態(tài)、顏色:
RawChip( label: Text('RawChip'), selected: _selected, onSelected: (v){ setState(() { _selected =v; }); }, selectedColor: Colors.blue, selectedShadowColor: Colors.red, )
Chip
Chip是一個(gè)簡單的標(biāo)簽控件,僅顯示信息和刪除
相關(guān)屬性,是一個(gè)簡化版的RawChip,用法和RawChip一樣。源代碼如下:
@override Widget build(BuildContext context) { assert(debugCheckHasMaterial(context)); return RawChip( avatar: avatar, label: label, labelStyle: labelStyle, labelPadding: labelPadding, deleteIcon: deleteIcon, onDeleted: onDeleted, deleteIconColor: deleteIconColor, deleteButtonTooltipMessage: deleteButtonTooltipMessage, tapEnabled: false, shape: shape, clipBehavior: clipBehavior, focusNode: focusNode, autofocus: autofocus, backgroundColor: backgroundColor, padding: padding, materialTapTargetSize: materialTapTargetSize, elevation: elevation, shadowColor: shadowColor, isEnabled: true, ); }
InputChip
以緊湊的形式表示一條復(fù)雜的信息,例如實(shí)體(人,地方或事物)或?qū)υ捨谋尽?/p>
InputChip 本質(zhì)上也是RawChip,用法和RawChip一樣。源代碼如下:
override Widget build(BuildContext context) { assert(debugCheckHasMaterial(context)); return RawChip( avatar: avatar, label: label, labelStyle: labelStyle, labelPadding: labelPadding, deleteIcon: deleteIcon, onDeleted: onDeleted, deleteIconColor: deleteIconColor, deleteButtonTooltipMessage: deleteButtonTooltipMessage, onSelected: onSelected, onPressed: onPressed, pressElevation: pressElevation, selected: selected, tapEnabled: true, disabledColor: disabledColor, selectedColor: selectedColor, tooltip: tooltip, shape: shape, clipBehavior: clipBehavior, focusNode: focusNode, autofocus: autofocus, backgroundColor: backgroundColor, padding: padding, materialTapTargetSize: materialTapTargetSize, elevation: elevation, shadowColor: shadowColor, selectedShadowColor: selectedShadowColor, showCheckmark: showCheckmark, checkmarkColor: checkmarkColor, isEnabled: isEnabled && (onSelected != null || onDeleted != null || onPressed != null), avatarBorder: avatarBorder, ); }
基本用法:
InputChip( avatar: CircleAvatar( radius: 12.0, ), label: Text( 'InputChip', style: TextStyle(fontSize: 12.0), ), shadowColor: Colors.grey, deleteIcon: Icon( Icons.close, color: Colors.black54, size: 14.0, ), onDeleted: () { print('onDeleted'); }, onSelected: (bool selected) { setState(() { _selected = selected; }); }, selectedColor: Colors.orange, disabledColor: Colors.grey, selected: _selected, materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, labelStyle: TextStyle(color: Colors.black54), ),
ChoiceChip
允許從一組選項(xiàng)中進(jìn)行單個(gè)選擇,創(chuàng)建一個(gè)類似于單選按鈕的標(biāo)簽,本質(zhì)上ChoiceChip也是一個(gè)RawChip,ChoiceChip本身不具備單選屬性。
int _selectedIndex = 0; Wrap( spacing: 5, children: List.generate(20, (index){ return ChoiceChip( label: Text('測試 $index'), selected: _selectedIndex==index, onSelected: (v){ setState(() { _selectedIndex =index; }); }, ); }).toList(), )
FilterChip
FilterChip可以作為過濾標(biāo)簽,本質(zhì)上也是一個(gè)RawChip,用法如下:
List<String> _filters = []; _buildFilterChip(){ return Column( children: [ Wrap( spacing: 15, children: List.generate(10, (index) { return FilterChip( label: Text('測試 $index'), selected: _filters.contains('$index'), onSelected: (v) { setState(() { if(v){ _filters.add('$index'); }else{ _filters.removeWhere((f){ return f == '$index'; }); } }); }, ); }).toList(), ), Text('選中:${_filters.join(',')}'), ], ); }
運(yùn)行效果:
總結(jié):
本篇主要講了以下幾種chip組件的用法案例:
- RawChip:是Material風(fēng)格標(biāo)簽控件,此控件是其他標(biāo)簽控件的基類,通常情況下,不會直接創(chuàng)建此控件,而是使用其他的標(biāo)簽控件。
- InputChip:以緊湊的形式表示一條復(fù)雜的信息,例如實(shí)體(人,地方或事物)或?qū)υ捨谋尽nputChip 本質(zhì)上也是RawChip,用法和RawChip一樣
- ChoiceChip:允許從一組選項(xiàng)中進(jìn)行單個(gè)選擇,創(chuàng)建一個(gè)類似于單選按鈕的標(biāo)簽,本質(zhì)上ChoiceChip也是一個(gè)RawChip,ChoiceChip本身不具備單選屬性。
- FilterChip:可以作為過濾標(biāo)簽,本質(zhì)上也是一個(gè)RawChip
- ActionChip:顯示與主要內(nèi)容有關(guān)的一組動作,本質(zhì)上也是一個(gè)RawChip
- Chip:一個(gè)簡單的標(biāo)簽控件,僅顯示信息和刪除相關(guān)屬性,是一個(gè)簡化版的RawChip,用法和RawChip一樣
以上就是Flutter Widgets之標(biāo)簽類控件Chip詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter Widgets標(biāo)簽類控件Chip的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
關(guān)于iOS GangSDK的使用 為App快速集成社群公會模塊
這篇文章主要介紹了iOS GangSDK的使用為App快速集成社群公會模塊功能的實(shí)現(xiàn)過程。2017-11-11IOS簡單實(shí)現(xiàn)瀑布流UICollectionView
這篇文章主要為大家介紹了IOS簡單實(shí)現(xiàn)瀑布流UICollectionView的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01iOS?WKWebView秒開方案實(shí)戰(zhàn)記錄
從iOS8開始,就引入了新的瀏覽器控件WKWebView,用于取代UIWebView,下面這篇文章主要給大家介紹了關(guān)于iOS?WKWebView秒開方案的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12iOS多線程應(yīng)用開發(fā)中使用NSOperation類的基本方法
這篇文章主要介紹了iOS多線程應(yīng)用開發(fā)中使用NSOperation類的基本方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11iOS中searchBar(搜索框)光標(biāo)初始位置后移
這篇文章主要介紹了iOS中searchBar(搜索框)光標(biāo)初始位置后移的關(guān)鍵代碼,非常不錯,具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08