自定义视图布局

SwiftUI 提供了强大的内建布局（如 HStack、VStack 和 ZStack），但在某些情况下，标准布局可能无法满足复杂界面需求。这时，我们可以通过自定义布局来实现更灵活的视图排列方式。

使用 GeometryReader 自定义布局

GeometryReader 是 SwiftUI 中的一个视图，可以获取父容器的尺寸和位置，从而实现自定义布局。通过 GeometryReader 可以动态调整视图位置和大小。

示例：根据屏幕宽度调整视图大小

struct ResponsiveView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Screen width: \(geometry.size.width)")
                Text("Screen height: \(geometry.size.height)")
            }
            .frame(width: geometry.size.width * 0.8, height: geometry.size.height * 0.2)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
        }
    }
}

在这个例子中，GeometryReader 提供屏幕的宽度和高度信息，并根据宽度动态设置视图大小。

使用 PreferenceKey 实现布局信息传递

PreferenceKey 用于在视图树中传递数据。可以结合 GeometryReader 使用它来实现更复杂的布局需求，例如动态调整多个视图的位置。

示例：自定义对齐方式

struct CustomAlignmentKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct CustomAlignedView: View {
    var body: some View {
        VStack {
            Text("Aligned View")
                .background(GeometryReader { geo in
                    Color.clear.preference(key: CustomAlignmentKey.self, value: geo.frame(in: .global).midX)
                })
            Spacer()
        }
        .onPreferenceChange(CustomAlignmentKey.self) { midX in
            print("View Center X: \(midX)")
        }
    }
}

在这个例子中，CustomAlignmentKey 使用 PreferenceKey 来传递视图的 midX 中心坐标信息，onPreferenceChange 可以捕获这个值并进行相应操作。

自定义布局容器：创建自己的 Layout

SwiftUI 提供了 Layout 协议，可以创建完全自定义的布局容器。实现 Layout 协议后，可以定义子视图的布局方式。

示例：自定义行布局（Custom Row Layout）

struct CustomRow: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let maxWidth = subviews.map { $0.sizeThatFits(.unspecified).width }.max() ?? 0
        let totalHeight = subviews.map { $0.sizeThatFits(.unspecified).height }.reduce(0, +)
        return CGSize(width: maxWidth, height: totalHeight)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var yOffset = bounds.minY
        for subview in subviews {
            let size = subview.sizeThatFits(.unspecified)
            subview.place(at: CGPoint(x: bounds.midX - size.width / 2, y: yOffset), proposal: .unspecified)
            yOffset += size.height
        }
    }
}

struct CustomRowExample: View {
    var body: some View {
        CustomRow {
            Text("First View")
            Text("Second View")
            Text("Third View")
        }
        .padding()
        .background(Color.gray.opacity(0.2))
    }
}

在这个例子中，我们创建了一个 CustomRow 布局，按行排列子视图。通过 sizeThatFits 方法指定布局的总大小，通过 placeSubviews 方法放置每个子视图的位置。

使用 offset 和 position 进行布局调整

有时候，只需简单的位移调整而不需要完全自定义布局。可以使用 offset 或 position 修饰符来微调视图位置。

示例：使用 offset

struct OffsetExample: View {
    var body: some View {
        VStack {
            Text("Original Position")
            Text("Offset Position")
                .offset(x: 50, y: 20)
                .background(Color.yellow)
        }
    }
}

在这个例子中，offset 将第二个文本视图向右偏移了 50 个单位，向下偏移了 20 个单位。

示例：使用 position

struct PositionExample: View {
    var body: some View {
        ZStack {
            Color.blue.frame(width: 200, height: 200)
            Text("Centered Text")
                .position(x: 150, y: 150)
                .foregroundColor(.white)
        }
    }
}

这里使用 position 指定视图的位置，将文本固定在 x:150, y:150 坐标处。

总结

  • GeometryReader：用于获取父容器的尺寸和位置，适合动态调整视图布局。
  • PreferenceKey：用于在视图树中传递布局信息，适合动态对齐。
  • 自定义 Layout 容器：通过实现 Layout 协议创建复杂布局。
  • offset 和 position：用于简单的位移和位置调整。

通过这些方法，SwiftUI 的布局可以灵活适配不同场景和需求，帮助开发者打造精致的用户界面。

Last Updated::