1. 基本介紹
Chip皿曲、ActionChip唱逢、ChoiceChip、FilterChip 是一個常見的標簽控件屋休，會內(nèi)斂布局坞古，并且有一些常用的點擊功能。
2. 示例代碼
代碼下載地址劫樟。如果對你有幫助的話記得給個關(guān)注痪枫，代碼會根據(jù)我的 Flutter 專題不斷更新。
3. 屬性介紹
| Chip 屬性 | 介紹 |
|---|---|
| avatar | 左側(cè)圖標組件 |
| label | @required 文本 Widget |
| labelStyle | 文本樣式叠艳，TextStyle |
| labelPadding | 文本外邊距 Padding |
| deleteIcon | 右側(cè)刪除按鈕 Widget |
| onDeleted | 刪除按鈕點擊事件 |
| deleteIconColor | 刪除按鈕顏色 |
| deleteButtonTooltipMessage | 長按刪除按鈕的提示語 |
| shape | 形狀奶陈，ShapeBorder |
| clipBehavior | 裁剪方式，默認為 Clip.none |
| focusNode | 焦點控制附较，Flutter 組件之 FocusNode 詳解 |
| autofocus | 自動聚焦吃粒，默認為 false |
| backgroundColor | 背景色 |
| padding | 內(nèi)邊距 Padding |
| visualDensity | 緊湊程度，VisualDensity |
| materialTapTargetSize | 內(nèi)邊距拒课，默認最小點擊區(qū)域為 48 * 48徐勃，MaterialTapTargetSize.shrinkWrap 為組件實際大小 |
| elevation | 陰影高度，默認為 0 |
| shadowColor | 陰影顏色 |
| CircleAvatar 屬性 | 介紹 |
|---|---|
| child | 子控件 Widget |
| backgroundColor | 背景色 |
| backgroundImage | 背景圖 |
| onBackgroundImageError | 背景圖加載失敗回調(diào) |
| foregroundColor | text 顏色 |
| radius | 半徑 (和 maxRadius 以及 minRadius 不能同時存在) |
| minRadius | 最小半徑 (和 radius 不能同時存在) |
| maxRadius | 最大半徑 (和 radius 不能同時存在) |
4. Chip 詳解
import 'package:flutter/material.dart';
class FMChipVC extends StatefulWidget {
@override
FMChipState createState() => FMChipState();
}
class FMChipState extends State <FMChipVC>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text("Chip"),),
body: _listView(),
);
}
ListView _listView(){
return ListView(
children: [
_chipForSimpleText(),
_chipForSimple(),
_chipForNormal(),
_chip(),
],
);
}
CircleAvatar _circleAvatar(){
return CircleAvatar(
child: Container(
height: 30,
color: Colors.red,
alignment: Alignment.center,
child: Text("Avatar child text"),
), // avatar 子控件
backgroundColor: Colors.red, // avatar 背景色
foregroundColor: Colors.white, // avatar 中 text 顏色
// avatra 背景圖
backgroundImage: NetworkImage("http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg"),
// 背景圖加載失敗回調(diào)
onBackgroundImageError: (error, trace){
print("onBackgroundImageError");
},
// radius: 200, // avatar 半徑 (和 maxRadius 以及 minRadius 不能同時存在)
maxRadius: 100, // avatar 最小半徑 (和 radius 不能同時存在)
minRadius: 80, // avatar 最大半徑 (和 radius 不能同時存在)
);
}
Chip _chipForSimpleText(){
return Chip(
label: Text("Simple Text Chip")
);
}
Chip _chipForSimple(){
return Chip(
label: Text("Simple Chip"),
avatar: CircleAvatar(backgroundColor: Colors.red,),
);
}
Chip _chipForNormal(){
return Chip(
label: Text("Normal Chip"),
avatar: CircleAvatar(backgroundColor: Colors.red,),
deleteIcon: Icon(Icons.ac_unit),
onDeleted: (){},
);
}
Chip _chip(){
return Chip(
avatar: _circleAvatar(), // 左側(cè)圖標組件
label: Text("text"), // 文本 Widget
labelStyle: TextStyle(color: Colors.red, fontSize: 30), // 文本樣式早像，TextStyle
labelPadding: EdgeInsets.fromLTRB(15, 50, 0, 50), // 文本外邊距 Padding
deleteIcon: Icon(Icons.ac_unit), // 右側(cè)刪除按鈕 Widget
deleteButtonTooltipMessage: "deleteButtonTooltipMessage", // 長按刪除按鈕的提示語
deleteIconColor: Colors.red, // 刪除按鈕顏色
// 刪除按鈕點擊事件
onDeleted: (){
print("onDeleted");
},
// Chip 形狀
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
width: 2,
color: Colors.red,
),
),
// padding: EdgeInsets.zero,
);
}
}
Chip.png
5. ActionChip 詳解
相比 Chip僻肖，ActionChip 增加了 onPressed 的點擊事件，同時 ActionChip 移除了 deleteIcon 等相關(guān)屬性卢鹦。
ListView _listView(){
return ListView(
children: [
_chipForSimpleText(),
_chipForSimple(),
_chipForNormal(),
_chip(),
Padding(padding: EdgeInsets.all(10)),
_actionChip(),
],
);
}
ActionChip _actionChip(){
return ActionChip(
avatar: _circleAvatar(),
onPressed: (){
print("ActionChip onPressed");
},
label: Text("ActionChip"), // 文本 Widget
labelStyle: TextStyle(color: Colors.red, fontSize: 30), // 文本樣式臀脏，TextStyle
labelPadding: EdgeInsets.fromLTRB(15, 50, 0, 50), // 文本外邊距 Padding
// Chip 形狀
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
width: 2,
color: Colors.red,
),
),
);
}
Action Chip.png
6. ChoiceChip 詳解
ListView _listView(){
return ListView(
children: [
_chipForSimpleText(),
_chipForSimple(),
_chipForNormal(),
_chip(),
Padding(padding: EdgeInsets.all(10)),
_actionChip(),
Padding(padding: EdgeInsets.all(10)),
_choiceChip(),
],
);
}
bool _choiceChipSelected = false;
ChoiceChip _choiceChip(){
return ChoiceChip(
avatar: _circleAvatar(), // 左側(cè)圖標組件
label: Text("ChoiceChip"), // 文本 Widget
labelStyle: TextStyle(color: Colors.red, fontSize: 30), // 文本樣式，TextStyle
labelPadding: EdgeInsets.fromLTRB(15, 50, 0, 50), // 文本外邊距 Padding
selected: _choiceChipSelected, // 是否選中
selectedColor: Colors.yellow, // 選中背景色
// 選中點擊事件
onSelected: (value){
print("ChoiceChip onSelected");
_choiceChipSelected = value;
setState(() {
});
},
// Chip 形狀
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
width: 2,
color: Colors.red,
),
),
);
}
ChoiceChip.gif
7. FilterChip 詳解
ListView _listView(){
return ListView(
children: [
_chipForSimpleText(),
_chipForSimple(),
_chipForNormal(),
_chip(),
Padding(padding: EdgeInsets.all(10)),
_actionChip(),
Padding(padding: EdgeInsets.all(10)),
_choiceChip(),
Padding(padding: EdgeInsets.all(10)),
_filterChip(),
],
);
}
bool _filterChipSeleted = false;
FilterChip _filterChip(){
return FilterChip(
avatar: _circleAvatar(), // 左側(cè)圖標組件
label: Text("text"), // 文本 Widget
labelStyle: TextStyle(color: Colors.red, fontSize: 30), // 文本樣式法挨，TextStyle
labelPadding: EdgeInsets.fromLTRB(15, 50, 0, 50), // 文本外邊距 Padding
selected: _filterChipSeleted, // 是否選中
selectedColor: Colors.white, // 選中背景色
// 點擊回調(diào)
onSelected: (value){
_filterChipSeleted = value;
setState(() {
});
},
showCheckmark: true, // 是否顯示勾選框
checkmarkColor: Colors.yellow, // 勾選框顏色
// Chip 形狀
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
width: 2,
color: Colors.red,
),
),
);
}
FilterChip.gif
8. 技術(shù)小結(jié)
Chip 其實并不難谁榜，就是屬性較多，多加練習理解各個屬性對應(yīng)樣式即可凡纳。
