swift TabView内的内容在ScrollView内未增长

bkhjykvo  于 2023-04-19  发布在  Swift
关注(0)|答案(2)|浏览(126)

我在我的项目中面临着非常严重的问题。情况是这样的。
一个SwiftUi屏幕有NavigationBar -〉Sticky Header -〉Horizontal TabBarItems -〉TabView,那么每个TabView都有它自己的View,根据需要使用ListViewScrollView
问题是ListViewScrollView不是自动增长的内容,甚至its not visible until not giving the height to TabView or ContentView,我不能计算内容的高度,并把它给页面,因为内容吃太动态和大。
示例代码如下-

struct ContentView: View {
    var body: some View {
        VStack {
            VStack{
                Text("Sticky Header")
            }
            ScrollView {
                HeaderView()
                
                CustomTabView()
                    .frame(height: 100) <--- I don't want to give this height anymore.
            }
        }
        .padding()
    }
}
struct HeaderView: View {
    var body: some View {
       Image("W")
            .resizable()
            .frame(minWidth: 0, maxWidth: .infinity)
            .frame(height: 200)
    }
}

struct CustomTabView: View {
    var body: some View {
        TabView(content: {
            FirstTavView()
            FirstTavView()
            FirstTavView()
        })
        .tabViewStyle(.page(indexDisplayMode: .never))
    }
}

struct FirstTavView: View {
    var body: some View {
        List(0..<100) { index in
            Text("Index number is --- > \(index)")
        }
    }
}

线框是:

h5qlskok

h5qlskok1#

LazyVStack(spacing: 1, pinnedViews: [.sectionHeaders]) {
    // ...
}

你的解决方案只是通过pinnedViews使用LazyVStack和StickeyHeader。里面的布局会随着你的内容而增长。并通过为tabview设置框架来控制你的父级。

TabView(content: {
            FirstTavView()
            FirstTavView()
            FirstTavView()
        })
        .frame(w : h)
        .tabViewStyle(.page(indexDisplayMode: .never))

    ```
h9a6wy2h

h9a6wy2h2#

我是这个技术的新手,但我想我有解决方案。

LazyVGrid(columns: Array(repeating: GridItem(.flexible(),spacing: 4), count: 3), spacing: 4,content: {
            ForEach(1...19,id: \.self) {index in
                   GeometryReader { post in
//
                           let width = post.frame(in: .global).width
                                    
                            ImageView(index: index, width: width)
                      }
                                .frame(height: 120)

相关问题