swiftui - ScrollView 文本对齐 SwiftUI

Question

我有一个垂直ScrollView的ForEach循环，HStack里面有Text,Image和 Two Text。我想保持每一行的项目彼此对齐。我试图用VStackwithalignment .leading但什么也没做。我遇到的问题是文本没有对齐。对 SwiftUI 来说仍然很新，因此我们将不胜感激。

ScrollView(.vertical) {
    ForEach(self.daily.forecast, id: \.date) { forecast in
        HStack (spacing : 10){
            Text(forecast.date ?? "")
                .fontWeight(.bold)
            Spacer()
            RequestImage(Url("IMAGE_URL"))
                .aspectRatio(contentMode: .fit)
                .frame(width: 30, height: 30)
                .clipped()
            Spacer()
            Text("\(forecast.maxTemp)")
                .fontWeight(.bold)
            Text("\(forecast.minTemp)")
                .fontWeight(.bold)
        }
    }
}
.padding(.all, 15)
.onAppear() {
    authorize {_ in
        loadForecast()
    }
}

更新：我能够更接近一点，但事情仍然与我希望它们的位置不一致。

ScrollView(.vertical) {
    ForEach(self.daily.forecast, id: \.date) { forecast in
        HStack (spacing : 10){
            Text(date)
                .font(.title3)
                .fontWeight(.bold)
                .frame(minWidth: 45)
            Spacer()
            RequestImage(Url("IMAGE_URL"))
                .aspectRatio(contentMode: .fit)
                .frame(width: 35, height: 35)
                .frame(minWidth: 50)
                .clipped()
            Spacer()
            Text(maxTemp)
                .font(.title3)
                .fontWeight(.bold)
                .frame(minWidth: 45)
            Text(minTemp)
                .font(.title3)
                .fontWeight(.bold)
                .foregroundColor(Color.secondary)
                .frame(minWidth: 45)
        }
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
    }
}
.padding(.all, 15)
.onAppear() {
    authorize {_ in
        loadForecast()
    }
}

标签： swiftui

Answer 1

这是可能解决方案的演示。使用 Xcode 12.4 / iOS 14.4 准备

struct DemoWeatherLayout: View {
    private var dayOfTheWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sut"]
    var body: some View {
        ScrollView {
            VStack {
                ForEach(dayOfTheWeek, id: \.self) {
                    WeatherRowView(day: $0, 
                       icon: ["sun.max", "cloud.sun", "cloud", "cloud.snow"].randomElement()!,
                       low: Array(-5..<0).randomElement()!, 
                       high: Array(1..<15).randomElement()!)
                }
            }.padding()
        }
    }
}

struct WeatherRowView: View {
    var day: String
    var icon: String
    var low: Int
    var high: Int

    var body: some View {
        HStack {
            Text(day)
                .frame(maxWidth: .infinity, alignment: .leading)
            Image(systemName: icon)
                .frame(maxWidth: .infinity, alignment: .leading)
            HStack {
                Text("+XXº").foregroundColor(.clear)
                    .overlay(Text(String(format: "%+d", low)), alignment: .leading)
                Text("+XXº").foregroundColor(.clear)
                    .overlay(Text(String(format: "%+d", high)), alignment: .leading)
            }
        }
    }
}