已經是很久很久很久沒有更新了，這段時間過得略糟糕，此處省略一萬字。。。
感覺一眨眼，flutter都1.6了，落后了好多了，又重新撿起來熟悉了一遍，才想起來頁面咋創建的，好抱歉~~~~
昨晚偶然看到了一個比較好玩的組件，叫 Chip，應用場景（關于應用場景，這個鏈接說得很詳細），官方翻譯叫標簽或者芯片
一、效果
image
image
image
image
二、構造函數解析：
const Chip({
Key key,
this.avatar,//左側的圖標
@required this.label,//這個是必填的參數，控件上顯示的文本
this.labelStyle,
this.labelPadding,
this.deleteIcon,//右側的刪除圖標
this.onDeleted,//刪除圖標的點擊事件，如果不寫該方法的話，deleteIcon顯示不出來
this.deleteIconColor,
this.deleteButtonTooltipMessage,//點擊刪除圖標后彈出的文本，類似于tooltip的效果
this.shape,
this.clipBehavior = Clip.none,//這個不曉得是啥
this.backgroundColor,
this.padding,
this.materialTapTargetSize,//這個具體也不曉得怎么描述，它的兩個值，一個為padded，一個為shrinkWrap，前者自帶margin，后者好像沒有margin，緊貼附近的控件
this.elevation,//陰影深度
this.shadowColor,//陰影顏色
})
三、例子
import 'package:flutter/material.dart';
import 'package:the_first_one/utils/PageUtil.dart';
import 'InputChipDemo.dart';
import 'FilterChipDemo.dart';
import 'package:fluttertoast/fluttertoast.dart';
class ChipPage extends StatefulWidget {
@override
_ChipPageState createState() => _ChipPageState();
}
class _ChipPageState extends State<ChipPage> {
int _valueChoice = 0;
Widget _buildChoiceItem(int index) {
return ChoiceChip(
label: Text("ChoiceChip $index"),
selectedColor: Colors.orange, //選中的顏色
disabledColor: Colors.orange[100], //沒選中的顏色
onSelected: (bool selected) {
setState(() {
_valueChoice = selected ? index : null;
});
},
selected: _valueChoice == index,
labelStyle: TextStyle(color: Colors.black54),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("ChipDemo"),
),
body: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(height: 10.0),
Text("一、初步認識"),
Divider(),
Chip(
label: Text("普通的chip"),
labelStyle: TextStyle(color: Colors.black54),
backgroundColor: Colors.orange,
),
Chip(
avatar: Icon(
Icons.arrow_forward,
color: Colors.black54,
),
label: Text("帶avatar的chip"),
labelStyle: TextStyle(color: Colors.black54),
backgroundColor: Colors.orange,
),
Chip(
avatar: CircleAvatar(
backgroundImage:
AssetImage('assets/images/illustration_1.jpg'),
radius: 18.0,
),
label: Text("帶avatar的chip"),
labelStyle: TextStyle(color: Colors.black54),
backgroundColor: Colors.orange,
),
Chip(
avatar: CircleAvatar(
backgroundImage:
AssetImage('assets/images/illustration_1.jpg'),
radius: 30.0,
),
padding: EdgeInsets.all(0.0),
label: Text("padding為0,labelPadding不為0的chip"),
labelPadding: EdgeInsets.all(15.0),
labelStyle: TextStyle(
color: Colors.black54,
fontSize: 10.0,
fontWeight: FontWeight.bold,
),
backgroundColor: Colors.orange,
),
Chip(
label: Text("帶deleteIcon的chip"),
deleteIcon: Icon(Icons.close),
deleteIconColor: Colors.black54,
onDeleted: () {
print("點擊了刪除噢");
},
deleteButtonTooltipMessage: "彈出提示",
labelStyle: TextStyle(color: Colors.black54),
backgroundColor: Colors.orange,
),
Chip(
label: Text("圓角矩形的chip"),
deleteIcon: Icon(Icons.close),
deleteIconColor: Colors.black54,
onDeleted: () {
print("點擊了刪除噢");
},
deleteButtonTooltipMessage: "彈出提示",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2.0),
),
labelStyle: TextStyle(color: Colors.black54),
backgroundColor: Colors.orange,
),
Chip(
label: Text("尺寸最小的chip"),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
labelStyle: TextStyle(color: Colors.black54),
backgroundColor: Colors.orange,
),
Chip(
label: Text("帶陰影的chip"),
shadowColor: Colors.grey,
elevation: 10.0,
labelStyle: TextStyle(color: Colors.black54),
backgroundColor: Colors.orange,
),
Divider(),
Text("二、例子"),
ActionChip(
//自帶一個onPress事件，有點擊效果
label: Text("ActionChip"),
backgroundColor: Colors.orange,
onPressed: () {
Fluttertoast.showToast(msg: "ActionChip");
},
),
Wrap(
spacing: 5.0, //主軸間距
runSpacing: 8.0, //副軸間距
children: List<Widget>.generate(2, (int index) {
return _buildChoiceItem(index);
}),
),
RaisedButton(
child: Text(
"FilterChipDemo",
style: TextStyle(color: Colors.black54),
),
color: Colors.orange,
onPressed: () {
PageUtil().pushTo(context, FilterChipDemo());
}),
RaisedButton(
child: Text(
"InputChipDemo",
style: TextStyle(color: Colors.black54),
),
color: Colors.orange,
onPressed: () {
PageUtil().pushTo(context, InputChipDemo());
}),
SizedBox(height: 10.0),
],
),
),
),
);
}
}
四、其他
關于chip也可以看看以下擴展類，以下排列順序按照功能的升序排列
- ActionChip //比普通的chip多一個onPressed事件
- ChoiceChip //允許從一組選項中進行單一選擇
- FilterChip //自帶的比ChoiceChip多一個選中的勾勾的效果
import 'package:flutter/material.dart';
class FilterChipDemo extends StatefulWidget {
@override
_FilterChipDemoState createState() => _FilterChipDemoState();
}
class ActorFilterEntry {
const ActorFilterEntry(this.name, this.initials);
final String name;
final String initials;
}
class _FilterChipDemoState extends State<FilterChipDemo> {
final List<ActorFilterEntry> _cast = <ActorFilterEntry>[
const ActorFilterEntry('Aaron Burr', 'AB'),
const ActorFilterEntry('Alexander Hamilton', 'AH'),
const ActorFilterEntry('Eliza Hamilton', 'EH'),
const ActorFilterEntry('James Madison', 'JM'),
];
List<String> _filters = <String>[];
Iterable<Widget> get actorWidgets sync* {
for (ActorFilterEntry actor in _cast) {
yield Padding(
padding: const EdgeInsets.all(4.0),
child: FilterChip(
avatar: CircleAvatar(child: Text(actor.initials)),
label: Text(actor.name),
selected: _filters.contains(actor.name),
onSelected: (bool value) {
setState(() {
if (value) {
_filters.add(actor.name);
} else {
_filters.removeWhere((String name) {
return name == actor.name;
});
}
});
},
),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FilterChipDemo"),
),
body: Column(
children: <Widget>[
Wrap(
children: actorWidgets.toList(),
),
Text('Look for: ${_filters.join(', ')}'),
],
),
);
}
}
- InputChip //比FilterChip多一個onPressed和onDeleted
import 'package:flutter/material.dart';
class InputChipDemo extends StatefulWidget {
@override
_InputChipDemoState createState() => _InputChipDemoState();
}
class _InputChipDemoState extends State<InputChipDemo> {
List<String> list = [
"搖滾",
"音樂",
"機車黨",
"Android工程師",
"全棧",
"Python",
"UI設計師",
"測試小姐姐",
"后臺單身狗",
"產品老大",
"路邊攤",
"火鍋 串串 麻辣燙",
"籃球",
"攝影",
"戶外",
"客服",
"超級自戀的小哥哥",
"直播",
"不忘初心 繼續前行",
"記性不好",
"花容月貌",
"榴蓮控",
"一定要穿美美的衣服"
];
List<String> _filters = <String>[];
Widget _buildItem(int index) {
String content = list[index];
return InputChip(
avatar: CircleAvatar(
backgroundImage: AssetImage('assets/images/illustration_1.jpg'),
radius: 12.0,
),
label: Text(
content,
style: TextStyle(fontSize: 12.0),
),
shadowColor: Colors.grey,
deleteIcon: Icon(
Icons.close,
color: Colors.black54,
size: 14.0,
),
onDeleted: () {
setState(() {
list.removeAt(index);
});
},
onSelected: (bool selected) {
setState(() {
if (selected) {
_filters.add(list[index]);
} else {
_filters.removeWhere((String name) {
return name == list[index];
});
}
});
},
selectedColor: Colors.orange,
disabledColor: Colors.grey,
selected: _filters.contains(list[index]),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
labelStyle: TextStyle(color: Colors.black54),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("InputChipDemo"),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: Wrap(
spacing: 5.0,
//主軸間距
runSpacing: 8.0,
//副軸間距
alignment: WrapAlignment.end,
//主軸上的對齊方式
crossAxisAlignment: WrapCrossAlignment.center,
//副軸上的對齊方式
children: List<Widget>.generate(
list.length,
(int index) {
return _buildItem(index);
},
).toList(),
),
),
);
}
}
- RawChip //原始chip，通常僅在您想要創建自己的定制芯片類型時使用
五、補充
更多的應用場景，請點擊我
