SwiftUI:如何制定ForEach视图以将数组中的String转换为Text()视图?

9rbhqvlz  于 2023-06-04  发布在  Swift
关注(0)|答案(2)|浏览(104)

我曾试图弄清楚如何使用SwiftUI的ForEach视图,但没有成功。通过下面的资源,如thisthisthis,在我看来,给定一个字符串数组:
var arrayOfStrings: [String] = ["String1", "String2", "String3"]
...以下每个实现都应该可以工作:

ForEach(arrayOfStrings, id: \.self) {
    Text(arrayOfStrings[$0])
}

ForEach(1...arrayOfStrings.count, id: \.self) {
    Text(arrayOfStrings[$0])
}

ForEach(arrayOfStrings, id: \.self) { string in
    Text(string)
}

然而,它们中的每一个都会给我一个编译时错误或在运行时崩溃应用程序。
上面只是示例代码,但如果你需要我尝试做的事情的完整上下文,这里是:

struct Infobox<Content>: View where Content: View {
    let edgeSize: CGFloat = 8
    let color: Color = .neoblå
    let content: Content

    var body: some View {
        VStack(spacing: 0) {
            BoxSide(.top, withColor: color)
                .frame(height: edgeSize)
                .padding(.horizontal, 0)

            content
                .background(color)

            BoxSide(.bottom, withColor: color)
                .frame(height: edgeSize)
                .padding(.horizontal, 0)
        }
    }

    init(@ViewBuilder _ content: @escaping () -> Content) {
        self.content = content()
    }

    init<T: View>(withHeader headerText: String, forContentArray contentArray: [(text: String, value: String)], splitInTwoColumns twoColumns: Bool, @ViewBuilder ignoreTheClosure: @escaping () -> T) where Content == VStack<TupleView<(HStack<TupleView<(Spacer, Text, Spacer)>>, HStack<TupleView<(VStack<ForEach<ClosedRange<Int>, Int, Text>>, VStack<ForEach<ClosedRange<Int>, Int, Text>>, Spacer, VStack<ForEach<ClosedRange<Int>, Int, Text>>, VStack<ForEach<ClosedRange<Int>, Int, Text>>)>>)>> {

        var column1: [String] = []
        var column2: [String] = []
        var column3: [String] = []
        var column4: [String] = []

        let halfArray = contentArray.count/2
        for (index, content) in contentArray.enumerated() {
            if index+1 <= halfArray {
                column1.append(content.text)
                column2.append(content.value)
            } else {
                column3.append(content.text)
                column4.append(content.value)
            }
        }

        self.init() {

            VStack(alignment: .leading) {
                HStack() {
                    Spacer()
                    Text(headerText)
                        .font(.headline)
                    Spacer()
                }
                HStack {
                    VStack {
                        ForEach(column1, id: \.self) {
                            Text(column1[$0])
                        }
                    }
                    VStack {
                        ForEach(column2, id: \.self) {
                            Text(column2[$0])
                        }
                    }
                    Spacer()
                    VStack {
                        ForEach(column3, id: \.self) {
                            Text(column3[$0])
                        }
                    }
                    VStack {
                        ForEach(column4, id: \.self) {
                            Text(column4[$0])
                        }
                    }
                }
            }
        }
    }
}

**摘要:**给定一个(String,String)数组,创建一个Infobox(),由Text()元素组成,分为四列(两列用于“键”,两列用于对应的值)。

如果有人有任何关于如何修复这些ForEach视图的想法,我会给予你一个cookie:)

to94eoyn

to94eoyn1#

这个方法失败了,因为$0是一个String,您不能用字符串索引字符串数组

ForEach(arrayOfStrings, id: \.self) {
    Text(arrayOfStrings[$0])
}

这一个失败,因为数组索引是从0开始的->选择一个0基范围:0..<arrayOfStrings.count以避免“索引越界异常”

ForEach(1...arrayOfStrings.count, id: \.self) {
    Text(arrayOfStrings[$0])
}

这一条通常是正确的,但你可能需要引用你的成员scope-qualified self.arrayOfStrings,当你的scope是一个闭包时,这适用于所有SwiftUI代码:

ForEach(arrayOfStrings, id: \.self) { string in
    Text(string)
}

这是一种通过索引进行数组访问的更快捷的方法:

ForEach(arrayOfStrings.indices) {
  Text(self.arrayOfStrings[$0])
}
yhuiod9q

yhuiod9q2#

struct ContentView: View {
let numbers = [1, 2, 3, 4, 5]

var body: some View {
    VStack {
        ForEach(Array(numbers.enumerated()), id: \.element) { index, number in
             Text("Number \(number) is at index \(index)")
        }
        
    }
}

}

相关问题