一键实现SwiftUI实时获取视图尺寸，打造完美布局！

2024-01-21 02:34:37

实时获取SwiftUI视图尺寸的终极指南

1. 前言

在SwiftUI中，对视图应用background和overlay时，不会改变其尺寸。这个关键特性意味着我们可以利用background和Geometry的组合来动态获取视图尺寸。这是一种强大的技术，使我们能够在SwiftUI中创建出更加复杂的布局。

2. 实时获取视图尺寸的步骤

步骤1：导入Geometry

首先，需要导入Geometry。Geometry是一个内置的SwiftUI视图，它提供视图的尺寸信息。我们可以通过在视图前面添加Geometry来获取尺寸。

import SwiftUI

struct MyView: View {
    @State private var size: CGSize = .zero

    var body: some View {
        GeometryReader { geometry in
            // 获取视图尺寸
            size = geometry.size

            // 显示视图内容
            Text("Hello, World!")
                .frame(width: size.width, height: size.height)
        }
    }
}

步骤2：使用background

接下来，使用background设置视图的背景色。background可以设置任何类型的视图，如颜色、图像、渐变等。我们可以设置一个颜色，以便于观察视图尺寸。

import SwiftUI

struct MyView: View {
    @State private var size: CGSize = .zero

    var body: some View {
        GeometryReader { geometry in
            // 获取视图尺寸
            size = geometry.size

            // 设置视图背景色
            background(Color.red)

            // 显示视图内容
            Text("Hello, World!")
                .frame(width: size.width, height: size.height)
        }
    }
}

步骤3：使用overlay

最后，我们可以使用overlay在视图上叠加内容。overlay可以设置任何类型的视图，如文本、图像、形状等。我们可以使用它来显示视图尺寸信息。

import SwiftUI

struct MyView: View {
    @State private var size: CGSize = .zero

    var body: some View {
        GeometryReader { geometry in
            // 获取视图尺寸
            size = geometry.size

            // 设置视图背景色
            background(Color.red)

            // 在视图上叠加内容
            overlay(
                Text("\(size.width, specifier: "%.2f") x \(size.height, specifier: "%.2f")")
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black.opacity(0.5))
            )

            // 显示视图内容
            Text("Hello, World!")
                .frame(width: size.width, height: size.height)
        }
    }
}