SwiftUI在多个HStacks中对齐不同长度的文本答案

【问题标题】：SwiftUI aligning text with different length in multiple HStacksSwiftUI在多个HStacks中对齐不同长度的文本
【发布时间】：2020-11-21 23:44:29
【问题描述】：

我正在尝试在两个不同的 HStack 中对齐文本，但很难让第二个（较短的长度）与第一个 HStack 对齐。我尝试过使用 .frame(minWidth:0, maxWidth: .infinity) 和 Spacer()，但找不到解决方案。这可能吗？

struct ContentView: View {
var body: some View {
    VStack(alignment: .leading) {
        HStack {
            Spacer()
            Text("Lorem ipsum dolor")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
            Spacer()
        }.padding()
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
       
        
        HStack {
            Spacer()
            Text("Lorem ipsum")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
            Spacer()
        }.padding()
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
    }
  }
}

我尝试使用 HorizontalAlignment 指南，但它们偏离了中心：

struct ContentView: View {
var body: some View {
    VStack(alignment: .controlLeadingEdge) {
        HStack {
            Text("Lorem ipsum dolor")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                .alignmentGuide(.controlLeadingEdge, computeValue: { d in d[HorizontalAlignment.leading] })
        }.padding()
        .frame(minWidth: 0, maxWidth: 300)
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
        
        HStack {
            Text("Lorem ipsum")
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                .alignmentGuide(.controlLeadingEdge, computeValue: { d in d[HorizontalAlignment.leading] })
        }.padding()
        .frame(minWidth: 0, maxWidth: 300)
        .overlay(
            Rectangle()
                .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
        
    }
 }
}

extension HorizontalAlignment {
private enum ControlAlignment: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
        return context[HorizontalAlignment.controlLeadingEdge]
    }
}
static let controlLeadingEdge = HorizontalAlignment(ControlAlignment.self)
}

【问题讨论】：

您希望它如何对齐？你想让最长的一个居中，另一个与最长的前缘对齐吗？第二个总是更短吗？
@vacawama 我想让最短的与最长的前缘对齐。是的，这是正确的，第二个也会更短。谢谢

标签： swiftui

【解决方案1】：

这是一种方法：

重复第一个文本，给它.opacity(0) 并把它放在ZStack 和.leading 对齐

struct ContentView: View {
    var body: some View {
        let firstText = Text("Loren ipsum dolor")
        let secondText = Text("Loren ipsum")
        
        VStack(alignment: .leading) {
            HStack {
                Spacer()
                firstText
                    .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                Spacer()
            }.padding()
            .overlay(
                Rectangle()
                    .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
            
            HStack {
                Spacer()
                ZStack(alignment: .leading) {
                    firstText.opacity(0)
                    secondText
                }
                .font(.system(size: 22, weight: .ultraLight, design: .rounded))
                Spacer()
            }.padding()
            .overlay(
                Rectangle()
                    .stroke(Color(#colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)), style: StrokeStyle(lineWidth: 0.5, dash: [5.0])))
        }
    }
}

【讨论】：

非常感谢！我有一个后续问题，如果你不介意回答？在寻找修复它的方法时，我查看了使用对齐指南，但 HStacks 变得偏离中心。这归结于 SwiftUI 还是我必须更多地使用它们？
如果您不介意看一下，我已经更新了答案以显示 HorizontalAlignment 示例？
对齐参考线确实会移动视图，这就是轮廓不再对齐的原因。我没有看到一种在不移动轮廓的情况下获得对齐文本的明显方法。
哦，好的，谢谢您的解释和原始答案。