Swiftui ScrollView文本对齐快捷界面

我有一个垂直的

滚动视图

，带有一个

ForEach

循环，循环中有

HStack

，里面有

文本

，

图像

，还有两个

文本

。我想让每一行的项目彼此对齐。我试图用

对齐方式将
VStack
包装起来。引导

但什么也没做。我遇到的问题是文本没有对齐。对于SwiftUI来说还是很新的，所以任何帮助都将不胜感激

ScrollView（.vertical）{
ForEach（self.daily.forecast，id:\.date）{forecast in
HStack（间距：10）{
文本（forecast.date？？？）
.fontWeight（.粗体）
垫片（）
请求图像（Url（“图像Url”））
.aspectRatio（内容模式：.fit）
.框架（宽度：30，高度：30）
.clipped（）
垫片（）
文本（“\（forecast.maxTemp）”）
.fontWeight（.粗体）
文本（“\（forecast.minTemp）”）
.fontWeight（.粗体）
}
}
}
.padding（.all，15）
.onAppear（）{
授权{uu}in
负荷预测（）
}
}

更新： 我能够稍微靠近一点，但事情仍然不符合我想要的方向

ScrollView（.vertical）{
ForEach（self.daily.forecast，id:\.date）{forecast in
HStack（间距：10）{
文本（日期）
.font（.title3）
.fontWeight（.粗体）
.框架（最小宽度：45）
垫片（）
请求图像（Url（“图像Url”））
.aspectRatio（内容模式：.fit）
.框架（宽度：35，高度：35）
.框架（最小宽度：50）
.clipped（）
垫片（）
文本（maxTemp）
.font（.title3）
.fontWeight（.粗体）
.框架（最小宽度：45）
文本（minTemp）
.font（.title3）
.fontWeight（.粗体）
.foregroundColor（颜色二级）
.框架（最小宽度：45）
}
.frame（最小宽度：0，最大宽度：。无穷大，对齐：。前导）
}
}
.padding（.all，15）
.onAppear（）{
授权{uu}in
负荷预测（）
}
}

三条建议：

• 将

  alignment

  参数添加到

  HStack

  ：

  HStack（对齐：.lastTextBaseline，间距：10）{…//其他选项：.top、.center、.firstTextBaseline…

• 将

  minLength

  参数添加到

  Spacer

  ：

  Spacer（minLength:0）

  但间距为10 in

  HStack

  有点多余。您可以删除

  Spacer（minLength:10）的
  间距为10
  
  

• 在

  文本（\（forecast.minTemp）”）后面的末尾添加一个
  间隔符（minLength:0）
  。fontwweight（.bold）

---

这是一个可能的解决方案演示。使用Xcode 12.4/iOS 14.4编写

struct DemoWeatherLayout:视图{
星期一的私人变量=[“星期日”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期三”]
var body：一些观点{
滚动视图{
VStack{
ForEach（星期五，id:\.self）{
WeatherRowView（天：$0，
图标：[“sun.max”、“cloud.sun”、“cloud”、“cloud.snow”].randomElement（）！，
low:Array（-5..我将接受@Asperi回答为正确。此后，用户界面确实发生了变化，以更好地适应上述标签等。感谢所有人。代码非常难看，但有效。不确定是否100%正确

HStack（间距：10）{
文本（日期）
.font（.title3）
.fontWeight（.粗体）
.frame（最小宽度：0，最大宽度：。无穷大，对齐：。前导）
垫片（）
RequestImage（Url（“IMAGE\u Url\u HERE”））
.aspectRatio（内容模式：.fit）
.框架（宽度：35，高度：35）
.框架（最小宽度：55）
.clipped（）
垫片（）
文本（maxTemp）
.font（.title3）
.fontWeight（.粗体）
.框架（最小宽度：50）
.背景（颜色.橙色）
.转弯半径（5）
文本（minTemp）
.font（.title3）
.fontWeight（.粗体）
.框架（最小宽度：50）
.背景（颜色.蓝色）
.转弯半径（5）
}

这是因为你的每一篇文章（）是不同的长度。我建议在每个文本框架上设置宽度或最小宽度。不清楚如何对齐它们？是否添加一些演示/草图/模型？@Asperi我添加了一个演示，演示了我在代码中要查找的内容。我很接近，但仍然看起来非常不对位。@nicksarno它确实有帮助，但没有解决问题我的problem@Cole将带有颜色的.background（）添加到HStack中的每个项目中，您将能够看到不同大小的帧的位置。
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)
            }
        }
    }
}