主页 / coding / 问题 / 79555645
Accepted
Marcel Derks
Asked: 2025-04-04 22:53:45 +0800 CST

如何在 SwiftUI 中右对齐固有大小的 VStack 中的内容

  • 772

这可能是一个简单的问题，但我一直在努力。

假设我在 SwiftUI 中有以下视图布局

我希望日期字符串10.5.2020在父 VStack 中右对齐。

但重要的是，这样做不会破坏 VStack 的固有大小。

我之所以这么说，是因为最明显的两个解决方案都是这样做的。

  1. 用 围起来，并在左边HStack放一个。Spacer
  2. 使用框架maxWidth: .infinity和alignment: .trailing

我对对齐指南进行了更深入的研究，但无法解决这个问题。

到目前为止我的最佳结果是GeometryReader，将文本标签的宽度设置为几乎与周围 VStack 的宽度相同。

但不幸的是，我的目标结构要复杂得多，这种方法会导致该结构出现问题。而且GeometryReader似乎不适合进行对齐。

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("Alignment Test")
                        Text("This is a longer text left aligned")
                         
                        
                        Text("10.5.2020")
                    }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
                
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("left")
                        Text("Date should rigzht align to here <-")
                        Text("10.5.2020")
                    }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(.red)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.5))
    }
}

预览：

在此处输入图片描述

swiftui

2 个回答

  1. Best Answer

    .frame可以使用和.fixedSize修饰符的组合来实现对齐。

    1. 应用于.frame(maxWidth: .infinity, alignment: .trailing)您想要右对齐的文本。这会导致文本扩展到可用的最大宽度，内容向右对齐。

    通常情况下，这也会导致容器扩展到整个可用宽度。因此，为了防止这种情况发生：

    1. 应用于.fixedWidth()。VStack这告诉它采用其内容的理想宽度。

    因此，它的工作方式是，VStack将大小调整为其内容的理想宽度，然后，在这个限制范围内，maxWidth: .infinity文本上的就会生效。

    ScrollView {
    VStack(alignment: .leading) {

        HStack {
            VStack(alignment: .leading) {
                Text("Alignment Test")
                Text("This is a longer text left aligned")
                Text("10.5.2020")
                    .frame(maxWidth: .infinity, alignment: .trailing) // 👈 added
            }
            .padding(16)
            .fixedSize() // 👈 added
            .background(Color.blue)

            Spacer(minLength: 50)
        }

        HStack {
            VStack(alignment: .leading) {
                Text("left")
                Text("Date should right align to here ->")
                Text("10.5.2020")
                    .frame(maxWidth: .infinity, alignment: .trailing) // 👈 added
            }
            .padding(16)
            .fixedSize() // 👈 added
            .background(Color.blue)

            Spacer(minLength: 50)
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .border(.red)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.gray.opacity(0.5))

    截屏

    编辑在评论中，您说较长的文本可能太长，需要换行。但应用.fixedSize()将阻止换行。

    作为替代方法，您可以考虑使用 1 列Grid：

    • 将内部替换VStack为Grid。
    • 添加.gridCellAnchor(.trailing)日期。
    ScrollView {
    VStack(alignment: .leading) {

        HStack {
            Grid(alignment: .leading) { // 👈 VStack replaced
                Text("Alignment Test")
                Text("This is a longer text left aligned")
                Text("10.5.2020")
                    .gridCellAnchor(.trailing) // 👈 added
            }
            .padding(16)
            .background(Color.blue)

            Spacer(minLength: 50)
        }

        HStack {
            Grid(alignment: .leading) {
                Text("left")
                Text("The quick brown fox jumps over the lazy dog")
                Text("10.5.2020")
                    .gridCellAnchor(.trailing)
            }
            .padding(16)
            .background(Color.blue)

            Spacer(minLength: 50)
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .border(.red)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.gray.opacity(0.5))

    截屏

    • 1

  2. 我找到了一种替代解决方案，它不像使用 那样优雅Grid，但它仍然可以工作，我想在这里记录它。例如，Grid 在 iOS 16 之前不可用，您可能需要在生产中支持这些设备。

     ScrollView {
            VStack(alignment: .leading) {
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("Title")
                        Text("Not AI")
                        Text("10.5.2020").foregroundStyle(.clear)
                    }
                    .padding(16)
                    .background(Color.blue)
                    .overlay(alignment: .bottomTrailing) {
                        Text("10.5.2020")
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
                    }
                    
                    Spacer(minLength: 50)
                }
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("left")
                        Text("The quick brown fox jumps over the lazy dog>")
                        Text("10.5.2020").foregroundStyle(.clear)
                    }
                    .padding(16)
                    .background(Color.blue)
                    .overlay(alignment: .bottomTrailing) {
                        Text("10.5.2020")
                            .padding(EdgeInsets(top: 0, leading: 0, bottom: 16, trailing: 16))
                    }
                    
                    Spacer(minLength: 50)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(.red)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.5))

    在这种方法中，我使用bottomTrailing对齐的覆盖来添加日期文本。

    请注意，我保留了原始日期文本VStack以占据那里的空间。foregroundStyle = .clear 我隐藏了该间隔文本，因此它不会显示在 UI 中。

    这种方法的缺点是，它只有当您想在右下角添加标签时才有效。

    在此处输入图片描述

    • 0

相关问题