如何在颤振时从选定的项目中获得取消选定的项？

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

首先，所有用户都选择“购物”、“早午餐”和“音乐”，然后在控制台中打印出来，颜色就像这样变成黄色。控制台..。

​

​

用户界面

​

​

现在用户取消选择“音乐”和“早午餐”项..用户界面

​

​

控制台

​

​

**现在选择的项目只是“购物”，正如我在上面提到的那样，这是完美的展示。这样就需要单独显示未选择的列表。

例：

unselectedList :-早午餐，音乐**

Answer 1

再创建一个这样的列表：

  List<String>? deSelectedHobby = [];

并在使用取消选择任何项时更新它：

                               onTap: () {
                                    if (!selectedHobby!.contains(hobby)) {
                                      if (selectedHobby!.length < 50) {
                                        selectedHobby!.add(hobby);
                                        deSelectedHobby!.removeWhere(
                                          (element) => element == hobby);
                                        setState(() {});
                                        print(selectedHobby);
                                      }
                                    } else {
                                      selectedHobby!.removeWhere(
                                          (element) => element == hobby);
                                      deSelectedHobby!.add(hobby);
                                      setState(() {});
                                      print(selectedHobby);
                                    }
                                  },