SwiftUI 中自定义 container

自定义容器是在 Swift UI 中实现复杂布局和视图组合的强大工具。通过自定义容器，我们可以将一组视图组织在一起，以创建可重用的 UI 元素，同时保持一致的外观和行为。在本文中，我们将探讨如何使用自定义容器来实现一个主题，并深入了解其设计和实现细节。

在 Swift UI 中，容器是一种特殊类型的视图，它可以包含其他视图，并根据需要排列、组合和布局这些视图。Swift UI 提供了一些内置的容器视图，如 VStack、HStack 和 ZStack，用于垂直、水平和层叠布局。然而，有时我们需要更灵活的布局方式，这就是自定义容器发挥作用的时候。

//
//  CustomContainer.swift
//  GuessFlag
//
//  Created by zhangyarn on 2022/11/13.
//

import SwiftUI

struct Mesh<Content: View> : View {
    

   let row : Int;
   let col: Int;
   @ViewBuilder let content: (Int, Int) -> Content;

   var body: some View {
    
       VStack{
    
           ForEach(0..<row) {
    r in
               HStack{
    
                   ForEach(0..<col) {
    c in
                       content(r,c);
                   }
               }
           }
       }
   }
}

struct CustomContainer: View {
    
   var body: some View {
    
//        Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
       Mesh(row: 3,col:3) {
    r, c in
           Image(systemName: "person")
           Text("R\(r) C\(c)")
               .padding()
       }
   }
}

struct CustomContainer_Previews: PreviewProvider {
    
   static var previews: some View {
    
       CustomContainer()
   }
}

上面的代码中我们定义了一个 Mesh 的 container, 它有两个参数 row和col， 来画一个 row X col 的组成的一个网格。