直播平台制作,Flutter ChoiceChip 用来实现选择标签效果
核心使用代码如下
class _ChoiceClipHomeState extends State<ChoiceClipHome> {
///当前选中的索引
int? _value = 1;
final List<Map<String, dynamic>> _tagList = [
{"tag": "早起", "index": 0},
{"tag": "早睡", "index": 1},
{"tag": "精神", "index": 2},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("ChoiceClip")),
body: Center(
///核心代码
child: buildChoiceClip(),
),
);
}
Widget buildChoiceClip() {
return Wrap(
children: _tagList
.map((e) => Padding(
padding: EdgeInsets.only(left: 5, right: 5),
child: buildItem(e),
))
.toList(),
);
}
///构建每一个 ChoiceChip
ChoiceChip buildItem(Map<String, dynamic> map) {
String tag = map["tag"];
int index = map["index"];
return ChoiceChip(
label: Text(tag),
selected: _value == index,
onSelected: (bool selected) {
setState(() {
_value = selected ? index : null;
});
},
labelStyle: TextStyle(
color: _value == index ? Colors.white : Colors.black,
),
selectedColor: Colors.red,
surfaceTintColor: Colors.white,
);
}
}
以上就是直播平台制作,Flutter ChoiceChip 用来实现选择标签效果, 更多内容欢迎关注之后的文章
标签:ChoiceChip,map,index,Colors,tag,标签,Flutter From: https://www.cnblogs.com/yunbaomengnan/p/16955068.html