SwiftUI可用空间容器视图ViewThatFits

ViewThatFits 是 SwiftUI 中的一个容器视图，旨在根据当前可用空间选择最适合的子视图进行显示。这对于构建自适应布局非常有用，尤其是在需要根据屏幕大小或内容大小调整视图时。

基本语法

ViewThatFits {
    View1()
    View2()
    View3()
}

ViewThatFits 会尝试按顺序显示子视图：

1、检查第一个视图是否可以完全适应当前空间。

2、如果不能，尝试下一个视图，直到找到一个可以完全适应的视图。

3、如果没有任何视图可以完全适应，显示最后一个视图。

示例用法

1、根据可用空间调整布局

struct ContentView: View {
    var body: some View {
        ViewThatFits {
            Text("This is a very long text that might not fit.")
                .font(.largeTitle)
            
            Text("Short text")
                .font(.title)
            
            Image(systemName: "exclamationmark.triangle")
        }
        .padding()
    }
}

如果屏幕宽度足够，显示第一行长文本。

如果第一行长文本无法适应当前空间，显示较短的文本。

如果所有文本都无法适应，显示一个图标。

在布局方式之间切换

struct AdaptiveLayoutView: View {
    var body: some View {
        ViewThatFits {
            HStack {
                Text("Horizontal Layout")
                Spacer()
                Image(systemName: "arrow.right")
            }
            
            VStack {
                Text("Vertical Layout")
                Image(systemName: "arrow.down")
            }
        }
        .padding()
    }
}

如果有足够的水平空间，则使用 HStack 布局。

如果水平空间不足，则切换到 VStack 布局。

3、不同尺寸的子视图

struct DetentsExample: View {
    var body: some View {
        ViewThatFits {
            Rectangle()
                .frame(width: 300, height: 200)
                .foregroundColor(.red)
            
            Rectangle()
                .frame(width: 200, height: 150)
                .foregroundColor(.blue)
            
            Circle()
                .frame(width: 100, height: 100)
                .foregroundColor(.green)
        }
    }
}

在较大的屏幕上显示红色矩形。

如果红色矩形无法适应空间，则尝试显示蓝色矩形。

如果蓝色矩形也无法适应，则显示绿色圆形。

配合 GeometryReader 使用

如果需要更复杂的适配逻辑，可以结合 GeometryReader 获取当前可用空间：

struct CustomViewThatFits: View {
    var body: some View {
        GeometryReader { geometry in
            ViewThatFits {
                if geometry.size.width > 300 {
                    Text("Wide Layout")
                        .font(.largeTitle)
                        .foregroundColor(.green)
                }
                
                Text("Compact Layout")
                    .font(.title)
                    .foregroundColor(.blue)
            }
        }
    }
}

当可用宽度大于 300 时，显示宽布局。

如果宽度较小，切换到紧凑布局。

优点

1、简化自适应布局：ViewThatFits 提供了一种简单的方法来处理视图布局的自动调整，而无需手动计算大小或条件判断。

2、高效的布局选择：SwiftUI 会按照子视图的顺序尝试，并仅渲染选定的视图，从而提高性能。

3、易用性：语法简洁且直观，与其他 SwiftUI 容器一致。

注意事项

1、顺序重要：ViewThatFits 会按顺序尝试子视图，因此需要按照优先级从大到小排列。

2、适用于有限场景：如果需要非常复杂的自适应布局逻辑，GeometryReader 或其他布局工具可能更合适。

3、子视图独立渲染：被忽略的子视图不会被渲染，但仍然会被视为布局的一部分。

总结

ViewThatFits 是一种强大的工具，可以让开发者以声明性的方式处理自适应布局，非常适合简化在不同屏幕尺寸或内容大小下的布局切换逻辑。

相关文章

SwiftUI容器视图GeometryReader：https://fangjunyu.com/2024/12/15/swiftui%e5%ae%b9%e5%99%a8%e8%a7%86%e5%9b%begeometryreader/