已经是很久很久很久没有更新了，这段时间过得略糟糕，此处省略一万字。。。
感觉一眨眼，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，通常仅在您想要创建自己的定制芯片类型时使用
五、补充
更多的应用场景，请点击我
网友评论