在 SwifUI 中，如何精确地将视图居中并相对于它水平放置其他视图？

Question

我尝试按如下方式放置这些文本视图

• “应用程序标题”位于中心
• 最右侧的“编辑”和“...”（三点菜单）

当我尝试使用

.position()

修饰符手动将“应用程序标题”精确居中时，这似乎有效。然而，它返回的视图占据了整个可用空间，并将“编辑”和“...”的文本视图完全推离了所需的位置。

struct SOPosition: View {
    var body: some View {
        HStack {
            Text("App title")
                .border(Color.blue)
                .position(x: UIScreen.width / 2)
                .border(Color.red)
            Group {
                Text("Edit")
                Text("...")
            }.border(.yellow)
                .frame(alignment: .trailing)
        }
        
        Spacer()
    }
} // SOPosition

下面是它的截图

当我尝试使用

.offset()

修改器时，我通过调整坐标值获得近似结果。有没有一种更干净的方法，不涉及硬编码值。

struct SOOffset: View {
    var body: some View {
        HStack {
            Text("").frame(alignment: .leading)
            Spacer()
            Text("App title").offset(x: 40)
            Spacer()
            Group {
                Text("Edit")
                Text("...")
            }.frame(alignment: .trailing).offset(x: -20)
        }
        
        Spacer()
    }
} // SOOffset

下面是它的截图

Answer 1

尝试将内容放入ZStack中：

var body: some View {
    ZStack(alignment: .top) {
        VStack {
            HStack(alignment: .center) {
                Text("App title")
            }

            Spacer()
        }

        HStack(alignment: .top) {
            Text("Edit")
                .frame(maxWidth: .infinity, alignment: .trailing)
            Text("...")
                .fixedSize()
        }
    }
}