直播平臺製作，Flutter ChoiceChip 用來實現選擇標籤效果

直播平臺製作，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 用來實現選擇標籤效果， 更多內容歡迎關注之後的文章