SwiftUI Foreach中如何使用Toggle组件
创始人
2025-05-30 21:37:55
0

最近有一个需求,在一个界面中显示一个列表,列表中多个cell的右边要显示一个Toggle,也就是UIKit中的UISwitch开关,我们知道Toggle组件需要绑定一个变量的,但是列表数据是从服务器取的,要用多少个Toggle组件不可知,所以如何记住这些Toggle的值呢?

如果用一个变量绑定所有的Toggle,那么这些Toggle就是同开同关了,显然不行。下面来看一下具体实现。

Foreach组件

Foreach组件是SwiftUI中的一个非常强大的组件。它可以用来遍历一个集合,并为集合中的每个元素创建一个视图。以下是一个使用Foreach组件的示例:

struct ContentView: View {let books = ["Book1", "Book2", "Book3"]var body: some View {ForEach(books, id: \.self) { book inText(boks)}}
}

在上面的示例中,我们创建了一个名为books的字符串数组,并使用Foreach组件遍历了该数组。我们还指定了id参数,用于确定集合中每个元素的唯一性。

Toggle组件

Toggle组件是SwiftUI中的另一个非常有用的组件。它可以用来创建一个开关,使用户可以切换某个设置的状态。以下是一个使用Toggle组件的示例:

struct ContentView: View {@State var isOn = falsevar body: some View {Toggle("Toggle", isOn: $isOn)}
}

在上面的示例中,我们创建了一个名为isOn的布尔值状态,并使用Toggle组件来创建了一个开关。我们还使用了$符号来绑定Toggle组件的值到我们的状态变量上。

在Foreach中使用Toggle组件

现在我们已经了解了如何在SwiftUI中使用Foreach和Toggle组件,让我们来看看如何将它们结合起来。以下是一个在Foreach中使用Toggle组件的示例:

struct ContentView: View {@State var books = [BookModel(name: "Book1", isSelected: false),BookModel(name: "Book2", isSelected: false),BookModel(name: "Book3", isSelected: false)]var body: some View {VStack {ForEach(0..

在上面的示例中,我们创建了一个名为books的BookModel数组,并在Foreach中遍历它。我们还为每个Toggle组件提供了一个状态变量,以便用户可以更改每个book的isSelected状态。

注意,这里在遍历的时候我们使用的索引遍历,而非直接遍历books,如果直接遍历boos,那么在闭包里面获取到的book,我们无法直接将book的isSelected绑定到Toggle上,系统会报错的。因此我们通过`$books[index].isSelected`进行绑定。

结论

在SwiftUI中,我们可以使用Foreach和Toggle组件来创建动态的UI界面。在本文中,我们介绍了如何在Foreach中使用Toggle组件,并为每个book提供了一个状态变量。

希望这篇文章能够帮助你更好地理解SwiftUI中的Foreach和Toggle组件。

相关内容

热门资讯

安卓系统和oppo系统哪个流畅... 你有没有想过,手机系统哪个更流畅呢?安卓系统和OPPO系统,这两个名字听起来就让人心动。今天,咱们就...
安卓怎么用微软系统,利用微软系... 你是不是也和我一样,对安卓手机上的微软系统充满了好奇?想象那熟悉的Windows界面在你的安卓手机上...
安卓系统如何安装nfc,安卓系... 你有没有想过,用手机刷公交卡、支付账单,是不是比掏出钱包来得酷炫多了?这就得归功于NFC技术啦!今天...
ios系统可以转安卓,跨平台应... 你有没有想过,你的iPhone手机里的那些宝贝应用,能不能搬到安卓手机上继续使用呢?没错,今天就要来...
iOSapp移植到安卓系统,i... 你有没有想过,那些在iOS上让你爱不释手的app,是不是也能在安卓系统上大放异彩呢?今天,就让我带你...
现在安卓随便换系统,探索个性化... 你知道吗?现在安卓手机换系统简直就像换衣服一样简单!没错,就是那种随时随地、随心所欲的感觉。今天,就...
安卓系统安装按钮灰色,探究原因... 最近发现了一个让人头疼的小问题,那就是安卓手机的安装按钮突然变成了灰色,这可真是让人摸不着头脑。你知...
安卓7.1.1操作系统,系统特... 你知道吗?最近我在手机上发现了一个超级酷的新玩意儿——安卓7.1.1操作系统!这可不是什么小打小闹的...
安卓os系统怎么设置,并使用`... 你有没有发现,你的安卓手机有时候就像一个不听话的小孩子,有时候设置起来真是让人头疼呢?别急,今天就来...
安卓降低系统版本5.1,探索安... 你知道吗?最近安卓系统又来了一次大动作,竟然把系统版本给降到了5.1!这可真是让人有点摸不着头脑,不...
解放安卓系统被保护,解放安卓系... 你有没有想过,你的安卓手机其实可以更加自由地呼吸呢?是的,你没听错,我说的就是解放安卓系统被保护的束...
校务帮安卓系统下载,便捷校园生... 你有没有想过,你的手机里装了一个神奇的助手——校务帮安卓系统下载?没错,就是那个能让你轻松管理学校事...
安卓系统没有拼多多,拼多多崛起... 你知道吗?最近我在手机上发现了一个小小的秘密,那就是安卓系统里竟然没有拼多多这个应用!这可真是让我大...
甜城麻将安卓系统,解锁全新麻将... 你有没有听说过那个超级火的甜城麻将安卓系统?没错,就是那个让无数麻将爱好者为之疯狂的软件!今天,就让...
安卓系统卸载的软件,深度揭秘卸... 手机里的软件越来越多,是不是感觉内存不够用了?别急,今天就来教你怎么在安卓系统里卸载那些不再需要的软...
安卓系统推荐好游戏,畅享指尖乐... 手机里的游戏可是咱们休闲娱乐的好伙伴,尤其是安卓系统的用户,选择面那可是相当广呢!今天,就让我来给你...
王者安卓系统怎么卖,揭秘如何轻... 你有没有听说最近王者安卓系统的火爆程度?没错,就是那个让无数玩家沉迷其中的王者荣耀!今天,我就来给你...
安卓开发系统内置证书,基于安卓... 你有没有想过,你的安卓手机里那些神秘的内置证书,它们到底是个啥玩意儿?别急,今天就来给你揭秘这些隐藏...
荣耀安装安卓原生系统,深度体验... 你知道吗?最近荣耀手机界可是掀起了一股热潮,那就是——荣耀安装安卓原生系统!这可不是什么小打小闹,而...
安卓13小米系统,创新功能与流... 你知道吗?最近安卓13系统可谓是风头无两,各大手机厂商纷纷推出自家的新版系统,其中小米的安卓13系统...