只有后退按钮在自定义导航栏 SwiftUI 上可见 [英] Only Back Button Visible on Custom Navigation Bar SwiftUI

问题描述

我在之前的一个视图中有一个 NavigationView.但是如果我不向这个视图添加另一个导航视图，我只会看到一个默认的 < 导航栏.返回按钮.

I have a NavigationView at one of the previous views. But if I do not add another navigation view to this view I only see a navbar with default < Back button.

当我向这个视图添加导航视图时，我有双导航栏

When I add navigation view to this view then I have double navigation bars

• 一个带有 <返回按钮
• 我创建的

找不到解决这个问题的方法.

could not find a way how to get rid of this problem.

struct MainPageView: View {
@Environment(\.presentationMode) var mode: Binding<PresentationMode>
let screenWidth = screenSize.width
var sections = ["deniz", "kara"]
@State private var sectionIndex = 0
var body: some View {
 ZStack {
                Color(UIColor(currentSection()))
                    .edgesIgnoringSafeArea(.all)
                ScrollView(.vertical, showsIndicators: false) { ... }
            }
            .navigationBarTitle("", displayMode: .large)
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(
                leading: HStack{
                    VStack {
                        ZStack {
                            Rectangle()
                                .fill(Color.clear)
                                .frame(width: screenWidth / 2, height: 50)
                            Section {
                                Picker(
                                    selection: $sectionIndex,
                                    label: Text("Sections")
                                ) {
                                    ForEach(0 ..< sections.count) {
                                        Text(self.sections[$0])
                                    }
                                }.pickerStyle(SegmentedPickerStyle())
                            }.padding(.horizontal, 10)
                        }
                        Spacer()
                    }
                }
                .padding(.leading, screenWidth / 5)
                ,trailing: HStack {
                    NavigationSliderItem()
                    NavigationSearchItem()
                }
            )
            .navigationViewStyle(StackNavigationViewStyle())

如果我在 ZStack 之前插入 NavigationView，就会发生这种情况.

if I insert NavigationView before ZStack this happens.

导航视图位于 Kayit ol 页面上.你可以从视频中看到

Navigation View is on Kayit ol page. You can see from the video

https://vimeo.com/567060877

推荐答案

我想与您分享一个可以解决您所有问题的结构.如果我正确理解你，你有多个导航流，例如.登录、主页、其他一些流程.这导致您使用多个后退按钮进行 NavigationView { Navigation View { NavigationView }}} 嵌套.

I want to share a structure with you that will solve all of your woes. If I'm understanding you correctly, you have multiple navigation flows, eg. Login, Home, some other flow. Which is causing you to have NavigationView { Navigation View { NavigationView }}} nesting going on, with multiple back buttons.

这是一个可能的解决方案，坦率地说，它将在未来对其他项目提供更多帮助.

Here is a possible solution, and frankly it'll help a lot more in the future with other projects.

这个视图模型用于控制一个Base View，它本质上是一个导航控件视图.

This view model is to control a Base View which is essentially a Navigation control view.

class BaseViewModel: ObservableObject {
    @Published var userFlow: UserFlow = .loading
    
    init(){
         //You might check for login state here
         //IF logged in, then go to home, otherwise
         //go back to login. 
         userFlow = .home
    }
    
    enum UserFlow {
        case loading, onboarding, login, home
    }
}

基本视图

这个 BaseView 会在 BaseViewModel 环境对象改变时更新.它是绑定的，所以当它改变时，用户流也会改变.这将允许您在每个流的基础上拥有多个导航堆栈.换句话说，创建一个用于登录的流程，另一个用于登录的流程，以及您需要的任何其他流程，导航视图将不再相互干扰.

Base View

This BaseView will update whenever the BaseViewModel environment object is changed. It's bound, so when it changes, the user flow will change too. This will allow you to have multiple navigation stacks on a per-flow basis. In other words create one flow for login, another for logged-in, and any other for whatever you need, the navigation views will no longer interfere with each other.

struct BaseView: View {
    //We use an @EnvironmentObject here because later on
    //in the app we access this and change the state
    //so that the BaseView updates it's flow. 
    @EnvironmentObject var appState: BaseViewModel
    
    var body: some View {
        //Make sure to group, or it won't work properly.
        Group {
            switch appState.userFlow {
            case .onboarding:
                Text("Not Yet Implemented")
            case .login:
                LandingPageView()
            case .home:
                BaseHomeScreenView().environmentObject(BaseHomeScreenViewModel())
            case .loading:
                LoadingView()
            }
        }
        .edgesIgnoringSafeArea(.bottom)
        .transition(.opacity)
        .animation(.spring())
    }
}

用法

只需获取创建的 @EnvironmentObject 并设置其值.Swift 将从那里接管并使用位于 BaseView

Usage

Simply grab the created @EnvironmentObject and set its value. Swift will take over from there and swap your views using the switch appState.userFlow located in the BaseView

struct View1: View {
    @EnvironmentObject var userFlow: BaseViewModel
    var body: some View {
        VStack {
             Button(action: {userFlow = .login}, label: {
                  Text("Go to login")
             })
        }
    }
}

请注意，我没有使用 IDE 进行此操作，请原谅任何语法错误.

这篇关于只有后退按钮在自定义导航栏 SwiftUI 上可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！