只有后退按钮在自定义导航栏 SwiftUI 上可见

默特·科克萨尔

我在以前的视图之一中有一个 NavigationView。但是如果我不向这个视图添加另一个导航视图,我只会看到一个带有默认 < 后退 按钮的导航栏。

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

  • 一个带有 < 后退按钮
  • 我创建的一个

找不到如何摆脱这个问题的方法。

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 会发生这种情况。

在此处输入图片说明

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

https://vimeo.com/567060877

xTwisteDx

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

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

基本视图模型

这个视图模型是控制一个Base 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环境对象更改时,都会更新它是绑定的,所以当它改变时,用户流也会改变。这将允许您在每个流的基础上拥有多个导航堆栈。换句话说,创建一个用于登录的流程,另一个用于登录的流程,以及您需要的任何其他流程,导航视图将不再相互干扰。

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

用法

只需抓取 created@EnvironmentObject并设置其值。Swift 将从那里接管并使用switch appState.userFlow位于BaseView

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

请注意,我在没有 IDE 的情况下执行此操作,请原谅任何语法错误。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

SwiftUI中NavigationView导航栏的自定义后退按钮

没有可见导航栏的 iOS 左上后退按钮

导航抽屉图标在自定义操作栏上不可见?

SwiftUI水平ScrollView具有不可见的填充

自定义控件在Winform上不可见

SwiftUI-自定义导航“后退”按钮,在视图之间奇怪地来回跳转

如何使按钮上的单击动作可见?

定义在catch上可见的val变量

Bootstrap 4导航栏始终在移动设备上可见

导航栏仅在4英寸上可见

自定义按钮标题在 iPad 上不可见

无法隐藏导航栏后退按钮(SwiftUI)

搜索栏取消按钮仅在iPad上不可见

从工具栏上的后退按钮 (<-) 返回时,如何保持以前的 Android 活动数据可见?

具有自定义UIButton的UIBarButtonItem在iOS <= 10上不可见

动作栏上没有可见的图标(Android编程)

Android:将可见性设置为可见会导致按钮上出现nullpointerexception

带列表的SwiftUI自定义导航栏

如何在swiftui中自定义导航栏

在导航链接选择Mac OS的SwiftUI之前,局部视图部分可见

无法在 React Native 中的自定义后退按钮上运行反应导航功能

工具栏上的Barbutton项的标题在IOS 6上可见,但在IOS 7上不可见

工具栏上的后退按钮的自定义图像和颜色

如何通过样式自定义操作栏上的后退按钮

Flutter 导航保持上一屏幕在底部可见

工具栏在Android上不可见

UIPickerView:工具栏在UIPickerView上不可见

如何使这个左侧边栏在移动设备上可见?

KendoUI for AnfularJS Grid工具栏自定义按钮样本可见性