SwiftUI之深入解析布局协议

一、什么是布局协议？

  • 采用布局协议类型的任务，是告诉 SwiftUI 如何放置一组视图，需要多少空间。这类型常常被作为视图容器，虽然布局协议是 2022 年新推出的（至少公开来说），但是我们在第一天使用 SwiftUI 的时候就在使用了，当每次使用 HStack 或者 VStack 放置视图时都是如此。
  • 请注意至少到现在，布局协议不能创建懒加载容器，比如 LazyHStack 或 LazyVStack，懒加载容器是指那些只在滚入屏幕时渲染，滚出到屏幕外就停止渲染的视图。
  • Layout 类型不是视图，例如，它们没有视图拥有的 body 属性。但是不用担心，目前为止你可以认为它们就是视图并且像视图一样使用它们，这个框架使用了漂亮的 Swift 语言技巧使你的布局代码在向 SwiftUI 中插入时产生一个透明视图 。

二、视图层次结构的族动态

  • 在开始布局代码之前，重新审视一下 SwiftUI 框架的核心，就像我在以前的文章 SwiftUI之深入解析Frame Behaviors 所描述的的那样，在布局过程中，父视图给子视图提供一个尺寸，但最终还是由子视图决定如何绘制自己。然后，它将此传达给父视图，以便采取相应的动作。

① 如果子视图需求小于提供的视图

  • 如下所示，考虑文本视图，提供比需要绘制文字更多的空间：

在这里插入图片描述

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {

            Rectangle().fill(.green)

            Text("Hello World!")

            Rectangle().fill(.green)

        }
        .padding(20)
    }
}
  • 在这个示例中，屏幕宽度是 400pt，因此，文本提供 HStack 宽度的三分之一 ((400 – 40) / 3 = 120)。在这 120pt 中，文本只需要 74，并传达给父视图，父视图现在可以拿走多余的 46pt 给其他的子视图用。因为其它子视图是图形，因此它们可以接收给它们的一切东西，在这种情况下，即为 120+46/2=143。

② 如果子视图完全接收提供的视图

  • 图形就是视图中的一个例子，不管提供了什么它都能接收。在上面的示例中，绿色矩形占据了提供的所有空间，但没有一个多余的像素。

③ 如果子视图需求超出提供的视图

  • 思考如下所示的例子，图片视图特别严格（除非修改了 resizable 方法），它们需要多少空间就要占用多少空间，下面示例的图片是 300×300，这也是它们需要绘制自己需要的空间，然而，通过调用 frame(width:100) 子视图只得到了 100pt，父视图就没有办法只能听从子视图的做法吗？并非如此，子视图仍然会使用 300pt 绘制，但是父视图将会布局其他视图，就好像子视图只有 100pt 宽度一样。结果呢，我们将会有一个超出边界的子视图，但是周围的视图不会被图片额外使用的空间影响，黑色边框展示的空间是提供给图片的：

在这里插入图片描述

struct ContentView: View {
    var body: some View {
        HStack(spacing: 0) {

            Rectangle().fill(.yellow)

            Image("peach")
                .frame(width: 100)
                .border(.black, width: 3)
                .zIndex(1)

            Rectangle().fill(.yellow)

        }
        .padding(20)
    }
}
  • 视图的行为方式有很多差异。例如，我们看见文本获取需求空间后如何处置多余的不需要的空间，然而，如果需求的空间大于提供，就可能会发生一些事情，具体取决于如何配置视图。例如，可能会根据提供的尺寸截取文本，或者在提供的宽度内垂直的展示文本，如果使用 fixedSize 修改甚至可能超出屏幕就像例子中的图片一样。需要记住的是， fixedSize 告诉视图使用其理想尺寸，无论提供的是多少。

三、布局实现

① ProposedViewSize

  • 创建一个布局类型需要实现至少两个方法，sizeThatFits 和 placeSubviews，这些方法接收一些新类型作为参数：ProposedViewSize 和 LayoutSubview。
  • ProposedViewSize 被父视图用来告知子视图如何计算自己的尺寸，这是一个简单的类型，但很强大。它只是一对可选的 CGFloat ，用于建议宽度和高度。这些属性可以有具体的值（例如35，74等），但当它们等于0.0 ，nil 或者 .infinity 时是有特殊的含义。
    • 对于一个具体的宽度，例如 45，父视图提供的也是 45pt，这个视图应该由提供的宽度来决定自身的尺寸；
    • 对于宽度为 0.0，子视图应该响应为最小尺寸；
    • 对于宽度为 .infinity ,子视图应该响应为最大尺寸；
    • 对于 nil，父视图应该响应为理想尺寸。
  • ProposedViewSize 也可以有一些预定义值：
ProposedViewSize.zero = ProposedViewSize(width: 0, height: 0)
ProposedViewSize.infinity = ProposedViewSize(width: .infinity, height: .infinity)
ProposedViewSize.unspecified = ProposedViewSize(width: nil, height: nil)

② LayoutSubview

  • sizeTheFits 和 placeSubviews 方法也接收一个 Layout.Subviews 参数，它是一个 LayoutSubview 元素的合集。每个视图都有一个，作为父视图的直接后代。
  • 尽管有这个名称，但它的类型不是视图，而是一个代理，可以查询这些代理去了解正在布局的各个视图的布局信息。例如，自 SwiftUI 推出以来，我们第一次可以直接查询到视图最小，理想和最大的尺寸，或者可以获得每个视图的布局优先级以及其他有趣的值。

③ sizeThatFits 方法

  • SwiftUI 将会调用 sizeThatFits 方法决定布局容器的尺寸，当写这个方法我们应该认为既是父视图又是子视图：当作为父视图时需要询问子视图的尺寸，当是子视图时，要基于子视图的回复告诉父视图需要的尺寸，这个方法将会收到建议尺寸，一个子视图代理的合集和一个缓存，最后一个参数可能用以提高布局和一些其他高级应用的性能。
  • 当 sizeThatFits 方法在给定维度中（即宽度或高度）收到的建议尺寸为 nil 时，应该返回容器的理想尺寸。当收到的建议尺寸为 0.0 时，应该返回容器的最小尺寸，当收到的建议尺寸为 .infinity 时，应该返回容器的最大尺寸。
  • 注意 sizeThatFits 可能通过不同提案多次调用来测试容器的灵活性，提案可以是上述每个维度案例的任意组合。例如，可能会得到一个带有 ProposedViewSize(width: 0.0, height: .infinity) 的调用。
func sizeThatFits(proposal: ProposedViewSize, subviews: Self.Subviews, cache: inout Self.Cache) -> CGSize
  • 通过创建一个基础的 HStack 开始，命名为 SimpleHStack 。为了比较两者，创建一个标准的 HStack （蓝色）视图放置在SimpleHStack （绿色）上方，第一次尝试，我们将会实现 sizeThatFits ，但是同时将会使其他需要的方法（placeSunviews）为空。
struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            
            HStack(spacing: 5)  { 
                contents() 
            }
            .border(.blue)
            
            SimpleHStack(spacing: 5) {
                contents() 
            }
            .border(.blue)

        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.white)
    }
    
    @ViewBuilder func contents() -> some View {
        Image(systemName: "globe.americas.fill")
        
        Text("Hello, World!")

        Image(systemName: "globe.europe.africa.fill")
    }

}

struct SimpleHStack: Layout {
    let spacing: CGFloat
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let idealViewSizes = subviews.map { $0.sizeThatFits(.unspecified) }
        
        let spacing = spacing * CGFloat(subviews.count - 1)
        let width = spacing + idealViewSizes.reduce(0) { $0 + $1.width }
        let height = idealViewSizes.reduce(0) { max($0, $1.height) }
        
        return CGSize(width: width, height: height)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) 
    {
        // ...
    }
}
  • 效果如下：

在这里插入图片描述

  • 可以观察到，这两个图形的尺寸是一样的。然而，这是因为没有在 placeSubviews 方法中编写任何代码，所有的视图都放置在容器中间，如果没有明确的放置位置，这就是容器的默认视图。在 sizeThatFits 方法中，首先要计算每个视图的所有理想尺寸，这个可以很容易的实现，因为子视图代理中有返回建议尺寸的方法。一旦计算好所有理想尺寸，可以通过添加子视图宽度和视图间距来计算容器尺寸。从高度上来说，我们的视图将会和最高子视图一样高。

④ placeSubviews 方法

func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Self.Subviews, cache: inout Self.Cache)
  • 在 SwiftUI 通过不同的提案值反复调用 sizeThatFits 来测试过容器视图后，终于可以调用 placeSubviews，我们的目标是遍历子视图，确定它们的位置并放置。除了 sizeThatFits 收到同样的参数外，placeSubviews 还得到一个 CGRect 参数，bounds rect 具有在 sizeThatFits 方法中要求的尺寸。通常，矩形的原点是（0，0），但是不应该这样假设，如果正在组合布局，这个原点可能会有不同的值。放置视图很简单，这多亏了拥有放置方法的子视图代理，必须提供视图的坐标，锚点（默认为中心）和建议尺寸，以便子视图可以相应地绘制自己。
struct SimpleHStack: Layout {
    
    // ...
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var pt = CGPoint(x: bounds.minX, y: bounds.minY)
        
        for v in subviews {
            v.place(at: pt, anchor: .topLeading, proposal: .unspecified)
            
            pt.x += v.sizeThatFits(.unspecified).width + spacing
        }
    }
}
  • 现在，还记得之前提到的忽略了从父容器收到的建议了吗？这意味着 SimpleHStack 容器将会一直拥有一样的大小。不管提供什么，容器都会使用 .unspecified 计算尺寸和放置，意味着容器始终拥有理想的尺寸。在这个例子中容器的理想尺寸就是允许它以自己的理想尺寸放置所有子视图的尺寸，如果改变提供尺寸看看会发生什么，在这个动画中红框代表提供的宽度。

在这里插入图片描述

  • 观察 SimpleHStack 是如何忽视提供的尺寸并且总是以理想尺寸绘制自己，该尺寸适合所有子视图的理想尺寸。

四、容器对齐

  • 布局协议也为容器定义对齐指南，这表明容器是作为一个整体如何与其余视图对齐的，它对容器内的视图没有任何影响。
  • 如下所示的例子，让 SimpleHStack 对齐第二个视图，但前提是容器与头部对齐（如果把 VStack 的对齐方式改为尾部对齐，将不会看到任何特殊的对齐方式）。有红色边框的视图是 SimpleHStack ，黑色边框的视图是标准的 HStack 容器，绿色边框的表示封闭的 VStack。

在这里插入图片描述

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 5) {
            HStack(spacing: 5) {
                contents()
            }
            .border(.black)

            SimpleHStack(spacing: 5) {
                contents()
            }
            .border(.red)
            
            HStack(spacing: 5) {
                contents()
            }
            .border(.black)
            
        }
        .background { Rectangle().stroke(.green) }
        .padding()
        .font(.largeTitle)
            
    }
    
    @ViewBuilder func contents() -> some View {
        Image(systemName: "globe")
            .imageScale(.large)
            .foregroundColor(.accentColor)
        Text("Hello, world!")
    }
}

struct SimpleHStack: Layout {
    
    // ...
    func explicitAlignment(of guide: HorizontalAlignment, in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGFloat? {
        if guide == .leading {
            return subviews[0].sizeThatFits(proposal).width + spacing
        } else {
            return nil
        }
    }
}

五、优先布局

  • 当使用 HStack 时，知道所有视图都在平等的竞争宽度，除非它们有不同的布局优先级。所有的视图默认优先级都是0.0，但是，可以通过调用 layoutPriority() 来修改布局优先级。执行布局优先级是容器布局的责任，因此如果创建一个新布局，如果相关的话，需要添加一些逻辑去考虑布局优先级，那么如何做到这一点，这取决于我们自己。可以使用视图布局优先级的值赋予它们任何意义。例如，在上一个例子中，我们将会根据视图优先级的值从左往右放置视图。
  • 为了实现效果，无需对子视图集合进行迭代，只需要简单的通过优先级排序：
truct SimpleHStack: Layout {
    
    // ...
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var pt = CGPoint(x: bounds.minX, y: bounds.minY)
        for v in subviews.sorted(by: { $0.priority > $1.priority }) {
            v.place(at: pt, anchor: .topLeading, proposal: .unspecified)
            pt.x += v.sizeThatFits(.unspecified).width + spacing
        }
    }
}
  • 在如下所示的例子中，蓝色圆圈将会首先出现，因为它比起其他视图拥有较高的优先级：

在这里插入图片描述

SimpleHStack(spacing: 5) {
    Circle().fill(.yellow)
         .frame(width: 30, height: 30)
                        
    Circle().fill(.green)
        .frame(width: 30, height: 30)

    Circle().fill(.blue)
        .frame(width: 30, height: 30)
        .layoutPriority(1)
}

六、LayoutValueKey

  • 不建议将布局优先级用于优先级以外的内容，这可能使其他的用户不理解你的容器，甚至将来的你也不理解。幸运的是，我们有别的方法在视图中添加新值，这个值并不限制于 CGFloat ，它们可以拥有任何类型。
  • 重写前面的示例，使用一个新值，我们把它称为 PreferredPosition，第一件事就是创建一个符合 LayoutValueKey 的类型，只需要一个带有静态默认值的结构体，这个默认值用于没有指明具体值的时候：
struct PreferredPosition: LayoutValueKey {
    static let defaultValue: CGFloat = 0.0
}
  • 这样，视图就拥有了新的属性，为了设置这个值，需要用到 layoutValue() ，为了读取这个值，我们使用 LayoutValueKey 类型作为视图代理的下标：
SimpleHStack(spacing: 5) {
    Circle().fill(.yellow)
         .frame(width: 30, height: 30)
                        
    Circle().fill(.green)
        .frame(width: 30, height: 30)

    Circle().fill(.blue)
        .frame(width: 30, height: 30)
        .layoutValue(key: PreferredPosition.self, value: 1.0)
}

struct SimpleHStack: Layout {
    // ...

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var pt = CGPoint(x: bounds.minX, y: bounds.minY)
        
        let sortedViews = subviews.sorted { v1, v2 in
            v1[PreferredPosition.self] > v2[PreferredPosition.self]
        }
        
        for v in sortedViews {
            v.place(at: pt, anchor: .topLeading, proposal: .unspecified)
            
            pt.x += v.sizeThatFits(.unspecified).width + spacing
        }
    }
}
  • 这段代码不像第一段 layoutPriority 那样整洁，但是用这两个扩展很容易解决：
extension View {
    func preferredPosition(_ order: CGFloat) -> some View {
        self.layoutValue(key: PreferredPosition.self, value: order)
    }
}

extension LayoutSubview {
    var preferredPosition: CGFloat {
        self[PreferredPosition.self]
    }
}
  • 可以像这样重写：
SimpleHStack(spacing: 5) {
    Circle().fill(.yellow)
         .frame(width: 30, height: 30)
                        
    Circle().fill(.green)
        .frame(width: 30, height: 30)

    Circle().fill(.blue)
        .frame(width: 30, height: 30)
        .preferredPosition(1)
}

struct SimpleHStack: Layout {
    // ...
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var pt = CGPoint(x: bounds.minX, y: bounds.minY)
        
        for v in subviews.sorted(by: { $0.preferredPosition > $1.preferredPosition }) {
            v.place(at: pt, anchor: .topLeading, proposal: .unspecified)
            
            pt.x += v.sizeThatFits(.unspecified).width + spacing
        }
    }
}

七、默认间距

  • 到目前为止，在初始化布局的时候 SimpleHStack 使用的都是我们提供的间距值，然而，在使用了 HStack 一阵子，就会知道如果没有指明间距，视图将会根据不同的平台和内容提供默认的间距。一个视图可以拥有不同间距，如果旁边是文本视图和旁边是图像间距是不一样的。除此之外，每个边缘都会有自己的偏好，那么如何用 SimpleHStack 让它们行为一致？我曾提到过子视图代理是布局知识的宝藏，而且它们不会让人失望，它们有可以查询它们空间偏好的方法：
struct SimpleHStack: Layout {
    
    var spacing: CGFloat? = nil
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let idealViewSizes = subviews.map { $0.sizeThatFits(.unspecified) }
        let accumulatedWidths = idealViewSizes.reduce(0) { $0 + $1.width }
        let maxHeight = idealViewSizes.reduce(0) { max($0, $1.height) }

        let spaces = computeSpaces(subviews: subviews)
        let accumulatedSpaces = spaces.reduce(0) { $0 + $1 }
        
        return CGSize(width: accumulatedSpaces + accumulatedWidths,
                      height: maxHeight)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var pt = CGPoint(x: bounds.minX, y: bounds.minY)
        let spaces = computeSpaces(subviews: subviews)

        for idx in subviews.indices {
            subviews[idx].place(at: pt, anchor: .topLeading, proposal: .unspecified)
            
            if idx < subviews.count - 1 {
                pt.x += subviews[idx].sizeThatFits(.unspecified).width + spaces[idx]
            }
        }
    }
    
    func computeSpaces(subviews: LayoutSubviews) -> [CGFloat] {
        if let spacing {
            return Array<CGFloat>(repeating: spacing, count: subviews.count - 1)
        } else {
            return subviews.indices.map { idx in
                guard idx < subviews.count - 1 else { return CGFloat(0) }
                
                return subviews[idx].spacing.distance(to: subviews[idx+1].spacing, along: .horizontal)
            }
        }

    }
}
  • 请注意，除了使用空间偏好外，还可以告诉系统容器视图的空间偏好。这样， SwiftUI 就会知道如何将其与周围的视图分开，为此，需要实现布局方法 spacing(subviews:cache:)。

八、布局属性和 Spacer()

  • 布局协议有一个可以实现的名为 layoutProperties 的静态属性，LayoutProperties 包含布局容器的特定布局属性。本文中只定义了一个属性：stackOrientation：
struct MyLayout: Layout {
    
    static var layoutProperties: LayoutProperties {
        var properties = LayoutProperties()
        properties.stackOrientation = .vertical       
        return properties
    }

    // ...
}
  • stackOrientation 告诉是像 Spacer 这样的视图是否应该在横轴或纵轴上展开。例如，如果检查 Spacer 视图代理的最小，理想和最大尺寸，这就是它在不同容器返回的结果，每个容器都有不同的 stackOrientation：
stackOrientationminimumidealmaximum
.horizontal8.0 × 0.08.0 × 0.0.infinity × 0.0
.vertical0.0 × 8.00.0 × 8.00.0 × .infinity
.none or nil8.0 × 8.08.0 × 8.0.infinity × .infinity

九、布局缓存

  • 布局缓存是常被用来提高布局性能的一种方式。然而，它还有别的用途，只需要把它看作是一个存储数据的地方，需要在 sizeThatFits 和 placeSubviews 调用中持久保存。首先想到的是提高性能，但是它对于和其他子视图布局共享信息也是非常有用的。
  • 在 SwiftUI 的布局过程中会多次调用 sizeThatFits 和 placeSubviews 方法，这个框架测试我们的容器的灵活性，以确定整体视图层级结构的最终布局。为了提高布局容器性能， SwiftUI 实现了一个缓存， 只有当容器内的至少一个视图改变时才更新缓存。因为 sizeThatFits 和 placeSubviews 都可以为单个视图更改时多次调用，因此保留不需要为每次调用而重新计算的数据缓存是有意义的。
  • 使用缓存不是必须的。事实上，很多时候你不需要。无论如何，在没有缓存的情况下编写布局更简单一点，当以后需要时再添加。SwiftUI 已经做了一些缓存。例如，从子视图代理获得的值会自动存储在缓存中，相同的参数的反复调用将会使用缓存结果，在 makeCache(subviews:) 文档页面，有一个很好的讨论关于可能想要实现自己的缓存的原因。
  • 同时也要注意， sizeThatFits 和 placeSubviews 中的缓存参数有一个是 inout 参数，这意味着也可以用这个函数更新缓存存储，将会看到它在 RecursiveWheel 例子中特别有帮助。例如，这里是使用更新缓存的 SimpleHStack 。下面是需要做的：
    • 创建一个将包含缓存数据的类型，在本例中，我把它叫做 CacheData，它将会计算视图间的最大高度和空间。
    • 实现 makeCache(subviews:) 创建缓存。
    • 可选的实现 updateCache(subviews:)，这个方法会在检测到更改时调用，它提供了默认实现，基本上通过调用 makeCache 重新创建缓存。
    • 记住要更新 sizeThatFits 和 placeSubviews 中的缓存参数类型。
struct SimpleHStack: Layout {
    struct CacheData {
        var maxHeight: CGFloat
        var spaces: [CGFloat]
    }
    
    var spacing: CGFloat? = nil
    
    func makeCache(subviews: Subviews) -> CacheData {
        return CacheData(maxHeight: computeMaxHeight(subviews: subviews),
                         spaces: computeSpaces(subviews: subviews))
    }
    
    func updateCache(_ cache: inout CacheData, subviews: Subviews) {
        cache.maxHeight = computeMaxHeight(subviews: subviews)
        cache.spaces = computeSpaces(subviews: subviews)
    }
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout CacheData) -> CGSize {
        let idealViewSizes = subviews.map { $0.sizeThatFits(.unspecified) }
        let accumulatedWidths = idealViewSizes.reduce(0) { $0 + $1.width }
        let accumulatedSpaces = cache.spaces.reduce(0) { $0 + $1 }
        
        return CGSize(width: accumulatedSpaces + accumulatedWidths,
                      height: cache.maxHeight)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout CacheData) {
        var pt = CGPoint(x: bounds.minX, y: bounds.minY)

        for idx in subviews.indices {
            subviews[idx].place(at: pt, anchor: .topLeading, proposal: .unspecified)
            
            if idx < subviews.count - 1 {
                pt.x += subviews[idx].sizeThatFits(.unspecified).width + cache.spaces[idx]
            }
        }
    }
    
    func computeSpaces(subviews: LayoutSubviews) -> [CGFloat] {
        if let spacing {
            return Array<CGFloat>(repeating: spacing, count: subviews.count - 1)
        } else {
            return subviews.indices.map { idx in
                guard idx < subviews.count - 1 else { return CGFloat(0) }
                
                return subviews[idx].spacing.distance(to: subviews[idx+1].spacing, along: .horizontal)
            }
        }
    }
    
    func computeMaxHeight(subviews: LayoutSubviews) -> CGFloat {
        return subviews.map { $0.sizeThatFits(.unspecified) }.reduce(0) { max($0, $1.height) }
    }
}
  • 如果每次调用其中一个布局函数都打印出一条信息，将会获得的下面的结果。如下所示，缓存将会计算两次，但是其他方法将会被调用 25 次：
makeCache called <<<<<<<<
sizeThatFits called
sizeThatFits called
sizeThatFits called
sizeThatFits called
placeSubiews called
placeSubiews called
updateCache called <<<<<<<<
sizeThatFits called
sizeThatFits called
sizeThatFits called
sizeThatFits called
placeSubiews called
placeSubiews called
sizeThatFits called
sizeThatFits called
placeSubiews called
sizeThatFits called
placeSubiews called
placeSubiews called
sizeThatFits called
placeSubiews called
placeSubiews called
sizeThatFits called
sizeThatFits called
sizeThatFits called
placeSubiews called

十、高明的伪装者

  • 正如已经提到的，布局协议没有采用视图协议，那么为什么一直在 ViewBuilder 中使用布局容器，就好像它们是视图一样？事实证明，当用代码放置布局时，会有一个系统函数调用来产生视图，那这个函数叫什么呢？你可能已经猜到了：
func callAsFunction<V>(@ViewBuilder _ content: () -> V) -> some View where V : View
  • 由于语言的增加（在 SE-0253中有描述和解释），被命名为 callAsFunction 的方法是特殊的。当使用一个类型实例时，这些方法会像一个函数一样被调用，在这种情况下，可能会感到困惑，因为似乎只是在初始化类型，而实际上做的更多。初始化类型然后调用 callAsFunction，因为 callAsFunction的返回值是一个视图，因此可以把它放到 SwiftUI 代码中：
SimpleHStack(spacing: 10).callAsFunction({
    Text("Hello World!")
})

// Thanks to SE-0253 we can abbreviate it by removing the .callAsFunction
SimpleHStack(spacing: 10)({
    Text("Hello World!")
})

// And thanks to trailing closures, we end up with:
SimpleHStack(spacing: 10) {
    Text("Hello World!")
}
  • 如果布局没有初始化参数，代码甚至可以更简单：
SimpleHStack().callAsFunction({
    Text("Hello World!")
})

// Thanks to SE-0253 we can abbreviate it by removing the .callAsFunction
SimpleHStack()({
    Text("Hello World!")
})

// And thanks to single trailing closures, we end up with:
SimpleHStack {
    Text("Hello World!")
}
  • 布局类型并不是视图，但是在 SwiftUI 中使用它们的时候它们就会产生一个视图，这个技巧（callAsFunction）还可以切换到不同布局，同时保持视图的标识，就像接下来的部分描述的那样。

十一、使用 AnyLayout 切换布局

  • 布局容器的另一个有趣的地方，可以修改容器的布局， SwiftUI 会友好地用动画处理两者的切换，不需要额外的代码。那是因为视图会识别标识并且维护， SwiftUI 将这个行为认为是视图的改变，而不是两个单独的视图。

在这里插入图片描述

struct ContentView: View {
    @State var isVertical = false
    
    var body: some View {
        let layout = isVertical ? AnyLayout(VStackLayout(spacing: 5)) : AnyLayout(HStackLayout(spacing: 10))
        
        layout {
            Group {
                Image(systemName: "globe")
                
                Text("Hello World!")
            }
            .font(.largeTitle)
        }
        
        Button("Toggle Stack") {
            withAnimation(.easeInOut(duration: 1.0)) {                
                isVertical.toggle()
            }
        }
    }
}
  • 三元运算符（条件？结果1:结果2）要求两个表达式返回同一类型，AnyLayout 在这里发挥了作用。如果你观看过 2022 WWDC Layout session，或许看见过苹果工程师使用的例子，但使用的是 VStack 代替 VStackLayout 和 HStack 代替 HStackLayout，那已经过时了。在 beta3 过后， HStack 和 VStack 不再采用布局协议，并且它们添加了 VStackLayout 和 HStackLayout 布局（分别由 HStack 和 VStack 使用），它们还添加了 ZStackLayout 和 GridLayout。

十二、总结

  • 如果我们停下来考虑每一种可能的情况，编写布局容器可能会让我们举步维艰。有的视图使用尽可能多的空间，有的视图会尽量适应，还有的将会使用的更少等等。当然还有布局优先级，当多个视图需要竞争同一个空间会变得更加艰难。
  • 然而，这项任务可能并不像看起来艰巨，我们可能会使用自己的布局，并且可能会提前知道我们的容器会有什么类型的视图。例如，如果你打算只用方形图片或者文本视图来使用自己的容器，或者你知道你的容器会有具体尺寸，或者你确定你所有的视图都拥有一样的优先级等，这些信息都可以大大的简化任务。即使你不能有这种奢望来做这种假设，它也可能是开始编码的好地方，让你的布局在一些情况下工作，然后开始为更复杂的情况添加代码。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/314593.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Web】token机制

【Web】token机制

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Web ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 机制基本&#xff1a; 优势&#xff1a; 结语 我的其他博客 前言 在当今互联网时代&#xff0c;安全、高效的用户身份验证和资源授…
阅读更多...
87.乐理基础-记号篇-反复记号（一）反复、跳房子

87.乐理基础-记号篇-反复记号（一）反复、跳房子

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;86.乐理基础-记号篇-速度记号-CSDN博客 首先是反复记号表总结图&#xff1a; 当前是写前两个记号&#xff0c;其余记号后面写&#xff1a;这些反复记号最主要的目的很简单&#xff0c;还是为了节约纸张&#xff0c…
阅读更多...
python如何安装numpy

python如何安装numpy

1. 根据python版本下载相应版本的numpy保存至D:\Program Files (x86)\Python\Python37\Scripts\ numpy下载地址 2. winR&#xff0c;输入cmd&#xff0c;打开命令行窗口&#xff0c;定位到python的安装目录 3. 输入python -m pip install numpy或定位到目录&#xff1a;D:\P…
阅读更多...
【C++】：C++中的STL序列式容器vector源码剖析

【C++】：C++中的STL序列式容器vector源码剖析

⛅️一 vector概述 vector的使用语法可以参考文章&#xff1a;​ 总的来说&#xff1a;vector是可变大小数组 特点&#xff1a; 支持快速随机访问。在尾部之外的位置插入或删除元素可能很慢 元素保存在连续的内存空间中&#xff0c;因此通过下标取值非常快 在容器中间位置添加…
阅读更多...
Laravel 框架中队列的使用

Laravel 框架中队列的使用

概述 Laravel 框架内置了强大的队列系统&#xff0c;用于处理异步任务、提高系统性能等。队列可以让任务异步执行&#xff0c;而不会阻塞当前进程&#xff0c;可以提高系统的处理能力。 Laravel 的队列系统支持多种驱动&#xff0c;如 Redis、Beanstalkd、SQS 等&#xff0c;…
阅读更多...
VSCode 搭建Java开发环境

VSCode 搭建Java开发环境

笔者使用最多的语言是C&#xff0c;也使用过不少其它语言&#xff0c;像Erlang&#xff0c;Python&#xff0c;Lua&#xff0c;C#等等&#xff0c;目前项目中在使用Go&#xff0c;但是没使用过Java。最近看到C#夺冠&#xff0c;首次荣获 TIOBE 年度编程语言&#xff0c;同时也看…
阅读更多...
计算机缺失msvcp140.dll的修复教程，教你快速解决dll问题

计算机缺失msvcp140.dll的修复教程，教你快速解决dll问题

“针对计算机系统中出现的msvcp140.dll文件丢失问题&#xff0c;小编将详细阐述一系列有效的解决方法。首先&#xff0c;msvcp140.dll是Microsoft Visual C Redistributable Package中的一个关键动态链接库文件&#xff0c;对于许多应用程序的正常运行至关重要。当系统提示该文…
阅读更多...
关于Python里xlwings库对Excel表格的操作（三十一）

关于Python里xlwings库对Excel表格的操作（三十一）

这篇小笔记主要记录如何【如何使用“Chart类”、“Api类"和“Axes函数”设置绘图区外框线型、颜色、粗细及填充颜色】。前面的小笔记已整理成目录&#xff0c;可点链接去目录寻找所需更方便。 【目录部分内容如下】【点击此处可进入目录】 &#xff08;1&#xff09;如何安…
阅读更多...
【DevOps-08-3】Jenkins容器内部使用Docker

【DevOps-08-3】Jenkins容器内部使用Docker

一、简要描述 构建镜像和发布镜像到harbor都需要使用到docker命令。而在Jenkins容器内部安装Docker官方推荐直接采用宿主机带的Docker即可。 设置Jenkins容器使用宿主机Docker。 二、配置和操作步骤 1、修改宿主机docker.sock权限 # 修改docker.sock 用户和用户组都为root $ …
阅读更多...
计算机找不到msvcr100.dll的多种解决方法分享，轻松解决dll问题

计算机找不到msvcr100.dll的多种解决方法分享，轻松解决dll问题

msvcr100.dll作为系统运行过程中不可或缺的一部分&#xff0c;它的主要功能在于提供必要的运行时支持&#xff0c;确保相关应用程序能够顺利完成编译和执行。因此&#xff0c;当操作系统或应用程序在运行阶段搜索不到该文件时&#xff0c;自然会导致各类依赖于它的代码无法正常…
阅读更多...
vue3+acro实现日期组件可以直接展示在界面上，不用非得弹框展示

vue3+acro实现日期组件可以直接展示在界面上，不用非得弹框展示

前言&#xff1a; 在很多时候&#xff0c;我们使用日期组件的时候&#xff0c;不希望每次都是点击弹出日期弹框&#xff0c;而是&#xff0c;点击日期弹框直接能展示在界面上&#xff0c;在这里我们介绍下 使用 acro 来更加轻松的实现他的效果。 实现效果&#xff1a; 实现步骤…
阅读更多...
Skywalking UI页面中操作的各种实用功能汇总

Skywalking UI页面中操作的各种实用功能汇总

刚刚接触skywalking不久&#xff0c;在这里总结一下在UI页面中操作的各种实用功能&#xff0c;随着使用的不断深入&#xff0c;我也会对文章进行持续补充。 本文skywalking 的ui入口是官方demo &#xff0c;版本是10.0.0-SNAPSHOT-593bd05 http://demo.skywalking.apache.org…
阅读更多...
Linux(Debina12)系统安装

Linux(Debina12)系统安装

在开发或学习中&#xff0c;linux系统是我们必须要熟悉的系统&#xff0c;那么今天就记录一下&#xff0c;较为稳定&#xff0c;也是小编这几年当做开发环境的发行版吧 官网地址 https://www.debian.org 下载链接 http://mirrors.163.com/debian-cd/12.4.0/amd64/iso-dvd/ …
阅读更多...
【LeetCode每日一题】2085. 统计出现过一次的公共字符串（哈希表）

【LeetCode每日一题】2085. 统计出现过一次的公共字符串（哈希表）

2024-1-12 文章目录 [2085. 统计出现过一次的公共字符串](https://leetcode.cn/problems/count-common-words-with-one-occurrence/)思路&#xff1a;哈希表计算 2085. 统计出现过一次的公共字符串 思路&#xff1a;哈希表计算 1.用两个哈希表分别统计word1和word2中字符出现的…
阅读更多...
MySQL表结构转换为ES索引Mapping

MySQL表结构转换为ES索引Mapping

背景 日常开发过程中肯定会存在MySQL表数据迁移至ES的情况&#xff0c;以canal为例&#xff0c;数据迁移时需要提前在ES中创建索引Mapping&#xff0c;但是如果碰到字段特别的表时&#xff0c;创建Mapping将是一件耗费心神的事情。为了解决这些重复工作&#xff0c;我使用Pyth…
阅读更多...
C++学习笔记——多态与静态联编和动态联编

C++学习笔记——多态与静态联编和动态联编

目录 一、多态 二、静态联编&#xff08;Static Binding&#xff09;和动态联编&#xff08;Dynamic Binding&#xff09; 2.1静态联编 2.2动态联编 一、多态 是C中面向对象编程的一个核心概念&#xff0c;它允许派生类对象替代其基类对象&#xff0c;从而实现代码重用和扩…
阅读更多...
Jmeter接口自动化02--JMeter的安装和使用

Jmeter接口自动化02--JMeter的安装和使用

p02 高清B站视频链接 2.1 Windows环境 首先需要安装JDK&#xff0c;然后再部署JMeter。注意&#xff0c;JMeter对JDK的版本是有要求的&#xff0c;一般至少要JDK8&#xff0c;这也是目前开发过程中使用频繁的版本。 1. 安装JDK 从官网下载JDK&#xff1a;https://www.oracl…
阅读更多...
Abaqus2023安装下载教程

Abaqus2023安装下载教程

用钢铁意志&#xff0c;成就不平凡的人生。 今天博主整理了一下Abaqus2023安装下载教程&#xff0c;希望大家学习。 安装之前请关闭电脑所有杀毒软件和防火墙&#xff0c;并保证计算机名不是中文&#xff01;&#xff01;&#xff01;&#xff01; 1.首先创建一个用于Abaqus…
阅读更多...
从vue小白到高手，从一个内容管理网站开始实战开发第七天，登录功能后台功能设计--通用分页、枚举以及相关工具类

从vue小白到高手，从一个内容管理网站开始实战开发第七天，登录功能后台功能设计--通用分页、枚举以及相关工具类

上一篇实现了数据库访问层的相关功能，还没有了解的小伙伴可以去看前面文章实现的内容，因为每一篇内容都是连贯的，不学习的话可能下面的内容学习起来会有点摸不着头脑 从vue小白到高手，从一个内容管理网站开始实战开发第六天，登录功能后台功能设计--API项目中的登录实现(二…
阅读更多...
先锋WEB燃气收费系统 Upload.aspx 文件上传漏洞复现

先锋WEB燃气收费系统 Upload.aspx 文件上传漏洞复现

0x01 产品简介 先锋WEB燃气收费系统是一种先进的在线燃气收费解决方案，旨在简化和优化燃气收费的流程和管理。该系统基于Web平台，提供了一系列功能和工具，使燃气公司能够高效地进行收费、账单管理和客户服务。 0x02 漏洞概述 先锋WEB燃气收费系统/AjaxService/Upload.asp…
阅读更多...
最新文章

Copyright @ 2022~2023