SwiftUI 如何使用其偏移量调整视图的位置 offset?

6 min read

SwiftUI 中可以使用 offset() 修饰符为视图设置偏移量,该修饰符接受一个 CGSize 类型的参数来描述偏移量。例如:

struct ContentView: View {
    var body: some View {
        Circle()
            .fill(Color.blue)
            .frame(width: 50, height: 50)
            .offset(x: 50, y: 50)
    }
}

上面的代码会将一个蓝色的圆圈视图向右下方偏移 50 个单位。需要注意的是,偏移量是相对于原来位置的,而不是相对于屏幕的。

还可以使用其他的类型来描述偏移量,如:

.offset(CGPoint(x: 50, y: 50))
.offset(x: 50)
.offset(y: 50)

如果要在偏移后的位置上添加子视图,则可以使用 z-index 修饰符来控制视图的叠放顺序,以确保子视图显示在正确的位置上。例如:

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.gray)
                .frame(width: 200, height: 200)
            Circle()
                .fill(Color.blue)
                .frame(width: 50, height: 50)
                .offset(x: 50, y: 50)
            Text("Hello World")
                .foregroundColor(.white)
                .offset(x: 20, y: 20)
        }
    }
}

上面的代码会将一个蓝色的圆圈视图和一个白色的文本视图添加到一个灰色的矩形视图上,圆圈和文本视图都有偏移量。需要注意的是,如果没有使用 z-index 修饰符,文本视图可能会被矩形视图遮挡而无法显示。