SwiftUI: Навигация по собственным пунктам меню для просмотра

#swift #swiftui

Вопрос:

Я хотел бы использовать встроенную панель меню навигации в swiftui, но почему-то не смог заставить ее перейти на страницу настроек.

Когда я нажимаю на пункт меню «Настройки», он показывает «при настройке», но не переходит к просмотру.

Любая помощь будет очень признательна.

 struct ContentView: View {
  
  @StateObject var vm = LoginViewModel()
  @State var selection: Int? = 0
  
  var body: some View {
    NavigationView {
      ZStack {
        if !vm.log_status {
          Home()
            .toolbar{
              ToolbarItem(placement: .navigationBarTrailing) {
                Menu {
                  Button {
                    print("at home")
                  } label: {
                    Label("Home", systemImage: "house.fill")
                  }
                  Button {
                    print("at setting")
                    self.selection = 1
                  } label: {
                    NavigationLink(destination: Text("Settings Page"), tag:1,  selection: $selection) { Label("Settings", systemImage: "gearshape.fill")}
                  }
                } label: {
                  Label(title: { Text("Menu")}, icon: {Image(systemName: "filemenu.and.selection").foregroundColor(Color.black).font(.system(size: 24))})
                }
              }
            }
        } else {
          Login()
        }
      }
      .navigationTitle("App")
    }
  }
}
 

Ответ №1:

Не обязательно иметь NavigationLink внутри саму кнопку. Вы можете переместить его в пределах ZStack и избавиться от любой метки, которую вы определили. Таким образом, при нажатии на кнопку, на которой выведено «при настройке», вы все равно изменяете selection значение, которое в свою очередь запускает навигационный вызов. Я внес несколько изменений в ваш код (прочитайте комментарии):

 NavigationView {
    ZStack {
        NavigationLink(destination: Text("Settings Page"), tag:1,  selection: $selection) {} // Move the NavigationLink to the ZStack and get rid of any labels set.
        if !vm.log_status {
            Text("Home")
                .toolbar{
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Menu {
                            Button {
                                print("at home")
                            } label: {
                                Label("Home", systemImage: "house.fill")
                            }
                            Button {
                                print("at setting")
                                self.selection = 1
                            } label: {
                                Label("Settings", systemImage: "gearshape.fill") // Keep ONLY the label of the Previous NavigationLink
                            }
                        } label: {
                            Label(title: { Text("Menu")}, icon: {Image(systemName: "filemenu.and.selection").foregroundColor(Color.black).font(.system(size: 24))})
                        }
                    }
                }
        } else {
            Text("Login")
        }
    }
    .navigationTitle("App")
}
 

Результат:

введите описание изображения здесь