0x06c-了解ViewThatFits

ViewThatFits 是 SwiftUI 中引入的一个容器视图，用于在多个子视图中选择一个最适合当前空间的视图进行显示。它是 iOS 16.0 和 macOS 13.0 及更高版本中提供的一个新功能，非常适合用来处理动态布局需求，特别是在不同设备或不同方向（如横屏和竖屏）上需要展示不同布局的情况。

核心功能 ​

ViewThatFits 会根据可用空间的大小，优先选择第一个能够完全适应空间的子视图进行显示。如果第一个子视图无法适应，它会尝试下一个子视图，依此类推。这使得开发者可以为不同的空间约束提供多种布局方案，而无需手动处理复杂的条件逻辑。

基本用法 ​

ViewThatFits 接受一个或多个子视图，SwiftUI 会自动评估每个子视图所需的理想大小，并选择第一个能够适应当前可用空间的子视图。

语法 ​

ViewThatFits {
    // 子视图列表，按优先级排列
    View1()
    View2()
    View3()
}

ViewThatFits {
    // 子视图列表，按优先级排列
    View1()
    View2()
    View3()
}

示例代码 ​

以下是一个简单的例子，展示了如何使用 ViewThatFits 根据空间大小选择不同的布局：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ViewThatFits {
            // 优先选择宽松的横向布局
            HStack {
                Text("横向布局")
                Spacer()
                Text("优先级最高")
            }
            .frame(minWidth: 300) // 需要至少 300 宽度
            
            // 如果空间不够，选择垂直布局
            VStack {
                Text("垂直布局")
                Text("次优先级")
            }
        }
        .padding()
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        ViewThatFits {
            // 优先选择宽松的横向布局
            HStack {
                Text("横向布局")
                Spacer()
                Text("优先级最高")
            }
            .frame(minWidth: 300) // 需要至少 300 宽度
            
            // 如果空间不够，选择垂直布局
            VStack {
                Text("垂直布局")
                Text("次优先级")
            }
        }
        .padding()
    }
}

在这个例子中：

• 如果可用宽度足够（至少 300 点），则会显示HStack布局。
• 如果可用宽度不足以容纳 HStack，则会显示 VStack 布局。

工作原理 ​

1. 理想大小计算：ViewThatFits 会计算每个子视图的理想大小（ideal size），即子视图在不受约束时的自然尺寸。
2. 空间适配：然后，它会将这些理想大小与当前可用空间进行比较，选择第一个能够完全适配的子视图。
3. 方向性：默认情况下，ViewThatFits 主要关注水平方向的空间适配，但也可以通过 in: 参数指定适配的方向（例如水平、垂直或两者）。

指定适配方向 ​

你可以通过 in: 参数来指定 ViewThatFits 考虑的空间约束方向：

ViewThatFits(in: .horizontal) { // 仅考虑水平方向的空间
    // 子视图
}

ViewThatFits(in: .horizontal) { // 仅考虑水平方向的空间
    // 子视图
}

• .horizontal：只考虑水平空间约束。
• .vertical：只考虑垂直空间约束。
• .horizontalAndVertical：同时考虑水平和垂直空间约束（默认值）。

使用场景 ​

1. 响应式布局：在不同设备或不同方向上提供不同的布局方案，例如在 iPhone 横屏和竖屏上显示不同的视图结构。
2. 内容适配：根据容器大小选择不同的内容展示方式，例如在小屏幕上显示简洁版内容，在大屏幕上显示完整版内容。
3. 优先级布局：为内容设置优先级，确保在空间有限时优先展示最重要的视图。

注意事项 ​

• 子视图顺序：ViewThatFits 会按照子视图的添加顺序进行评估，第一个适配的视图会被选中。因此，优先级最高的视图应放在最前面。
• 性能：虽然 ViewThatFits 会评估所有子视图的理想大小，但只有选中的视图会被实际渲染，其他视图不会占用额外的性能。
• 约束清晰：为子视图设置明确的 frame 或 minWidth、minHeight 等约束，可以帮助 ViewThatFits 更准确地判断适配情况。

总结 ​

ViewThatFits 是 SwiftUI 中一个非常强大且灵活的工具，它简化了响应式布局的开发过程。通过提供多个视图选项并让 SwiftUI 自动选择最合适的视图，开发者可以轻松应对复杂的布局需求，而无需编写大量的条件逻辑。如果你在开发跨设备或多方向适配的应用，ViewThatFits 是一个值得尝试的功能。