主页 / coding / 问题 / 79593396
Accepted
Kpmurphy91
Asked: 2025-04-26 06:30:48 +0800 CST

在 SwiftUI 中，将一个视图锚定到容器中心，同时将另一个视图锚定到其边缘的最佳方法是什么？

  • 772

我对 SwiftUI 还不熟悉，想了解如何让一个视图在设备屏幕上水平居中，同时将另一个视图锚定到其后边缘（而不使原始视图不居中）。

我有一个可以运行的原型，但它有点丑，并且依赖于“onGeometryChange”来跟踪居中视图的大小，以便将相邻视图偏移正确的量。它之所以有效，是因为使用偏移量不会改变包含它的 ZStack 的几何形状，因为它认为相邻视图与第一个视图占据相同的居中位置。

虽然我的方法似乎有效，但它似乎有点问题，因为它依赖于多个布局周期（一个用于布局 ZStack 和居中视图，然后读取几何变化，然后更新相邻视图的位置）。此外，ZStack 容器的尺寸不包含相邻视图的偏移量。

struct ContentView: View {
    
    @State private var centeredLabelWidth: CGFloat = .zero
    @State private var offsetLabelWidth: CGFloat = .zero
    
    var body: some View {
        ZStack {
            Text("Centered Label")
            .border(Color.blue)
            .padding(1)
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
                centeredLabelWidth = $0
            }
            
            Text("Adjacent Label")
            .border(Color.red)
            .padding(1)
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
                offsetLabelWidth = $0
            }
            .offset(x: centeredLabelWidth / 2 + offsetLabelWidth / 2)
        }
    }
}

游乐场截图

非常感谢社区的任何见解！

swiftui

2 个回答

  1. Best Answer

    一般来说，这可以通过将您想要移动的视图作为overlay您想要保持固定的视图来实现，对齐 X，然后将alignmentGuide覆盖视图的 X 更改为不同的对齐指南 Y。

    “相邻标签”可以叠加在“居中标签”上，并设置对齐方式.trailing。这样，这两个标签的尾部边缘就会重叠在一起。然后，您可以将“相邻标签”的尾部对齐参考线更改为其前部边缘。这样，“相邻标签”的前部边缘就与“居中标签”的后部边缘重叠了。

    Text("Centered Label")
    .border(Color.blue)
    .padding(1)
    .overlay(alignment: .trailing) {
        Text("Adjacent Label")
            .border(Color.red)
            .padding(1)
            .alignmentGuide(.trailing) { $0[.leading] }
    }

    请注意，叠加视图（“相邻标签”）的建议尺寸将与底部视图（“居中标签”）相同。如果这会对叠加视图的布局产生不良影响，您可以对叠加视图应用修饰符，使其以某种方式忽略尺寸建议，例如fixedSize或固定frame。

    • 3

  2. 如果第二个视图非常简单，您可以在左侧添加一个不可见的第三个视图。

    HStack(spacing: 0) {
    Text("Adjacent Label")
    .padding(1)
    .opacity(0) // invisible

    Text("Centered Label")
    .border(Color.blue)
    .padding(1)

    Text("Adjacent Label")
    .border(Color.red)
    .padding(1)
}
    • 2

相关问题