Absolute positioning for SwiftUI views

Note

struct TestView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.black)
                .frame(width: 100, height: 100)
        }
        .frame(width: 300, height: 300, alignment: .topLeading)
        .background(Color.gray)
    }
}

这是一个最简单的相对布局，ZStack的frame长宽为300，内部对齐方式为.topLeading。Rectangle相当于是ZStack的子视图。

Position

现在我们给Rectangle加上position(x: 0, y: 0)

struct TestView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.black)
                .frame(width: 100, height: 100)
                .position(x: 0, y: 0)
        }
        .frame(width: 300, height: 300, alignment: .topLeading)
        .background(Color.gray)
    }
}

从上图可以很明显的看出position是以Rectangle的中心点作为位移点的，相对于父视图进行位移的，这样很方便我们将子视图定位到父视图的中间：position(x: 300 / 2, y: 300 / 2)。如果我们在Preview页面中查看Rectangle可以发现其宽高为100，但是实际在视图中所占位的宽高为300，这是因为

position可理解为为作用的视图（Rectangle）添加一个容器视图（RectangleWrapper），而这个容器视图占满父视图（ZStack frame），即宽高等于父视图，再将作用的视图在容器视图中进行定位。这样可以保证在一个父视图中添加多个position定位的视图互不影响。

这就造成了，在position之后设置的背景色之类的都将作用于容器视图。

例如：我们在position之后在添加一行.background(Color.red) ，如下图所示：

struct TestView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.black)
                .frame(width: 100, height: 100)
                .position(x: 0, y: 0)
                .background(Color.red)
        }
        .frame(width: 300, height: 300, alignment: .topLeading)
        .background(Color.gray)
    }
}

可以看出.background(Color.red) 作用于Rectangle的容器视图，他的颜色覆盖了ZStack的背景色。

Offset

接下来我们给Rectangle加上offset属性

struct TestView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.black)
                .frame(width: 100, height: 100)
                .offset(x: 300 / 2 - 100 / 2, y: 300 / 2 - 100 / 2)
        }
        .frame(width: 300, height: 300, alignment: .topLeading)
        .background(Color.gray)
    }
}

offset属性很好理解，将作用视图进行对应的x,y值偏移，需要注意的是：

“if you offset some text its original dimensions don’t actually change, even though the resulting view is rendered in a different location.”

offset并不会改变作用视图在布局流中的真实位置，它只是改变作用视图的显示位置。

接下来我们来对比两组代码，从而更好的理解offset的作用：

struct TestView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.black)
                .frame(width: 100, height: 100)
                .overlay(
                    Text("Hello World").foregroundColor(.red)
                )
                .offset(x: 300 / 2 - 100 / 2, y: 300 / 2 - 100 / 2)
        }
        .frame(width: 300, height: 300, alignment: .topLeading)
        .background(Color.gray)
    }
}