ScrollView 文本对齐 SwiftUI

Posted 2023-02-24

【中文标题】ScrollView 文本对齐 SwiftUI

【英文标题】：ScrollView text alignment SwiftUI

【发布时间】：2021-01-31 04:28:42

【问题描述】：

我有一个垂直的ScrollView 和一个ForEach 循环，里面有HStack 和Text、Image 和两个Text。我想保持每一行的项目彼此对齐。我试图用alignment .leading 包裹VStack，但什么也没做。我遇到的问题是文本没有对齐。对 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()
    

【问题讨论】：

这是因为您的每个 Text() 的长度不同。我建议在每个文本的框架上设置宽度或 minWidth。

不清楚您希望它们如何对齐？你会添加一些演示/草图/模型吗？

@Asperi 我添加了我正在寻找的代码的演示。我离得很近，但看起来仍然很不对劲，而且对齐方式不对。

@nicksarno 确实有帮助，但没有解决我的问题

@Cole 为 HStack 中的每个项目添加一个带有颜色的 .background()，您将能够看到框架的不同大小。

【参考方案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)
            
        
    

【参考方案2】：

三个建议：

将alignment参数添加到HStack：

HStack(alignment: .lastTextBaseline, spacing: 10) ... //others options: .top, .center, .firstTextBaseline...

将minLength参数添加到Spacer：

Spacer(minLength: 0) 但在HStack 中有间距：10 有点多余。您可以将spacing: 10 删除为Spacer(minLength: 10)

在Text("\(forecast.minTemp)").fontWeight(.bold)之后的末尾添加Spacer(minLength: 0)

【参考方案3】：

我将接受 @Asperi 回答为正确。用户界面确实发生了变化，以更好地适应上述标签等。感谢其他人。代码非常难看，但可以工作。不确定它是否 100% 正确。

HStack (spacing: 10)
    Text(date)
        .font(.title3)
        .fontWeight(.bold)
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
    Spacer()
    RequestImage(Url("IMAGE_URL_HERE"))
        .aspectRatio(contentMode: .fit)
        .frame(width: 35, height: 35)
        .frame(minWidth: 55)
        .clipped()
    Spacer()
    Text(maxTemp)
        .font(.title3)
        .fontWeight(.bold)
        .frame(minWidth: 50)
        .background(Color.orange)
        .cornerRadius(5)
    Text(minTemp)
        .font(.title3)
        .fontWeight(.bold)
        .frame(minWidth: 50)
        .background(Color.blue)
        .cornerRadius(5)