如何让SwiftUI自定义Layout仅占用所需水平空间？

你的自定义Layout之所以会占满全部水平空间，核心问题是sizeThatFits方法里直接把父视图提供的maxWidth作为返回的宽度值，没有根据子视图的实际需求计算真实宽度。要让Layout仅占用实际所需空间，需要调整宽度计算逻辑：

修改步骤： #

1. 调整sizeThatFits的宽度计算逻辑 #

不再直接使用父视图的maxWidth，而是计算每行子视图的总宽度（包含间距），取所有行中最宽的那个值作为Layout的宽度。同时要处理父视图宽度为nil的情况（此时没有水平空间限制，所有子视图排成一行）。

2. 修正行生成逻辑（当无宽度约束时） #

当proposal.width为nil时，generateRows应该生成只有一行的数组，避免错误换行。

修改后的完整代码： #

struct ContentView: View {
    var body: some View {
        CustomLayout {
            Text("Hello")
        }
        .background(.blue)
    }
}

struct CustomLayout: Layout {
    var alignment: Alignment = .leading
    var spacing: CGFloat = 0
    
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        // 处理父视图无宽度约束的情况，用极大值让所有子视图排成一行
        let availableWidth = proposal.width ?? .infinity
        let rows = generateRows(availableWidth, proposal, subviews)
        
        // 计算每行的实际宽度，取最大值作为Layout的宽度
        let layoutWidth = rows.map { row in
            row.reduce(CGFloat.zero) { total, view in
                let viewWidth = view.sizeThatFits(proposal).width
                return total + viewWidth + spacing
            } - spacing // 减去最后一个子视图后面的多余间距
        }.max() ?? 0
        
        // 计算总高度
        let layoutHeight = rows.reduce(CGFloat.zero) { total, row in
            total + row.maxHeight(proposal) + spacing
        } - spacing // 减去最后一行后面的多余间距
        
        return CGSize(width: layoutWidth, height: layoutHeight)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        var origin = bounds.origin
        // 这里用Layout自己计算出的宽度，而不是bounds.width
        let layoutWidth = sizeThatFits(proposal: proposal, subviews: subviews, cache: &cache).width
        let rows = generateRows(layoutWidth, proposal, subviews)
        
        for row in rows {
            // 计算当前行的总宽度
            let rowTotalWidth = row.reduce(CGFloat.zero) { total, view in
                total + view.sizeThatFits(proposal).width + spacing
            } - spacing
            
            // 根据alignment计算行的起始x坐标
            origin.x = switch alignment {
            case .leading:
                bounds.minX
            case .trailing:
                bounds.maxX - rowTotalWidth
            case .center:
                bounds.minX + (bounds.width - rowTotalWidth) / 2
            default:
                bounds.minX
            }
            
            for view in row {
                let viewSize = view.sizeThatFits(proposal)
                view.place(at: origin, proposal: proposal)
                origin.x += viewSize.width + spacing
            }
            
            origin.y += row.maxHeight(proposal) + spacing
        }
    }
    
    func generateRows(_ maxWidth: CGFloat, _ proposal: ProposedViewSize, _ subviews: Subviews) -> [[LayoutSubviews.Element]] {
        var row: [LayoutSubviews.Element] = []
        var rows: [[LayoutSubviews.Element]] = []
        var currentRowWidth: CGFloat = 0
        
        for view in subviews {
            let viewSize = view.sizeThatFits(proposal)
            let requiredWidth = viewSize.width + (row.isEmpty ? 0 : spacing)
            
            // 只有当加入当前视图后超过最大宽度，且当前行不为空时才换行
            if !row.isEmpty && currentRowWidth + requiredWidth > maxWidth {
                rows.append(row)
                row.removeAll()
                currentRowWidth = 0
            }
            
            row.append(view)
            currentRowWidth += requiredWidth
        }
        
        if !row.isEmpty {
            rows.append(row)
        }
        
        return rows
    }
}

extension [LayoutSubviews.Element] {
    func maxHeight(_ proposal: ProposedViewSize) -> CGFloat {
        compactMap { $0.sizeThatFits(proposal).height }.max() ?? 0
    }
}

关键修改说明： #

• sizeThatFits方法：不再依赖父视图的宽度，而是计算每行子视图的总宽度（减去最后一个多余的间距），取最大值作为Layout的宽度；高度计算也优化了多余间距的处理。
• placeSubviews方法：使用Layout自身计算出的宽度来生成行，确保对齐逻辑基于真实的内容宽度。
• generateRows方法：优化了换行判断逻辑，避免空行或错误换行，同时处理了无宽度约束时的单行情况。

内容的提问来源于stack exchange，提问作者Ahmed Zaidan