SwiftUI 布局问题与 Vstack 不给子视图固定框架高度

时间:2021-02-02 12:01:46

标签: swiftui

当我将 VStack 视图添加到 Text PartnerCarouselView 中时,我在尝试让我的视图在 VStack 中正确布局时遇到问题。

因此,在添加 Text 视图之前,代码如下所示并且呈现良好。

ContentView

import SwiftUI

struct ContentView: View {
    let items = 1...10

    let rows = [
        GridItem()
    ]

    var body: some View {
        ScrollView {
            VStack {
                PartnerCarouselView()
                PartnerCarouselView()
                PartnerCarouselView()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
import SwiftUI

struct PartnerCarouselView: View {

    let items = 1...10

    let rows = [
        GridItem()
    ]

    var body: some View {
        VStack {
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHGrid(rows: rows, alignment: .top, spacing: 10) {
                    ForEach(items, id: \.self) { item in
                        PartnerCarouselItemView()
                    }
                }
            }
        }
    }
}

struct PartnerCarouselView_Previews: PreviewProvider {
    static var previews: some View {
        PartnerCarouselView()
    }
}

但是,当我更新我的 PartnerCarouselView 以包含如下所示的 Text 视图时……

    var body: some View {
        VStack {
            Text("Title")
            ScrollView(.horizontal, showsIndicators: false) {
                LazyHGrid(rows: rows, alignment: .top, spacing: 10) {
                    ForEach(items, id: \.self) { item in
                        PartnerCarouselItemView()
                    }
                }
            }
        }
    }

……整个视图被彼此重叠的视图弄得一团糟:

overlapping view

到目前为止,我已经明白,如果我给每个视图一个固定的框架,如下所示……

    VStack {
        Text("Title").frame(height: 21)
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHGrid(rows: rows, alignment: .top, spacing: 10) {
                ForEach(items, id: \.self) { item in
                    PartnerCarouselItemView()
                }
            }.frame(height: 350)
        }.frame(height: 350)
    }

...视图将布局良好。但是我希望我的视图能够动态调整大小,这就是为什么我没有提供任何固定高度的框架。有什么方法可以确保 VStack 布局中的所有子视图都正确,而不提供固定高度的框架?

0 个答案:

没有答案