SwiftUI透明布局容器Group

Group 是 SwiftUI 提供的一个 透明布局容器，用于将多个视图组合在一起，但它 本身不提供具体的布局信息。

为什么使用 Group？

共享修饰符：对一组视图应用相同的修饰符。

组织视图：当需要返回多个视图时，Group 提供一种简洁的方式。

灵活布局：Group 不会对其子视图的布局施加约束，父视图决定了 Group 内部视图的排列方式。

基本用法

示例代码：

struct ExampleView: View {
    var body: some View {
        Group {
            Text("Hello")
            Text("World")
        }
        .font(.largeTitle) // 对 Group 内的所有子视图应用修饰符
        .foregroundColor(.blue)
    }
}

解释：

Group 包含两个 Text 视图，Hello 和 World。

font 和 foregroundColor 修饰符会同时作用于这两个子视图。

Group 的透明布局行为

Group 本身不决定子视图的排列方式，它的父视图负责这一任务。

示例代码：

struct ParentView: View {
    var body: some View {
        VStack {
            Group {
                Text("Item 1")
                Text("Item 2")
            }
            .foregroundColor(.red)

            Group {
                Text("Item 3")
                Text("Item 4")
            }
            .foregroundColor(.blue)
        }
    }
}

结果：

Item 1 和 Item 2 被一个 Group 包含，会以垂直方式排列（因为父视图是 VStack）。

Item 3 和 Item 4 也是垂直排列，但它们属于另一个 Group。

结合条件布局使用

当需要动态返回不同的视图组合时，Group 非常有用。

示例代码：

struct ConditionalView: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button("Toggle Details") {
                showDetails.toggle()
            }

            Group {
                if showDetails {
                    Text("Details are shown")
                } else {
                    Text("Details are hidden")
                }
            }
            .font(.headline)
        }
    }
}

改变视图的排序方式

struct WebView: View {
    var body: some View {
        Group {
            Text("https")
            Text("://")
            Text("www")
            Text(".")
            Text("fangjunyu.com")
        }
        .font(.title)
    }
}
struct ContentView: View {
    @State private var layoutVertically = true

    var body: some View {
        Button {
            layoutVertically.toggle()
        } label: {
            if layoutVertically {
                VStack {
                    WebView()
                }
            } else {
                HStack {
                    WebView()
                }
            }
        }
    }
}

点击按钮可以切换Group中文本视图的排序方式。

何时避免使用 Group？

如果不需要共享修饰符，直接在父视图（如 VStack 或 HStack）中列出子视图即可。

如果需要具体的布局行为，选择 VStack、HStack 或 ZStack 等布局容器。

总结

Group 是一个轻量级的透明容器，用于组织视图或应用共享修饰符。

不会影响布局：布局由父视图决定。

常见用途：

结构化复杂视图。

动态条件渲染。

共享修饰符。