类似 SwiftUI FlowLayout 的视图溢出 VStack 中的其他视图

如何解决类似 SwiftUI FlowLayout 的视图溢出 VStack 中的其他视图

我在 StackOverflow 上发现了一些关于创建灵活布局 (FlowLayout) 的问题，比如通常会显示标签，根据文本使用不同的按钮宽度，如有必要，可以在多行中显示。

代码类似于：

@State var buttonStrings:[String]=[String]()


init()
{
    self.buttonStrings=createStrings()
}


private func item(for text: String) -> some View {
    
Button(action:{doSomething()})
{
Text(text)
}

}

private func generateContent(in g: GeometryProxy) -> some View {
        var width = CGFloat.zero
        var height = CGFloat.zero

        return ZStack(alignment: .topLeading) {
            ForEach(self.buttonStrings,id: \.self) { string in
                self.item(for: string)
                    .padding([.horizontal,.vertical],4)
                    .alignmentGuide(.leading,computeValue: { d in
                        if (abs(width - d.width) > g.size.width)
                        {
                            width = 0
                            height -= d.height
                        }
                        let result = width
                        if string == self.buttonStrings.last! {
                            width = 0 //last item
                        } else {
                            width -= d.width
                        }
                        return result
                    })
                    .alignmentGuide(.top,computeValue: {d in
                        let result = height
                        if string == self.buttonStrings.last! {
                            height = 0 // last item
                        }
                        return result
                    })
            }
        }
    }

它可以工作，但是当这种视图在 vstack 内部并且另一个视图跟随时，它会垂直溢出到另一个视图上（或者根据布局配置和 Stacks 的存在将其驱逐到底部）。

如何避免这种情况，灵活的视图不会溢出或太大？ 事实上，它内部的 Views 被置换了，这导致了这个问题。

解决方法

使用该代码的正确方法是

struct FlowLayoutLikeView:View
{
    var geometry:GeometryProxy
    @State var buttonStrings:[String]=[String]()

    init(geometry:GeometryProxy,....)
    {
    self.geometry=geometry
    ...
    ...
    }

var body: some View {

        self.generateContent(in: geometry)
           
    }

private func item(for text: String) -> some View {

    Button(action:{doSomething()})
    {
        Text(text)
    }

}

private func generateContent(in g: GeometryProxy) -> some View {
    var width = CGFloat.zero
    var height = CGFloat.zero

    return ZStack(alignment: .topLeading) {
        ForEach(self.buttonStrings,id: \.self) { string in
            self.item(for: string)
                .padding([.horizontal,.vertical],4)
                .alignmentGuide(.leading,computeValue: { d in
                    if (abs(width - d.width) > g.size.width)
                    {
                        width = 0
                        height -= d.height
                    }
                    let result = width
                    if string == self.buttonStrings.last! {
                        width = 0 //last item
                    } else {
                        width -= d.width
                    }
                    return result
                })
                .alignmentGuide(.top,computeValue: {d in
                    let result = height
                    if string == self.buttonStrings.last! {
                        height = 0 // last item
                    }
                    return result
                })
        }
    }
}

包含视图必须像

var body: some View {
    VStack //this does the trick,do not remove
    {

        GeometryReader { geometry in
        
            VStack //this also does the trick,do not remove
            {
            FlowLayoutLikeView(geometry)

            AnotherView() //this will be fine,it will be placed below the FlowLayoutLikeView,no overlapping,overflowing or ousting

            }
        }
    }
}