时间戳

首页 > 解决方案 > SwiftUI在多个HStacks中对齐不同长度的文本

swiftui - SwiftUI在多个HStacks中对齐不同长度的文本

问题描述

我正在尝试在两个不同的 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])))
    }
  }
}

我目前拥有的

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

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)
}

水平对齐尝试

标签： swiftui

解决方案

这是一种方法：

重复第一个文本，给它.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])))
        }
    }
}

推荐阅读