直播平台制作，Flutter ChoiceChip 用来实现选择标签效果

直播平台制作，Flutter ChoiceChip 用来实现选择标签效果

核心使用代码如下

 

1

class _ChoiceClipHomeState extends State<ChoiceClipHome> {<br>  ///当前选中的索引<br>  int? _value = 1;<br>  final List<Map<String, dynamic>> _tagList = [<br>    {"tag": "早起", "index": 0},<br>    {"tag": "早睡", "index": 1},<br>    {"tag": "精神", "index": 2},<br>  ];<br>  @override<br>  Widget build(BuildContext context) {<br>    return Scaffold(<br>      appBar: AppBar(title: const Text("ChoiceClip")),<br>      body: Center(<br>        ///核心代码<br>        child: buildChoiceClip(),<br>      ),<br>    );<br>  }<br>  <br>  Widget buildChoiceClip() {<br>    return Wrap(<br>      children: _tagList<br>          .map((e) => Padding(<br>                padding: EdgeInsets.only(left: 5, right: 5),<br>                child: buildItem(e),<br>              ))<br>          .toList(),<br>    );<br>  }<br> ///构建每一个 ChoiceChip<br>  ChoiceChip buildItem(Map<String, dynamic> map) {<br>    String tag = map["tag"];<br>    int index = map["index"];<br>    return ChoiceChip(<br>      label: Text(tag),<br>      selected: _value == index,<br>      onSelected: (bool selected) {<br>        setState(() {<br>          _value = selected ? index : null;<br>        });<br>      },<br>      labelStyle: TextStyle(<br>        color: _value == index ? Colors.white : Colors.black,<br>      ),<br>      selectedColor: Colors.red,<br>      surfaceTintColor: Colors.white,<br>    );<br>  }<br>}

​

以上就是直播平台制作，Flutter ChoiceChip 用来实现选择标签效果， 更多内容欢迎关注之后的文章