前言

  1. SwiftUI的原生布局中没有供给相对布局的Layout。但是像聊天气泡这类的View基本上不会沾满容器的宽。一般会设置为占比容器宽度的80%
  2. 幸运的是SwiftUI供给了Layout布局协议，让咱们能够自定义一种布局

SwiftUI中的布局原理如下图所示

在SwiftUI中自定义一个百分比Layout

  1. 容器给子视图一个主张的Size
  2. 子视图渲染并回来它的Size
  3. 容器根据对齐规矩，将子视图放置到对应方位

构建相对布局

完成布局Layout

经过完成Layout协议，咱们构建相对布局。经过供给宽高的最大占比，来调整传递给子视图的主张大小

// 自定义相对布局，注意只能包裹1个子视图
// 经过将布局定义为fileprivate并为View添加一个扩展，咱们能够保证使用的时分只有一个子视图
fileprivate struct RelativeSizeLayout: Layout {
    // width相对百分比0~1
    var relativeWidth: Double
    // height相对百分比0~1
    var relativeHeight: Double
    // 这是布局的第一步和第二步。父容器传递proposal下来，咱们作为自视图将Size回来
    func sizeThatFits(
        proposal: ProposedViewSize, 
        subviews: Subviews, 
        cache: inout ()
    ) -> CGSize {
        assert(subviews.count == 1, "expects a single subview")
        let resizedProposal = ProposedViewSize(
            width: proposal.width.map { $0 * relativeWidth },
            height: proposal.height.map { $0 * relativeHeight }
        )
        return subviews[0].sizeThatFits(resizedProposal)
    }
    // 在这个方法里对子视图进行布局
    func placeSubviews(
        in bounds: CGRect, 
        proposal: ProposedViewSize, 
        subviews: Subviews, 
        cache: inout ()
    ) {
        assert(subviews.count == 1, "expects a single subview")
        let resizedProposal = ProposedViewSize(
            width: proposal.width.map { $0 * relativeWidth },
            height: proposal.height.map { $0 * relativeHeight }
        )
        subviews[0].place(
            at: CGPoint(x: bounds.midX, y: bounds.midY), 
            anchor: .center, 
            proposal: resizedProposal
        )
    }
}

给 View 扩展一个便当的使用方法

extension View {
    /// Proposes a percentage of its received proposed size to `self`.
    public func relativeProposed(width: Double = 1, 
                                height: Double = 1) -> some View {
        RelativeSizeLayout(relativeWidth: width,
                          relativeHeight: height) {
            // Wrap content view in a container to make sure the layout only
            // receives a single subview. Because views are lists!
            VStack { // alternatively: `_UnaryViewAdaptor(self)`
                self
            }
        }
    }
}

使用示例

let alignment: Alignment = message.sender == .me ? .trailing : .leading
chatBubble
    // 这里咱们能够设置气泡的最大宽度，然后再使用咱们的relativeProposed。这样能够保证气泡先约束在400以内，然后再走咱们的自定义Layout
    // .frame(maxWidth: 400)
    .relativeProposed(width: 0.8)
    .frame(maxWidth: .infinity, alignment: alignment)

阐明

  1. 咱们自定义的Layout仅仅将proposalSize进行了百分比核算后传递给了子视图，实际上最终布局的时分子视图的大小依然是子视图回来的size。
  2. SwiftUI中每使用一次modifier，你能够认为是在原有视图上加了一层父视图。而整个布局是从最顶层的屏幕大小开端逐层往下主张尺寸。所以在relativeProposed之前就现已约束了大小的modifier会先决议它的size。就和上面.frame(maxWidth: 400) .relativeProposed(width: 0.8)相同，会先约束最大400，然后才是父容器80%

材料

oleb.net/2023/swiftu…