Skip to main content
本文に 10 文字追加
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

Swift UIで実現したいこと:

Swift UIで実現したいこと

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

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

問題点

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

Swift UIで実現したいこと:

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

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

Swift UIで実現したいこと

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

問題点

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

format
ソース リンク
zunda
  • 1,214
  • 2
  • 11
  • 28
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 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 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("")
    })    }
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("")
        })
    }
}
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("")
    })    }

}

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("")
        })
    }
}
ソース リンク

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("")
    })    }

}