SwiftUI中OrderedList组件同层级元素布局对齐问题求助

我正在开发一款类似 HTML <ol> 标签的OrderedList组件，可自动为任意数量的元素编号并布局。组件基于_VariadicView.Tree和自定义_VariadicView_UnaryViewRoot布局实现，配合作为<li>标签等效组件的ListElement使用，ListElement可包含任意标签及可选子视图。

当前遇到布局问题：同一层级的元素leading未对齐，编号文本宽度不一致（比如1、10、100这类编号宽度不同，导致内容区偏移）。我需要实现同层级元素leading对齐，所有编号文本宽度统一。

虽可通过Grid实现该布局，但因需支持列表嵌套，且项目部署目标为iOS15（Grid无法满足），故考虑使用自定义HorizontalAlignment或Layout解决，但尚未理清实现思路，特此求助。

针对iOS15的限制，推荐用偏好键（PreferenceKey）+ 自定义对齐方式的方案，核心是先收集当前层级所有编号的最大宽度，再让每个编号区域统一使用这个宽度，同时通过自定义对齐确保内容区leading对齐。

步骤1：定义偏好键收集编号宽度 #

用来在视图树中传递当前层级所有编号的最大宽度：

struct NumberWidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

步骤2：自定义HorizontalAlignment #

创建专属对齐标识，确保内容区的leading能对齐到同一位置：

extension HorizontalAlignment {
    private struct NumberContentAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.leading]
        }
    }
    static let numberContentAligned = HorizontalAlignment(NumberContentAlignment.self)
}

步骤3：改造ListElement组件 #

让编号文本的宽度被偏好键收集，同时使用自定义对齐绑定内容区：

struct ListElement<Content: View>: View {
    let number: String
    let content: Content
    @Environment(\.maxNumberWidth) private var maxNumberWidth
    
    var body: some View {
        HStack(spacing: 8, alignment: .firstTextBaseline) {
            // 编号区域：用最大宽度约束，右对齐符合ol标签样式
            Text(number)
                .background(
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: NumberWidthPreferenceKey.self, value: proxy.size.width)
                    }
                )
                .frame(width: maxNumberWidth, alignment: .trailing)
            
            // 内容区：绑定自定义对齐，确保所有内容leading对齐
            content
                .alignmentGuide(.numberContentAligned) { $0[.leading] }
        }
    }
}

步骤4：为OrderedList添加环境变量传递最大宽度 #

在OrderedList中监听偏好键的变化，将最大宽度通过环境变量传递给所有子ListElement：

// 定义环境键存储最大编号宽度
private struct MaxNumberWidthKey: EnvironmentKey {
    static var defaultValue: CGFloat = 0
}

extension EnvironmentValues {
    var maxNumberWidth: CGFloat {
        get { self[MaxNumberWidthKey.self] }
        set { self[MaxNumberWidthKey.self] = newValue }
    }
}

struct OrderedList<Content: View>: View {
    let content: Content
    @State private var maxNumberWidth: CGFloat = 0
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        _VariadicView.Tree(OrderedListRoot()) {
            content
        }
        .onPreferenceChange(NumberWidthPreferenceKey.self) { newValue in
            maxNumberWidth = newValue
        }
        .environment(\.maxNumberWidth, maxNumberWidth)
        // 嵌套列表时添加缩进，强化视觉层级
        .padding(.leading, 16)
    }
}

嵌套支持说明 #

每个OrderedList实例会独立统计自身层级的编号最大宽度，嵌套时内层列表的编号宽度不会影响外层，配合padding(.leading)的缩进设置，完全符合HTML<ol>的嵌套表现。

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