Swift UI中如何设计响应式布局以适应不同屏幕尺寸

在SwiftUI中，设计响应式布局以适应不同屏幕尺寸主要依赖于使用GeometryReader、Modifier.onSizeChanged以及@Environment(\.horizontalSizeClass)等API

1. 使用GeometryReader：

GeometryReader允许你访问当前视图的几何信息，如大小和位置。你可以使用它来创建基于父容器大小的子视图。

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("Hello, SwiftUI!")
                    .font(.largeTitle)
                    .padding()
                
                Text("This is a responsive layout.")
                    .font(.title)
                    .foregroundColor(.gray)
            }
            .frame(maxWidth: geometry.size.width, maxHeight: .infinity)
            .background(Color.blue)
            .clipShape(RoundedRectangle(cornerRadius: 20))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2. 使用Modifier.onSizeChanged：

Modifier.onSizeChanged允许你在视图大小改变时执行特定操作。这可以用于创建自适应布局。

import SwiftUI

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

    var body: some View {
        Box(alignment: .center) {
            Text("Responsive Container")
                .onSizeChanged { newSize in
                    size = newSize
                }
                .background(Color.green)
                .clipShape(RoundedRectangle(cornerRadius: 20))
        }
        .frame(width: size.width, height: size.height)
    }
}

struct ResponsiveContainer_Previews: PreviewProvider {
    static var previews: some View {
        ResponsiveContainer()
    }
}

3. 使用@Environment(.horizontalSizeClass)：

@Environment(\.horizontalSizeClass)允许你检测设备的水平尺寸类别（紧凑或普通）。这可以用于在不同尺寸类别下显示不同的布局。

import SwiftUI

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var horizontalSizeClass

    var body: some View {
        VStack {
            if horizontalSizeClass == .compact {
                Text("Compact layout")
            } else {
                Text("Regular layout")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

结合这些技术，你可以创建适应不同屏幕尺寸的响应式布局。在实际项目中，你可能需要根据具体需求调整这些示例代码。