swift 如何在eachOthers旁边设置“ForEach”列

我尝试将“ForEach”中的一些数据并排放置，但我不知道如何以正确的方式进行...
这就是我们所拥有的

import SwiftUI

struct ContentView: View {
    
    @StateObject private var vm = notaViewModel()
    
    @State var puntajeMaximo: String
    @State var notaMaxima: String
    @State var notaMinima: String
    @State var notaAprobacion: String
    @State var notaExigencia: String
    
    var body: some View {
        
        ScrollView {
            
            // puntajeMaximo = Maximun score you can get
            ForEach(0...vm.puntajeMaximo, id: \.self) { score in
                
                HStack {
                    
                    if vm.puntajeMaximo / 2 >= score {
                        Text("\(score) -> \(vm.getAverage(puntos: Float(score)))")
                            .frame(width: 100, height: 50)
                            .background(Color("textFieldBackground"))
                            .cornerRadius(5)
                            .foregroundColor(.red)
                    }
                    
                    if vm.puntajeMaximo / 2 < score {
                        
                        Text("\(score) -> \(vm.getAverage(puntos: Float(score)))")
                            .frame(width: 100, height: 50)
                            .background(Color("textFieldBackground"))
                            .cornerRadius(5)
                        
                    }
                    
                    
                        
                }
                
                
            }
        }
        .onAppear {
            vm.setParameters(pMax: puntajeMaximo, nMaxima: notaMaxima, nMinima: notaMinima, nAprobacion: notaAprobacion, nExigencia: notaExigencia)
        }
        
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(puntajeMaximo: "30", notaMaxima: "70", notaMinima: "10", notaAprobacion: "40", notaExigencia: "60")
    }
}

如您所见，我有一列数字（分数）从0到30，旁边有一个Float，前15个数字是红色的，我需要它们位于左侧，其他数字（从15到30）位于右侧。我尝试了HStack、Vstack和Grid，但无法得到答案
帮帮忙，我快疯了

1.当您需要比较值时，为何采用String而非Number。
2.我们有两种不同的方法，我在下面分享了其中两种方法，根据我的说法，其中一种是合适的答案，您还可以根据您的要求选择任何一种。
答案1

var body: some View {
        HStack{
            VStack{
                ScrollView(showsIndicators: false) {
                    ForEach(0...puntajeMaximo, id: \.self) { score in
                        HStack {
                            if puntajeMaximo / 2 >= score {
                                Text("\(score) -> \(score).\(score)")
                                    .frame(width: 100, height: 50)
                                    .background(.white)
                                    .cornerRadius(10)
                                    .foregroundColor(.red)
                            }
                        }
                    }
                }
            }.frame(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.height - 100)
                .background(Color.orange)
            VStack{
                ScrollView {
                    ForEach(0...puntajeMaximo, id: \.self) { score in
                        HStack {
                            if puntajeMaximo / 2 < score {

                                Text("\(score) -> \(score).\(score)")
                                    .frame(width: 100, height: 50)
                                    .background(.white)
                                    .cornerRadius(12)

                            }
                        }
                    }
                }
            }.frame(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.height)
                .background(Color.yellow)
        }

}

Answer 1 Output Image在这里你可以检查滚动隐藏和其他一些区别在两个scrollview
答案2（首选）

// Need to create Item in List which requires to conform Identifiable protocol
struct ListItem: Identifiable {
    let id = UUID()
    let score: Int
}

struct ContentViews: View {
    
//    @StateObject private var vm = notaViewModel()
    @State var puntajeMaximo: Int
    
    init(puntajeMaximo: Int) {
        self.puntajeMaximo = puntajeMaximo
        
        getData()
    }
    
    var leftData: [ListItem] = []
    var rightData: [ListItem] = []
    
    var body: some View {
            HStack{
                VStack{
                    List(leftData) { data in
                        Text("\(data.score) -> \(data.score).\(data.score)")
                                        .frame(width: 100, height: 50)
                                        .background(.gray.opacity(0.3))
                                        .cornerRadius(10)
                                        .foregroundColor(.red)
                                        .listRowBackground(Color.clear)
                    }
                }.frame(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.height - 100)
                    .background(Color.orange)
                
                VStack{
                    List(rightData) { data in
                        Text("\(data.score) -> \(data.score).\(data.score)")
                                        .frame(width: 100, height: 50)
                                        .background(.gray.opacity(0.3))
                                        .cornerRadius(10)
                                        .foregroundColor(.black)
                    }
                }.frame(width: UIScreen.main.bounds.width/2, height: UIScreen.main.bounds.height)
                    .background(Color.yellow)
            }
    }
    
// Must be called in init or before rendering the view 
    mutating func getData() {
        for score in 0...puntajeMaximo {
            if (puntajeMaximo / 2 >= score) {
                leftData.append(ListItem(score: score))
            } else if puntajeMaximo / 2 < score {
                rightData.append(ListItem(score: score))
            }
        }
    }
}

struct ContentViews_Previews: PreviewProvider {
    static var previews: some View {
        ContentViews(puntajeMaximo: 30)
    }
}

Answer 2 Output Image

必需

1.将列表分为左视图和右视图的变异方法
1.符合Identifiable协议的结构，以作为行传入ListView。
1.您可以根据需要对设计进行更改。
1.由于此方法仅运行循环1次并分离列表，而不是为两个视图运行循环两次的答案1

swift 如何在eachOthers旁边设置“ForEach”列

1条答案

相关问题

热门标签

最新问答