首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在一个`ForEach`中只选择一个按钮?

在一个ForEach中只选择一个按钮可以通过以下方式实现:

  1. 使用@State属性来跟踪选中的按钮。在循环中为每个按钮创建一个@State属性,用于表示按钮是否被选中。
代码语言:txt
复制
struct ContentView: View {
    struct Item: Identifiable {
        let id = UUID()
        let title: String
    }
    
    @State private var selectedButton: Item?
    
    let items = [
        Item(title: "Button 1"),
        Item(title: "Button 2"),
        Item(title: "Button 3")
    ]
    
    var body: some View {
        VStack {
            ForEach(items) { item in
                Button(action: {
                    selectedButton = item
                }) {
                    Text(item.title)
                        .foregroundColor(selectedButton == item ? .red : .blue)
                }
            }
        }
    }
}

在上述代码中,我们使用@State属性selectedButton来表示选中的按钮。当按钮被点击时,我们更新selectedButton的值为当前按钮的Item对象。在循环中,我们根据selectedButton的值来设置按钮的颜色,以区分选中和未选中状态。

  1. 使用Toggle来实现单选按钮的效果。在循环中使用Toggle来表示按钮的选中状态。
代码语言:txt
复制
struct ContentView: View {
    struct Item: Identifiable {
        let id = UUID()
        let title: String
        var isSelected = false
    }
    
    @State private var items = [
        Item(title: "Button 1"),
        Item(title: "Button 2"),
        Item(title: "Button 3")
    ]
    
    var body: some View {
        VStack {
            ForEach(items) { item in
                Toggle(isOn: $items[getIndex(for: item)].isSelected) {
                    Text(item.title)
                        .foregroundColor(item.isSelected ? .red : .blue)
                }
            }
        }
    }
    
    private func getIndex(for item: Item) -> Int {
        guard let index = items.firstIndex(where: { $0.id == item.id }) else {
            fatalError("Item not found")
        }
        return index
    }
}

在上述代码中,我们为每个按钮的Item对象添加了一个isSelected属性来表示按钮是否被选中。在循环中,我们使用Toggle来表示按钮的选中状态,并通过$items[getIndex(for: item)].isSelected将选中状态绑定到Item对象的isSelected属性上。根据isSelected的值,我们设置按钮的颜色以区分选中和未选中状态。

这两种方法都可以实现在一个ForEach中只选择一个按钮的效果,具体选择哪种方法取决于你的需求和UI设计。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

在PHP检测一个类是否可以被foreach遍历

在PHP检测一个类是否可以被foreach遍历 在PHP,我们可以非常简单的判断一个变量是什么类型,也可以非常方便的确定一个数组的长度从而决定这个数组是否可以遍历。那么类呢?...我们要如何知道这个类是否可以通过 foreach 来进行遍历呢?其实,PHP已经为我们提供了一个现成的接口。...'yes' : 'no', PHP_EOL; // yes 从上面的例子可以看出,第一个 \$obj1 无法通过 Traversable 判断,所以它是不能被遍历的。...在PHP手册,Traversable 接口正是用于检测一个类是否可以被 foreach 遍历的接口。...这是一个无法在 PHP 脚本实现的内部引擎接口。IteratorAggregate 或 Iterator 接口可以用来代替它。

2K10
  • 何在kylin构建一个cube

    前面的文章介绍了Apache Kylin的安装及数据仓库里面的星型和雪花模型的概念,这篇文章我们来看下,如何构建一个kylin的cube进行查询。...,kylin使用的是星型模型,通常一个事实表会关联多个维度表,表的数据有了,下面就是通过kylin的ui界面来完成整个流程。...下面通过一张图看下整个构建cube的操作流程: (1) 登录7070端口下面的kylin的web管理页面,默认的用户名是KYLIN密码是ADMIN (2)点击左上角的加号小按钮,新建一个工程 (3)选择这个工程...,然后点击model面板,并点击Data Source面板,选择配置hive数据源,并加载需要用到的表同步到kylin里面 (4)点击Models,开始设计model,这个步骤主要是基础加工,配置一个事实表和多个维表以及他们的关联条件...Kylin的本质是基于空间换时间的策略来实现亚秒级的查询,本身只是一个Server,充分利用了Hadoop+Hive来把结果集数据预构建到Hbase里来优化提高查询效率。

    92670

    何在一个python程序运行另外一个程序

    很多时候,我们想要在p1.py程序中直接运行p2.py程序文件,或者想要在一个python程序调用终端区的命令,比如直接运行一个程序就可以帮我安装很多个库,相当于在终端区运行 : pip install...第一种:模块法 将另外一个python程序封装成一个我们想要运行的模块,在模块里面,将所有代码放到一个函数里面,在另外一个程序中导入运行就可以了。...解释:将p4.py变成一个模块,运行模块就相当于直接运行程序。...上面的方法是直接运行程序,如果还想获得另外一个程序的运行结果,那么还需要加一些代码。..."p2.py"],stdout=PIPE, stdin=PIPE, stderr=STDOUT) # 查看交互的内容数据是怎样的 print(p.communicate()) # 这行代码是将另外一个程序的输出结果获取到

    5.6K10

    🤣 Github | 如何在Github上下载一个文件或文件夹!?

    但我最近在使用github的时候遇到一个问题,就是我只想下载这一个文件,其他的我都不想要。 解决方案大家往下看吧: 2解决方案一(raw) 1️⃣ 首先我们点开这个文件,点击raw。...---- 2️⃣ 然后我们右键选择另存为,就可以下载啦。 3解决方案二(GitZip) 1️⃣ 这里我们需要安装一个谷歌插件,GitZip for github。...---- 4️⃣ 页面的右下角有下载按钮,完美解决! ---- 补充!...---- 这里再补充一个类似的网站,上面的网址登不上的时候可以试一下这个: https://blog.luckly-mjw.cn/tool-show/github-directory-downloader.../index.html 5解决方案四(SVN) 最后介绍一个通过代码获取的方式。

    3.2K30

    何在一个python程序运行另外一个程序(二)

    开篇 首先来看这样的一个场景,有两个游戏,运行的时候是这样的。 游戏-1: ? 游戏-2: ?...为了更有互动性和选择性,这时你突然有一个想法,制作一个新的启动程序,程序开始会问我想问我玩那个游戏,提供 1 和 2两种选择,当我输入1时,就会启动游戏 1,选择2的时候就会启动游戏2。 ? ?...你的第一直觉应该是,python有没有这样的一个方法,可以直接调用python程序文件的,当我选择1时,就直接运行game1.py,选择2时就运行game2.py。...这种想法其实是非常常见的,也符合我们的一个正常的逻辑思维。 第二种:系统命令 ?...解释: 这个方法和上面的其实是类似的,只不过用的是子进程一个方法,注意是大写的P开头的,后面的communicate是用来传递信息的。这个方法相对上面一个方法,会更加灵活。

    3.2K10

    Spring 如何在一个事务开启另一个事务?

    Spring 如何在一个事务开启另一个事务?...Spring的事务注解 @transactional 提供了一个参数: Propagation propagation() default Propagation.REQUIRED; 这个参数是定义...这个参数的值有很多,例如:REQUIRES_NEW,这个值就代表创建一个新的事务,与原来的事务分开。这个好像能解决我们的问题。...; } } 执行之后,发现结果还是没有改变,必须要整体执行完成,数据库数据才会出现,说明还是在一个事务。...; } } 我们将要事务分离出来的方法写在另一个service,再次测试,发现执行完插入语句之后,数据库中就已经能查到数据了,说明事务分离了,完成了我们的需求。

    69430

    何在 centos 终端退出一个程序

    在 Linux 里中止程序 在 Linux ,你可以使用 Ctrl+C 键来中止终端的运行程序。这对 Ubuntu 和其他 Linux 发行版都适用。 以 ping 命令为例。...在一个更复杂的方法,你可以 找到进程 ID 并杀死一个正在运行的进程。这是更高级的东西,只有进程在后台或由其他用户运行或在另一个终端窗口运行时使用。...在几种退出 vim 的方法,最常见的是按 Esc 键,然后输入冒号(:),再输入 q! 表示不保存而强制退出,或者 wq 表示保存并退出。...你可以输入你的选择。 如何退出 less 命令 less 是一个奇妙的命令,它可以让你在不像 cat 命令那样杂乱的终端屏幕上进行查看。...当你在 Ubuntu 或其他发行版打开一个终端,它会运行默认的 shell。当你从这个 shell 退出时,终端也会结束。Ctrl+D 是做同样事情的快捷方式,并退出终端。

    4.5K20

    何在 Linux 运行一个 Shell 脚本

    在 Linux 运行一个 Shell 脚本 记住,将其作为参数传递的需要是一个 shell 脚本。一个 shell 脚本是由命令组成的。如果你使用一个普通的文本文件,它将会抱怨错误的命令。...运行一个文本文件为脚本 在这种方法,你要明确地具体指定你想使用 bash 作为脚本的解释器 。 shell 只是一个程序,并且 bash 只是 Shell 的一种实现。...大多数情况下,你都在同一个目录,因此你可以像这样使用它: ..../script.sh 如果你与你的脚本不在同一个目录,你可以具体指定脚本的绝对路径或相对路径: 在其它的目录运行 Shell 脚本 在脚本前的这个 ./ 是非常重要的(当你与脚本在同一个目录)。.../script.sh 的方式运行一个脚本,它通常会在你正在运行的 shell 运行。 有问题吗?可能会有。

    3.5K20

    何在phpunitmock(模拟)一个单例类

    Mock简介 当我们对A类进行单元测试时,A类可能依赖了B类,为了减少依赖,方便A类方法的测试,我们可以模拟一个B类,简单规定其各方法的返回值(而非真正实现具体逻辑)。...$this->assertEquals('foo', $stub->doSomething()); } } 在这个例子,我们得到了一个'SomeClass'的模拟,规定其可以被调用任意次,如果调用...问题: 我们知道,对于一个单例类,其constructor方法为private,而getMock的实现,默认是要调用原类的constructor方法。...disableOriginalConstructor()->getMock(); 附: 对getMock的6个可选参数的详解,参见:http://www.phpunit.de/manual/3.6/en/test-doubles.html 手册并未提及它们的默认值

    3.1K10

    详解:如何在uni-app中选择一个合适的UI组件库

    因为uni-app是一个跨端框架,所以我们大多使用它就是为了同时一套代码跨多端,选择uni-app 可以算是眼下一个比较好的选择。...那么有没有一个好用,且性能又比较不错的组件库供我们在uni-app中使用呢? 1 组件库选择 首先一个问题就是UI组件库怎么选择?...首先排除PC端的组件库ElementUI、iview这些,可供我们选择移动端的 vue 组件库也有很多。 比如说 Mint UI 、Vant 、Mui、vonic等等。...所以像小程序开发一样,uni-app同样的没有document、window对象。 而且我们看到官方文档中有提及到: uni-app支持vue单文件组件(.vue组件)。...如果兼容微信小程序平台这里推荐两个好用的组件库: Vant Weapp iView Weapp 3 uni-app 组件库 那么想要在 uni-app 开心的使用组件库,还是使用 uni-app

    7.5K52
    领券