如何获得非选(非选定)芯片，如所选芯片在颤振？

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(),
                          ),
                        ],
                      ),

选择的项目显示如下。在这里输入图像描述

这样如何显示取消选定的项目？

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"))
              ],
            ),

Answer 2

这将打印取消选定的项目：

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