结合导航栏,tabview和可搜索的导致导航栏UI问题与列表

发布于 2025-01-28 03:14:44 字数 2763 浏览 4 评论 0原文

在第二个选定选项卡上滚动时,将导航栏,TABVIEW和可搜索的搜索结合起来会导致NavigationBar和Search InputField保持固定。

如果我在下面运行代码,然后首先单击“书签”选项卡并将列表滚动滚动,我将获得所需的结果,如图1 所示。

如果我立即在“书签”选项卡之后单击“主页”选项卡并将列表滚动滚动,则会在导航标头下方显示列表的不良效果,如图2 所示。

您单击“选项卡”的顺序会产生不同的效果,而您最后一次离开列表之前的位置也对行为产生了一些奇怪的影响。

我需要使用TABVIEW,因为当您从选项卡移到选项卡时,它会“记住”列表的位置。创建自己的选项卡控件会使列表每次显示时重置,我了解原因。我们还需要在NavigationView下包装TabView,因为我们的应用程序子视图需要显示自己的选项卡。

我的问题,我做错了什么,这导致导航标题中这些不一致之处。我尝试将每个列表放在自己的堆栈中,但没有快乐,同样的问题也在发生。

任何援助都将不胜感激,由于这种异常,我们目前对导航设计被阻止。希望它是故障,以便我们可以纠正它。

”图2“

----->完整的代码&-------------------------------------------------------------------------------- -----------

struct ContentView: View {
    @State var selectedTab: String = "Home"
    @State var searchText: String = ""
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                ListView(itemTitle: "Home List", itemCount: 50)
                    .tabItem {
                        Image(systemName: "house.fill")
                        Text("Home")
                    }.tag("Home")
             
                ListView(itemTitle: "Bookmark List", itemCount: 20)
                    .tabItem {
                        Image(systemName: "bookmark.circle.fill")
                        Text("Bookmark")
                    }.tag("Bookmark")
             
                Text("Profile Tab")
                    .tabItem {
                        Image(systemName: "person.crop.circle")
                        Text("Profile")
                    }.tag("Profile")
            }
            .navigationTitle(selectedTab)
        }
        .searchable(text: $searchText)
        .onSubmit(of: .search) {
            // Do something
        }
    }
}

struct ListView: View {
    var itemTitle: String
    var itemCount: Int
    var body: some View {
        List(){
            ForEach(1...itemCount,id: \.self){ i in
                NavigationLink(destination: ListViewDetailView("\(itemTitle) \(i)")) {
                    VStack(alignment: .leading){
                        Text("\(itemTitle) \(i)").padding()
                    }
                }
            }
        }
    }
}

struct ListViewDetailView: View {
    var text:String
    
    init(_ text: String){
        self.text = text
    }
    
    var body: some View {
        Text(text).navigationTitle(Text("\(text) Detail"))
    }
}

Combining Navigation Bar, TabView and searchable causes the NavigationBar and Search InputField to stay stationary when scrolling up on the second selected tab.

If I run the code below and first click on the Bookmark tab and scroll the list up, I get the desired results as shown in Figure 1.

If I immediately click the Home tab after the Bookmark tab and scroll the list up, I get an undesirable effect of the list displaying underneath the navigation header as shown in Figure 2.

The order that you click on the tabs produces different effects, and the position you last left the list before going to the next tab also has some strange influence on the behavior.

I need to use the TabView because it "remembers" the position of the list when you move from tab to tab. Creating my own tab control causes the list to reset everytime its displayed and I understand why. We also need to wrap the TabView under the NavigationView because our application subviews need to display their own tabs.

My questions, what am I doing wrong that is causing these inconsistencies in the navigation header. I have tried putting each list in it's own Stack but no joy, same issue keeps happening.

Any assistance would be greatly appreciated, we are currently blocked on our navigation design because of this anomaly. Hoping it's out fault so we can correct it.

Figure 1Figure 2

----> the complete code <-------------------------------------------------------

struct ContentView: View {
    @State var selectedTab: String = "Home"
    @State var searchText: String = ""
    
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                ListView(itemTitle: "Home List", itemCount: 50)
                    .tabItem {
                        Image(systemName: "house.fill")
                        Text("Home")
                    }.tag("Home")
             
                ListView(itemTitle: "Bookmark List", itemCount: 20)
                    .tabItem {
                        Image(systemName: "bookmark.circle.fill")
                        Text("Bookmark")
                    }.tag("Bookmark")
             
                Text("Profile Tab")
                    .tabItem {
                        Image(systemName: "person.crop.circle")
                        Text("Profile")
                    }.tag("Profile")
            }
            .navigationTitle(selectedTab)
        }
        .searchable(text: $searchText)
        .onSubmit(of: .search) {
            // Do something
        }
    }
}

struct ListView: View {
    var itemTitle: String
    var itemCount: Int
    var body: some View {
        List(){
            ForEach(1...itemCount,id: \.self){ i in
                NavigationLink(destination: ListViewDetailView("\(itemTitle) \(i)")) {
                    VStack(alignment: .leading){
                        Text("\(itemTitle) \(i)").padding()
                    }
                }
            }
        }
    }
}

struct ListViewDetailView: View {
    var text:String
    
    init(_ text: String){
        self.text = text
    }
    
    var body: some View {
        Text(text).navigationTitle(Text("\(text) Detail"))
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文