自定义布局

深入理解 SwiftUI 的 Layout 协议，掌握创建自定义布局容器的方法

SwiftUI 提供了丰富的内置布局容器（如 HStack、VStack、Grid），但当这些容器无法满足特定需求时，可以通过实现 Layout 协议来创建自定义布局容器。本文详细介绍 SwiftUI 自定义布局的核心概念和实现方法。

概述

自定义布局允许你完全控制子视图的尺寸计算和位置放置。通过实现 Layout 协议，你可以：

创建符合特定设计需求的布局容器
实现内置容器无法完成的复杂排列逻辑
在不同布局类型之间创建动画转换

Layout 协议

Layout 协议是创建自定义布局的核心，它定义了布局容器的几何特性。

核心方法

实现自定义布局至少需要实现两个核心方法：

struct BasicVStack: Layout {
    func sizeThatFits(
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) -> CGSize {
        // 计算并返回布局容器的尺寸
        let sizes = subviews.map { $0.sizeThatFits(proposal) }
        let width = sizes.map { $0.width }.max() ?? 0
        let height = sizes.map { $0.height }.reduce(0, +)
        return CGSize(width: width, height: height)
    }

    func placeSubviews(
        in bounds: CGRect,
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) {
        // 告诉每个子视图应该出现的位置
        var y = bounds.minY
        for subview in subviews {
            let size = subview.sizeThatFits(proposal)
            subview.place(
                at: CGPoint(x: bounds.minX, y: y),
                proposal: ProposedViewSize(size)
            )
            y += size.height
        }
    }
}

使用自定义布局的方式与内置容器相同：

BasicVStack {
    Text("第一个子视图")
    Text("第二个子视图")
    Image(systemName: "star.fill")
}

添加布局参数

可以为布局添加参数来控制其行为：

struct FlexibleVStack: Layout {
    var alignment: HorizontalAlignment
    var spacing: CGFloat
    
    func sizeThatFits(
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) -> CGSize {
        let sizes = subviews.map { $0.sizeThatFits(proposal) }
        let width = sizes.map { $0.width }.max() ?? 0
        let height = sizes.map { $0.height }.reduce(0, +) 
                   + spacing * CGFloat(max(0, subviews.count - 1))
        return CGSize(width: width, height: height)
    }
    
    func placeSubviews(
        in bounds: CGRect,
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) {
        var y = bounds.minY
        for subview in subviews {
            let size = subview.sizeThatFits(proposal)
            let x: CGFloat
            
            switch alignment {
            case .leading:
                x = bounds.minX
            case .trailing:
                x = bounds.maxX - size.width
            default:
                x = bounds.midX - size.width / 2
            }
            
            subview.place(
                at: CGPoint(x: x, y: y),
                proposal: ProposedViewSize(size)
            )
            y += size.height + spacing
        }
    }
}

使用时传入参数：

FlexibleVStack(alignment: .leading, spacing: 10) {
    Text("左对齐")
    Text("带间距的布局")
}

可选方法

Layout 协议提供了其他可选方法来支持更多功能：

显式对齐

func explicitAlignment(
    of guide: HorizontalAlignment,
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout ()
) -> CGFloat? {
    // 返回指定对齐指南的位置
    return nil  // 使用默认行为
}

间距偏好

func spacing(
    subviews: Subviews,
    cache: inout ()
) -> ViewSpacing {
    // 返回布局容器的间距偏好
    return ViewSpacing()
}

布局属性

var layoutProperties: LayoutProperties {
    var properties = LayoutProperties()
    properties.stackOrientation = .vertical
    return properties
}

缓存机制

对于复杂的布局计算，可以使用缓存来提升性能：

struct CachedLayout: Layout {
    struct Cache {
        var sizes: [CGSize] = []
    }
    
    func makeCache(subviews: Subviews) -> Cache {
        Cache()
    }
    
    func updateCache(_ cache: inout Cache, subviews: Subviews) {
        cache.sizes = subviews.map { 
            $0.sizeThatFits(.unspecified) 
        }
    }
    
    func sizeThatFits(
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout Cache
    ) -> CGSize {
        // 使用缓存的尺寸信息
        let width = cache.sizes.map { $0.width }.max() ?? 0
        let height = cache.sizes.map { $0.height }.reduce(0, +)
        return CGSize(width: width, height: height)
    }
    
    func placeSubviews(
        in bounds: CGRect,
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout Cache
    ) {
        var y = bounds.minY
        for (index, subview) in subviews.enumerated() {
            subview.place(
                at: CGPoint(x: bounds.minX, y: y),
                proposal: ProposedViewSize(cache.sizes[index])
            )
            y += cache.sizes[index].height
        }
    }
}

布局子视图代理

LayoutSubview

LayoutSubview 是子视图的代理，提供了访问子视图信息和放置子视图的方法。

获取子视图尺寸

let size = subview.sizeThatFits(proposal)
let dimensions = subview.dimensions(in: proposal)

放置子视图

subview.place(
    at: CGPoint(x: 100, y: 100),
    anchor: .topLeading,
    proposal: ProposedViewSize(width: 200, height: 100)
)

访问布局优先级

let priority = subview.priority

LayoutSubviews

LayoutSubviews 是 LayoutSubview 的集合，支持标准的集合操作：

func placeSubviews(
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Subviews,
    cache: inout ()
) {
    // 遍历所有子视图
    for (index, subview) in subviews.enumerated() {
        // 处理每个子视图
    }
    
    // 访问特定子视图
    if let first = subviews.first {
        // 处理第一个子视图
    }
    
    // 获取布局方向
    let direction = subviews.layoutDirection
}

布局配置

ProposedViewSize

ProposedViewSize 表示对视图尺寸的提议，是布局系统中尺寸协商的核心概念。

标准提议

// 零尺寸提议
let zero = ProposedViewSize.zero

// 无限尺寸提议
let infinity = ProposedViewSize.infinity

// 未指定尺寸提议
let unspecified = ProposedViewSize.unspecified

自定义提议

// 指定宽度和高度
let proposal = ProposedViewSize(width: 200, height: 100)

// 从 CGSize 创建
let size = CGSize(width: 300, height: 150)
let proposal = ProposedViewSize(size)

// 替换未指定的维度
let modified = proposal.replacingUnspecifiedDimensions(
    by: CGSize(width: 100, height: 50)
)

使用示例

struct AdaptiveLayout: Layout {
    func sizeThatFits(
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) -> CGSize {
        // 根据提议的尺寸调整布局策略
        if let width = proposal.width, width < 300 {
            // 窄屏幕布局
            return compactLayout(subviews: subviews)
        } else {
            // 宽屏幕布局
            return regularLayout(subviews: subviews)
        }
    }
    
    private func compactLayout(subviews: Subviews) -> CGSize {
        // 实现紧凑布局
        CGSize(width: 200, height: 400)
    }
    
    private func regularLayout(subviews: Subviews) -> CGSize {
        // 实现常规布局
        CGSize(width: 400, height: 200)
    }
    
    func placeSubviews(
        in bounds: CGRect,
        proposal: ProposedViewSize,
        subviews: Subviews,
        cache: inout ()
    ) {
        // 放置子视图
    }
}

LayoutProperties

LayoutProperties 描述布局容器的特性：

struct StackLikeLayout: Layout {
    var layoutProperties: LayoutProperties {
        var properties = LayoutProperties()
        properties.stackOrientation = .vertical
        return properties
    }
    
    // 实现其他必需方法...
}

ViewSpacing

ViewSpacing 存储视图的间距偏好，可以为不同边缘和不同类型的相邻视图指定不同的间距值：

func spacing(
    subviews: Subviews,
    cache: inout ()
) -> ViewSpacing {
    var spacing = ViewSpacing()
    
    // 可以根据子视图的间距偏好计算容器的间距
    for subview in subviews {
        let subviewSpacing = subview.spacing
        // 合并间距信息
    }
    
    return spacing
}