如何像flutter中选中的chips一样获取未选中(unselected)的chips?

2023-11-30

我使用Map功能构建了多选芯片。当选择一个芯片时,颜色会变成黄色。当选定芯片后,然后打印选定的芯片。就像这样,我想选择芯片并显示其中取消选择的芯片。能做到吗?如果可以如何实施?

code:

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

选定的项目显示如下。在此输入图像描述

像这样如何显示取消选择的项目?


实现此目的的更好方法是创建自定义类

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"))
              ],
            ),
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何像flutter中选中的chips一样获取未选中(unselected)的chips? 的相关文章

随机推荐

  • WPF 有哪些绑定模式?

    我不明白WPF中的各种数据绑定模式 例如 One Way Two Way One Time etc 这些模式分别代表什么意思 什么时候应该使用它们 OneWay 当您希望绑定属性更新用户界面时使用此选项 TwoWay 这与以下行为相同One
  • WPF:检测 C# 代码中的行验证错误

    我想完成一个非常简单的任务 但是到目前为止 这里的解决方案或其他找到的解决方案都没有帮助我 我有一个WPFDataGrid 它绑定到类型化数据集 当我单击窗口中的 确定 按钮时 我想检测当前是否存在任何行验证错误 我想显示一个消息框并告诉用
  • self.tabBarController解雇ViewControllerAnimated不起作用

    我的应用程序中有一个 UITabBarController 我想从一个选项卡呈现另一个 UIViewController 所以我写在ViewControllerA 这是 tabviewcontroller 中的一个选项卡 UIStorybo
  • 如何使手风琴标题上仅可单击特定文本 - jquery?

    我向手风琴标题添加了删除和编辑链接 但这些链接不起作用 因为每次我单击它们时手风琴都会打开 以及关于我该如何做的建议 请注意 我正在做嵌套手风琴 这是我在js上定义的 acc2 accordion alwaysOpen false acti
  • AngularJs如何调用prettyprint?

    我正在尝试为我的 angularjs 应用程序使用 Prettyprint 插件 但无法使其发挥作用 我创建一个简单的指令并调用方法 PrettyPrint 但代码未格式化 FIDDLE http jsfiddle net Tropical
  • 使用相对 URL 时如何使用 HTTP 传输状态

    我正在尝试实现内置TransferHttpCache模块为了消除重复的请求 我在我的应用程序中使用这个拦截器 intercept req HttpRequest
  • R - 基于重复行条件的子集列

    我有一个数据框 其中包含重复的 id 列和站点计数 我想知道如何仅在 Site Count 记录大于 0 时删除重复的 ID 记录 生成DF DF lt data frame ID sample 100 300 100 replace T
  • 迭代 ruby​​ 中的哈希数组

    所以如果我有一个像这样的哈希数组 ruby初学者 input last name gt Gay first name gt Rudy display name gt Rudy Gay position gt SF minutes gt 39
  • Json数组详细信息在带有ionic的AngularJS中显示在三页中

    我有类别数组 还有更多产品 我需要在类别页面中显示类别 当单击某个类别时 我必须重定向产品页面并显示必要的产品 单击产品时 我必须重定向产品详细信息页面并显示必要的产品详细信息 类别加载到类别页面 点击时会重定向到产品页面 但是 我看不到产
  • Firestore 文档 get() 性能

    刚刚开始探索 Firestore 存储 要做的第一件事 通过文档密钥读取我的 Android 应用程序中的一个简单的小文档 经过 Google 验证 但这可能并不重要 这是一个片段 public void readDoc final Str
  • bash 出现意外标记然后出现错误

    我编写了一个 bash 脚本 当我测试变量是否为空的条件时收到错误 下面是一个示例脚本 我没有提到为变量 a 和 fne 赋值而执行的命令 但是 bin bash for f in path do a some command output
  • C++异常处理运行时是如何实现的?

    我对 C 异常处理机制的工作原理很感兴趣 具体来说 异常对象存储在哪里以及它如何在多个范围中传播直到被捕获 它存储在某个全球区域吗 由于这可能是特定于编译器的 有人可以在 g 编译器套件的上下文中解释一下吗 实现可能有所不同 但有一些根据需
  • python 中 selenium 的 useAutomationExtension 等价物是什么?

    I am trying to run a basic selenium script from my office environment which has a proxy and firewall setup The script is
  • 带有 MongoDB 的 WSO2 DAS

    是否可以将 MongoDB 设置为 WSO2 DAS 中的分析数据源 我在analytics datasources xml脚本中看到DAS支持cassandra HBase 我们已经做了一个 PR 在 DAS 中支持 MongoDB 它已
  • 将 C 函数返回的 C 指针释放给 Fortran?

    我有一个在 C 中返回 char 指针的函数 如下所示 char string val ARGS char svalue cJSON GetObjectItem nml var name gt valuestring return sval
  • 通过 180 度翻转滚动列表反转滚动方向

    我正在构建一个离子 角度应用程序 并且我想在滚动输入上反转滚动方向 在这里你可以找到我的情况的一个例子 jsfiddle 示例 在上面的示例中 我将滚动列表翻转了 180 度 并将滚动列表内的 div 翻转了 180 度 我这样做是为了使消
  • Netbeans 和 Rails 错误:bin/ruby:没有这样的文件或目录 -- script/rails (LoadError)

    当我创建项目后尝试在 netbeans 7 4 上启动 Rails 控制台时 我得到 home mati rvm rubies ruby 2 1 0 bin ruby No such file or directory script rai
  • 如何在视图中显示变量值?

    这里我试图显示变量y值在td在视图中 即 cshtml 但不知道该怎么做 以下是我的看法 td Html DisplayFor modelItem gt item District td td var y v GetContestantAv
  • RCurl getURL SSL 错误

    相关问题 获取 ssl 端点时出现 RCurl 错误 R 在 Rcurl getURL 语句中指定 SSL 版本 我正在看以下内容 url https www veilingbiljet nl resultaten ajax asp ord
  • 如何像flutter中选中的chips一样获取未选中(unselected)的chips?

    我使用Map功能构建了多选芯片 当选择一个芯片时 颜色会变成黄色 当选定芯片后 然后打印选定的芯片 就像这样 我想选择芯片并显示其中取消选择的芯片 能做到吗 如果可以如何实施 code List