SwiftUI 布局：Group 充当透明的布局容器

SwiftUI的 Group 视图通常用于解决10个子视图的限制，但是它还有另一个重要的行为：它充当透明的布局容器。这意味着您可以在一个组内创建一系列视图，然后将该组包装在不同的堆栈中以获得不同的行为。

例如，此UserView具有一个包含三个文本视图的Group：

struct UserView: View {
    var body: some View {
        Group {
            Text("Name: 韦弦")
            Text("Country: 中国")
            Text("Pets: 六一")
        }
    }
}

该组不包含布局信息，因此我们不知道这三个文本字段是垂直，水平还是按深度堆叠。这是Group透明布局行为变得重要的地方：无论放置在哪个父视图里，UserView都会由其父视图决定如何安排其文本视图。

例如，我们可以这样创建一个ContentView：

struct ContentView: View {
    @State private var layoutVertically = false

    var body: some View {
        Group {
            if layoutVertically {
                VStack {
                    UserView()
                }
            } else {
                HStack {
                    UserView()
                }
            }
        }
        .onTapGesture {
            self.layoutVertically.toggle()
        }
    }
}

每次点击组时，就会在垂直和水平布局之间切换。

您可能想知道您需要多久使用一次这样的替代布局，但是答案可能会让您感到惊讶：这真的很普遍！您会看到，这正是SizeClass 布局要发生的事情，因为您可以编写代码以在水平空间很大时显示水平布局，而在空间减小时切换到垂直布局。

因此，我们可以像这样重写前面的示例：

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

    var body: some View {
        Group {
            if sizeClass == .compact {
                VStack {
                    UserView()
                }
            } else {
                HStack {
                    UserView()
                }
            }
        }
    }
}

提示：在这种情况下，堆栈中只有一个视图并且不带任何参数，可以将视图的初始化程序直接传递给VStack，以缩短代码长度：

if sizeClass == .compact {
    VStack(content: UserView.init)
} else {
    HStack(content: UserView.init)
}

我知道短代码不是全部，但是当您使用这种方法对视图布局进行分组时，它非常简洁。

译自 Using groups as transparent layout containers