I am working on a NumberedList component which works like the <ol> tag in HTML. I’d like to be able provide an arbitrary number of elements, that would be automatically numbered and laid out. However there is one aspect of the layout I can’t quite figure out.

I have created an OrderedList view (the equivalent of the <ol> HTML tag), which is using a _VariadicView.Tree and a custom _VariadicView_UnaryViewRoot layout.

public struct OrderedList<Content: View>: View {
    let content: Content
    
    @Environment(.listLevel)
    var level
    
    public init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    public var body: some View {
        let layout = OrderedListLayout(level: level)
        
        _VariadicView.Tree(layout) {
            content
        }
    }
}

struct OrderedListLayout: _VariadicView_UnaryViewRoot {
    let level: ListLevel
    
    @ViewBuilder
    func body(children: _VariadicView.Children) -> some View {
        let padding: Double = switch level {
        case .first:
            8
        case .second, .third:
            -6
        }
        
        VStack(alignment: .leading, spacing: 8) {
            ForEach(Array(children.enumerated()), id: .element.id) { index, child in
                HStack(alignment: .centerOfFirstLine, spacing: 8) {
                    Text(verbatim: "(index + 1).")
                    
                    child
                }
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.leading, padding)
    }
}

This list is meant to be used with a ListElement view (the equivalent of the <li> HTML tag), which can contain an arbitrary label and an optional child view.

public struct ListElement<Label: View, Child: View>: View {
    let label: Label
    
    let child: Child?
    
    @Environment(.listLevel)
    var level
    
    public init(@ViewBuilder label: () -> Label, @ViewBuilder child: () -> Child) {
        self.label = label()
        self.child = child()
    }
    
    public var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            label
            
            if let child {
                child
                    .environment(.listLevel, level.next())
            }
        }
    }
}

public extension ListElement where Child == EmptyView {
    init(@ViewBuilder label: () -> Label) {
        self.label = label()
        self.child = nil
    }
}

This screenshot shows the current result. I have added a green border to the numbering texts and blue border to the list elements to better show how they are not aligned. I would like to be able to lay out the elements so that the leading of all elements in the same list level are aligned. Essentially I want all numbering texts to have the same width.

I could have technically used a Grid to help with that kind of layout. However, I don’t think this would work since I want to be able to nest multiple lists if needed. I think the solution would probably lie in either using a custom HorizontalAlignment guide or a custom Layout, but I can’t quite wrap my head around it.

EDIT: I forgot to mention that my project has a deployment target of iOS 15. Nesting Grids actually works to achieve the layout I want, but doesn’t meet the deployment target.