简体   繁体   English

SwiftUI 中的多个 NavigationViews - 如何摆脱多个工具栏项目(即左上角的后退按钮)?

[英]Multiple NavigationViews in SwiftUI - How to get rid of multiple toolbar items (i.e the back-button on the left corner)?

I am making an app where the first view the users see is a home screen with buttons that takes them to a second view.我正在制作一个应用程序,用户看到的第一个视图是一个主屏幕,带有将他们带到第二个视图的按钮。 One of the second views present the user with a list of items.第二个视图之一向用户显示项目列表。 When the user clicks on one of these items the user comes to a detailed view of the item.当用户单击这些项目之一时,用户会看到该项目的详细视图。 When the user comes to the detailed view he is unfortunately presented with two toolbar buttons in the corner as can be seen here:当用户进入详细视图时,不幸的是,他在角落里看到了两个工具栏按钮,如下所示:

工具栏按钮 . .

I know that one of the solutions is to only have one navigationview and that solves my problem.我知道其中一种解决方案是只有一个导航视图,这解决了我的问题。 But I need to have toolbar items in my listview to be able to add more items, sort the list and have the list searchable which I'm not able to do without navigationView.但是我需要在我的列表视图中包含工具栏项,以便能够添加更多项、对列表进行排序并使列表可搜索,如果没有 navigationView,我将无法做到这一点。 I Have tried using scrollView and NavigationStack but it comes out blank.我尝试过使用 scrollView 和 NavigationStack,但它是空白的。

Does anyone have an idea how to work with mulitple views, not getting double up "back buttons" on the toolbar and still have other toolbar items?有谁知道如何使用多个视图,而不是在工具栏上加倍“后退按钮”并且仍然有其他工具栏项目?

View one: (Home Screen):查看一:(主屏幕):

NavigationView {
            ZStack {
                VStack {
                    Text(title)
                        .font(.custom("Glacial Indifference", size: 34, relativeTo: .headline).weight(.bold))
                        .multilineTextAlignment(.leading)
                        .foregroundColor(.white)
                        .tracking(10)
                        .padding(8)
                        .background(
                            Rectangle()
                                .fill(.gray)
                                .frame(width: 1000, height: 150)
                                .ignoresSafeArea()
                                .opacity(0.5))
                    Spacer()
                }
                VStack {
                    NavigationLink {
                        MapView()
                    } label: {
                        Buttons(str: "Cheese Map")
                    }
                    .padding(.bottom, 200)
                }
                VStack {
                    NavigationLink {
                        TabView()
                    } label: {
                        Buttons(str: "Cheese List")
                    }
                    .padding(.bottom, 400)
                }

Second View (list):第二视图(列表):

NavigationView {
            List {
                ForEach(items, id: \.id) { item in
                    NavigationLink {
                        ItemView(item: item)
                    } label: {
                        ListItem(item: item)
                    }
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {
                        showingAddItem = true
                    } label: {
                        Image(systemName: "plus")
                        Text("Add Item")
                            .font(.footnote)
                            .italic()
                    }
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Menu("Sort") {
                        Picker("Filter Options", selection: $selectedSort) {
                            ForEach(sortOptions, id: \.self) {
                                value in
                                Text(value)
                                    .tag(value)
                            }
                        }
                    }
                    .onChange(of: selectedSort) { _ in
                        let sortBy = sorts[sortOptions.firstIndex(of: selectedSort)!]
                        items.sortDescriptors = sortBy.descriptors
                    }
                }
            }
            .sheet(isPresented: $showingAddItems) {
                AddItemsView(items: Items())
            }
            .navigationTitle("Item List")
            
            .searchable(text: $searchText)
        }
    }
}

DetailView:详细视图:

ScrollView {
            ZStack {
                VStack {

//More code...

Both .toolbar and .searchable find the nearest enclosing NavigationView automatically. .toolbar.searchable自动找到最近的封闭NavigationView You do not need a NavigationView in your list view.您的列表视图中不需要NavigationView

Here's a self-contained demo.这是一个独立的演示。 It looks like this:它看起来像这样:

推送使用工具栏和可搜索修饰符的视图的演示。

Here's the code:这是代码:

import SwiftUI
import PlaygroundSupport

struct HomeScreen: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Cheese Map") { Text("Map") }
                NavigationLink("Cheese List") { ListView() }
            }
            .navigationTitle("Home Screen")
        }
        .navigationViewStyle(.stack)
    }
}

struct ListView: View {
    @State var items = ["Cheddar", "Swiss", "Edam"]
    @State var search: String = ""

    var filteredItems: [String] {
        return items.filter {
            search.isEmpty
            || $0.localizedCaseInsensitiveContains(search)
        }
    }

    var body: some View {
        List(filteredItems, id: \.self) {
            Text($0)
        }
        .searchable(text: $search)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button {
                    withAnimation {
                        items.append("Gouda")
                    }
                } label: {
                    Label("Add Item", systemImage: "plus")
                }
                .disabled(items.contains("Gouda"))
            }
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                Menu("Sort") {
                    Button("Ascending") {
                        withAnimation {
                            items.sort()
                        }
                    }
                    Button("Descending") {
                        withAnimation {
                            items.sort()
                            items.reverse()
                        }
                    }
                }
            }
        }
        .navigationTitle("Cheese List")
    }
}

PlaygroundPage.current.setLiveView(HomeScreen())

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在 SwiftUI 的 NavigationBar 中是否仍然没有简单的方法来自定义 Back-button? - Is there still no simple way to customize the Back-button in the NavigationBar in SwiftUI? SwiftUI:如何使用 NavigationViews 切换到新的导航堆栈 - SwiftUI: How to switch to a new navigation stack with NavigationViews SwiftUI中如何将视图(即列表)从屏幕上的某个点转换为出现? - How to transition a view (i.e List) to appear from a certain point on the screen in SwiftUI? 如何使用 SwiftUI 在多个屏幕上获取键盘高度并移动按钮 - How to get the keyboard height on multiple screens with SwiftUI and move the button 按下时如何为 swiftUI 按钮提供多种功能? - How can I give a swiftUI button multiple functions when pressed? 如何清除Swift中导航后退按钮旁边的文本? - How can I get rid of the text next to the navigation back button in Swift? XCode IOS 如何摆脱主屏幕上的后退按钮? - XCode IOS How to get rid of the back button on home screen? 如何消除按后退按钮后立即发生的故障? - How to get rid of the glitch that occurs right after pressing the back button? SwiftUI 按下后退按钮时工具栏项目被剪裁 - SwiftUI Toolbar item getting clipped when back button is pressed 如何禁用ScrollView项目上的多个按钮颜色选择? - How do I disable multiple button colour selection on ScrollView Items?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM