如何解决SwiftUI - 如何将工具栏添加到 NavigationView 内的 TabView 选项卡?
我正在尝试向我的每个选项卡添加不同的 toolbar
,但它们没有显示。该应用程序主要用于横向 iPad,我可以将工具栏添加到 TabView
本身并显示它们,但我不知道如何将按钮按下导航堆栈传递到各个视图/视图-模型在本地处理。
我已经尝试添加新的 NavigationView
(包括 .stack
navigationViewStyle
),但这仍然只是向视图添加了另一列。
这是一些准系统的工作代码:
import SwiftUI
@main
struct NavTabTestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
var body: some View {
MasterView()
}
}
struct MasterView: View {
var body: some View {
NavigationView {
List {
ForEach(0..<20) { index in
NavigationLink(
destination: DetailView(index: index)
.navigationTitle("Row \(index)")
) {
Text("\(index) th row")
}.tag(index)
}
}.navigationTitle(Text("Ratty"))
}
}
}
struct DetailView: View {
var index: Int
@State var selectedTab = 1
var body: some View {
TabView(selection: $selectedTab) {
Tab1(index: index).tabItem { Label("Tab1",systemImage: "list.dash") }
Tab2(index: index).tabItem { Label("Tab2",systemImage: "aqi.medium") }
Tab3(index: index).tabItem { Label("Tab3",systemImage: "move.3d") }
}
}
}
struct Tab1: View {
var index: Int
var body: some View {
Text("This is \(index) in tab 1")
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button("Bingo") { print("Bingo") }
}
}
}
}
struct Tab2: View {
var index: Int
var body: some View {
Text("This is \(index) in tab 2")
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button("Bongo") { print("Bongo") }
}
}
}
}
struct Tab3: View {
var index: Int
var body: some View {
Text("This is \(index) in tab 3")
.toolbar {
ToolbarItem(placement: .primaryAction) {
Button("Banjo") { print("Banjo") }
}
}
}
}
我开始怀疑这是否可行,以及在每个选项卡顶部使用按钮实现我自己的视图是否更好。
编辑:
解决方法
不确定这是否会有所帮助,但它确实通过导航视图中的工具栏介绍了一些有趣的概念。
,您只需要使用一级 NavigationView
。换句话说,您不应该嵌套 NavigationViews
。看看这个答案。
Only Back Button Visible on Custom Navigation Bar SwiftUI
- 将
NavgationView
用作您使用过的MasterView
。 - 对每个
NavigationView
视图使用Tab#
。 - 在
MasterView
和DetailsView
之间切换。 - 在
Button
中使用NavigationLink
代替MasterView
(您可以将其自定义为NavigationLink
) - 在每个
Tab#
视图中使用自定义后退按钮。
此选项控制应显示 MasterView
和 DetailsView
中的哪一个。
class BaseViewModel: ObservableObject {
@Published var userFlow: UserFlow = .masterView
init(){
userFlow = .masterView
}
enum UserFlow {
case masterView,detailsView
}
}
此视图可用于 ContentView
或代替它。当您在 MasterView
中并单击列表行之一时,设置 appState.userFlow = .detailView
。单击后退按钮时,设置 appState.userFlow = .masterView
。
这样做,您可以在两个视图之间切换,并且一次显示一个 NavigationView
。
截至目前,它没有动画。如果您愿意,请使用
https://developer.apple.com/tutorials/swiftui/animating-views-and-transitions
struct BaseView: View {
@EnvironmentObject var appState: BaseViewModel
@State var index: Int = 0
var body: some View {
Group {
switch appState.userFlow {
case .masterView:
MasterView(index: $index)
default:
DetailView(index: index)
}
}
.edgesIgnoringSafeArea(.bottom)
}
}
完整代码
struct ContentView: View {
var body: some View {
BaseView().environmentObject(BaseViewModel())
}
}
class BaseViewModel: ObservableObject {
@Published var userFlow: UserFlow = .masterView
init(){
userFlow = .masterView
}
enum UserFlow {
case masterView,detailsView
}
}
struct BaseView: View {
@EnvironmentObject var appState: BaseViewModel
@State var index: Int = 0
var body: some View {
Group {
switch appState.userFlow {
case .masterView:
MasterView(index: $index)
default:
DetailView(index: index)
}
}
.edgesIgnoringSafeArea(.bottom)
}
}
struct MasterView: View {
@EnvironmentObject var appState: BaseViewModel
@Binding var index: Int
var body: some View {
NavigationView {
List {
ForEach(0..<20) { index in
Button(action: {
appState.userFlow = .detailsView
$index.wrappedValue = index
},label: {
HStack {
Text("\(index) th row")
Spacer()
Image(systemName: "greaterthan")
}
})
.tag(index)
}
}.navigationTitle(Text("Ratty"))
}
}
}
struct DetailView: View {
var index: Int
@State var selectedTab = 1
var body: some View {
TabView(selection: $selectedTab) {
Tab1(index: index).tabItem { Label("Tab1",systemImage: "list.dash") }
Tab2(index: index).tabItem { Label("Tab2",systemImage: "aqi.medium") }
Tab3(index: index).tabItem { Label("Tab3",systemImage: "move.3d") }
}
}
}
struct Tab1: View {
@EnvironmentObject var appState: BaseViewModel
var index: Int
var body: some View {
NavigationView {
Text("This is \(index) in tab 1")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button("back") { appState.userFlow = .masterView }
}
ToolbarItem(placement: .navigationBarTrailing) {
Button("Bingo") { print("Bingo") }
}
}
}
}
}
struct Tab2: View {
@EnvironmentObject var appState: BaseViewModel
var index: Int
var body: some View {
NavigationView {
Text("This is \(index) in tab 2")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button("back") { appState.userFlow = .masterView }
}
ToolbarItem(placement: .primaryAction) {
Button("Bongo") { print("Bongo") }
}
}
}
}
}
struct Tab3: View {
@EnvironmentObject var appState: BaseViewModel
var index: Int
var body: some View {
NavigationView {
Text("This is \(index) in tab 3")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button("back") { appState.userFlow = .masterView }
}
ToolbarItem(placement: .primaryAction) {
Button("Banjo") { print("Banjo") }
}
}
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。