如何在Flutter中获得未选定的芯片，就像选定的芯片一样？

Question

我使用Map函数构建了多选芯片。当选择一个芯片时，芯片的颜色会变成黄色。当选择芯片时，会打印出所选芯片。我想选择芯片并显示其中被取消选中的芯片。可以做到吗？如果可以，如何实现？

代码：

List<String> hobbyList = [
    'Shopping',
    'Brunch',
    'Music',
    'Road Trips',
    'Tea',
    'Trivia',
    'Comedy',
    'Clubbing',
    'Drinking',
    'Wine',
  ];

  List<String>? selectedHobby = [];

Column(
                        children: <Widget>[
                          const SizedBox(height: 16),
                          Wrap(
                            children: hobbyList.map(
                              (hobby) {
                                bool isSelected = false;
                                if (selectedHobby!.contains(hobby)) {
                                  isSelected = true;
                                }
                                return GestureDetector(
                                  onTap: () {
                                    if (!selectedHobby!.contains(hobby)) {
                                      if (selectedHobby!.length < 50) {
                                        selectedHobby!.add(hobby);
                                        setState(() {});
                                        print(selectedHobby);
                                      }
                                    } else {
                                      selectedHobby!.removeWhere(
                                          (element) => element == hobby);
                                      setState(() {});
                                      print(selectedHobby);
                                    }
                                  },
                                  child: Container(
                                    margin: const EdgeInsets.symmetric(
                                        horizontal: 5, vertical: 4),
                                    child: Container(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 5, horizontal: 12),
                                      decoration: BoxDecoration(
                                          color: isSelected
                                              ? HexColor('#F5F185')
                                              : HexColor('#D9D9D9'),
                                          borderRadius:
                                              BorderRadius.circular(18),
                                          border: Border.all(
                                              color: isSelected
                                                  ? HexColor('#F5F185')
                                                  : HexColor('#D9D9D9'),
                                              width: 2)),
                                      child: Text(
                                        hobby,
                                        style: TextStyle(
                                            color: isSelected
                                                ? Colors.black
                                                : Colors.black,
                                            fontSize: 14,
                                            fontWeight: FontWeight.w600),
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ).toList(),
                          ),
                        ],
                      ),

选定的项目会显示为这样。 在此输入图片描述

那么如何显示未被选定的项目呢？

- dola

---

如果我的回答对您有帮助，请选择它，这将对其他人也有所帮助。@dola - Jasmin Sojitra

Answer 1

更好的方法是创建一个自定义类来实现这一点。

class chipsSelected{
  String? title;
  bool isSelected;
  chipsSelected({this.title,this.isSelected=false});
}

=> 在列表中添加数据

List<chipsSelected> hobbyList = [
    chipsSelected(title: 'Shopping',isSelected: false),
    chipsSelected(title: 'Brunch',isSelected: false),
    chipsSelected(title: 'Music',isSelected: false),
    chipsSelected(title: 'Road Trips',isSelected: false),
    chipsSelected(title: 'Tea',isSelected: false),
    chipsSelected(title:  'Trivia',isSelected: false),
    chipsSelected(title: 'Comedy',isSelected: false),
    chipsSelected(title:  'Clubbing',isSelected: false),
    chipsSelected(title: 'Drinking',isSelected: false),
    chipsSelected(title: 'Wine',isSelected: false),
                                    ];

  List<chipsSelected> selectedHobby = [];

=> 显示

Column(
              children: <Widget>[
                const SizedBox(height: 16),
                Wrap(
                  children: hobbyList.map(
                        (hobby) {
                          var s=hobbyList.where((element) => element.title==hobby.title).first;
                      return GestureDetector(
                        onTap: () {
                          setState(() {
                            var clickedHobbyList=hobbyList.where((element) => element.title==hobby.title).first;
                            clickedHobbyList.isSelected=!hobby.isSelected;
                          });
                          print("Selected");
                          print(hobbyList.where((w) => w.isSelected == true).map((w) => w.title.toString()).toList());
                          print("UnSelected");
                          print(hobbyList.where((w) => w.isSelected == false).map((w) => w.title.toString()).toList());

                        },
                        child: Container(
                          margin: const EdgeInsets.symmetric(
                              horizontal: 5, vertical: 4),
                          child: Container(
                            padding: const EdgeInsets.symmetric(
                                vertical: 5, horizontal: 12),
                            decoration: BoxDecoration(
                                color: s.isSelected
                                    ? Color(0xFFF5F185)
                                    : Color(0xFFD9D9D9),
                                borderRadius:
                                BorderRadius.circular(18),
                                border: Border.all(
                                    color: s.isSelected
                                        ? Color(0xFFF5F185)
                                        : Color(0xFFD9D9D9),
                                    width: 2)),
                            child: Text(
                              hobby.title!,
                              style: TextStyle(
                                  color: s.isSelected
                                      ? Colors.black
                                      : Colors.black,
                                  fontSize: 14,
                                  fontWeight: FontWeight.w600),
                            ),
                          ),
                        ),
                      );
                    },
                  ).toList(),
                ),

                TextButton(onPressed: (){
                  print(hobbyList.where((element) => false));
                }, child: Text("hhhhh"))
              ],
            ),

- Jasmin Sojitra

Answer 2

这将打印未选择的项目：

 print(hobbyList.toSet().difference((selectedHobby ?? []).toSet()));

- manhtuan21