Swift UIで実現したいこと
- 画面の上部にユーザー情報を表示する。
- ユーザー情報の下にタブを表示する。
- タブをタップまたはタブの下を横にスワイプして切り替えることができる。
- 画面全体をスクロールできるようにするが、ユーザー情報が画面からスクロールされると、タブは画面の上部に固定され、タブの下の領域のみがスクロール可能になるようにする。(ユーザーがスクロールを戻した場合、ユーザー情報が再び表示されるようにする。)
問題点
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()
Text("post")
//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("")
})
}
}