Skip to main content
1 / 3

SwiftUIで画面全体がスクロール可能なtabviewが実装できない

Swift UIで実現したいこと:

1.画面の上部にユーザー情報を表示する。
2.ユーザー情報の下にタブを表示する。
3.タブをタップまたはタブの下を横にスワイプして切り替えることができる。
4.画面全体をスクロールできるようにするが、ユーザー情報が画面からスクロールされると、タブは画面の上部に固定され、タブの下の領域のみがスクロール可能になるようにする。(ユーザーがスクロールを戻した場合、ユーザー情報が再び表示されるようにする。)
問題点:

1.ProfilePostをスクロールダウンした後、EventCollectionTopを右にスワイプすると、画面が完全に白くなり、何も表示されなくなります。(ただし、画面を上にスクロールすると、コンテンツが戻ってきます。)
以下に問題が発生しているコードを含めましたので、ご意見をいただけると幸いです。よろしくお願いします。

struct profile: View {

@State var selection = 0
@State var postHeight : CGFloat = 500
@State var collectionHeight : CGFloat = 500

var body: some View {
    
    ScrollView(showsIndicators: false){
        VStack{
            Text("sample")
            Text("sample")
            Text("sample")
            Text("sample")
            Text("sample")
            Text("sample")
            Text("sample")

            
            LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                Section {
                    TabView(selection: $selection) {
                        VStack {
                            ProfilePost(postHeight: $postHeight)
         

                            Spacer()
                        }
                        .tag(0)

                        VStack {

                            EventCollectionTop(collectionHeight: $collectionHeight)

                            Spacer()
                        }
                        .tag(1)

                    }
                  
                    .tabViewStyle(.page(indexDisplayMode: .never))
                    .frame(height: TabViewContentHeightFunc(selection: selection, content1: postHeight, content2: collectionHeight))

                } header: {
                    HStack{
                        Spacer()
                        Tabbar(tabItems: ["post", "event"], selection: $selection, fontSize: .callout)
                            .frame(width: 200)
                        Spacer()
                    }

                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(.white)
                }
            }
        }
    }
}

}

func TabViewContentHeightFunc(selection: Int, content1: CGFloat, content2: CGFloat) -> CGFloat{

    switch selection{
    case 0:
        return content1
    case 1:
        return content2
    default:
        return 500
    }

}

struct ProfilePost: View {
@Binding var postHeight : CGFloat
let row = [
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",
"jjklda",

]
var body: some View {
        VStack{
            
            ForEach(row, id: \.self){ item in
                Text(item)
                    .frame(height: 90)
            }
            Text("\(postHeight)")
  

        }
  
    .background(GeometryReader{ geometry -> Text in
        postHeight = geometry.size.height
        return Text("")
    })
}

}

struct EventCollectionTop: View {
@Binding var collectionHeight : CGFloat
let row = [
"rikata",
"rikata",

]
var body: some View {
        VStack{
            Text("Hello, World!")
            Text("\(collectionHeight)")
            ForEach(row, id: \.self){ item in
                Text(item)
                    .frame(height: 50)
            }

        }
    
    .background(GeometryReader{ geometry -> Text in
        collectionHeight = geometry.size.height
        return Text("")
    })    }

}