SwiftUI 中的导航内容

Question

我正在尝试弄清楚如何在 SwiftUI 中使用导航栏

我想把 BarButtonItem 和图片放在 NavigationBar

我已经能够显示导航栏并放置标题

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

        }
        .navigationBarTitle(Text("Notes"))

    }
}

Answer 1

iOS 14

您应该使用 toolbar 修饰符：

.toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        Button("Cancel") { /* action */ }
    }
    ToolbarItem(placement: .navigationBarTrailing) {
        Button(action: { /* Actions */ }, label: {
            HStack {
                Image(systemName: "trash")
                Text("Delete")
            }
        })
        .foregroundColor(.red) // You can apply colors and other modifiers too
    }
}

_{注意 1：您可以在那里设置 ANY View。（不仅是 Button）还有任何修饰符}

_{注2：上面和下面的代码都将生成相同的外观项目，但方法不同}

iOS 13 及以上（已弃用但仍然有效）

您应该使用 .navigationBarItems() 修饰符。例如，您可以像这样添加 Button 或 Image：

.navigationBarItems(
    leading: Button("Cancel") {
        // Actions
    },
    trailing: Button(action: {
        // Actions
    }, label: { Label("Delete", systemImage: "trash") }
    ).foregroundColor(.red) // You can apply colors and other modifiers too
)

专业提示

始终尝试将每个项目封装在一个单独的结构中，这样您的代码将被简化并且很容易被更新的技术替换。例如，看看这个示例：

.navigationBarItems(
      leading: MyCustomButtonItem(),
      trailing: MyCustomButtonItem(text: "foo", image: "Bard")
)

Answer 2

.navigationBarItems() 是您要查找的函数。您可以指定前导视图、尾随视图或两者。在视图中，您可以指定水平和垂直堆栈以添加其他按钮。

var body: some View {
    NavigationView{
        List(0...5) { note in

            VStack(alignment: .leading) {
                Text("title")
                Text("Date")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }

            }
            .navigationBarItems(leading: HStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            }, trailing: VStack {
                Button(action: {}, label: {Image(systemName: "star.fill")})
                Button(action: {}, label: {Text("Edit")})
            })
            .navigationBarTitle(Text("Notes"))
    }
}

Answer 3

从 parentViewController 放这个

NavigationLink(destination: NotesListView())

Answer 4

斯威夫特用户界面 2

在 SwiftUI 2 / iOS 14 中，navigationBarItems 修饰符 已弃用 。

相反，我们应该使用带有 ToolbarItems 的工具栏。

NavigationView {
    List {
        // ...
    }
    .navigationTitle("Notes")
    .toolbar {
        ToolbarItem(placement: .navigationBarLeading) {
            Button("Tap me") {
                // action
            }
        }
        ToolbarItem(placement: .navigationBarTrailing) {
            Image(systemName: "plus")
        }
    }
}

您可以看到 documentation 更多 ToolbarItemPlacement。

Answer 5

Check the image here

toolbar() 修饰符允许我们将单个或多个条形按钮项目添加到导航视图的前缘和后缘，以及我们视图的其他部分（如果需要） .这些可能是可点击的按钮，但没有限制——您可以添加任何类型的视图。

var body: some View {
    NavigationView {
        ScrollView {
            VStack{
                
            }//: VStack
        }//: Scroll
        .navigationTitle("Settings")
        .toolbar(content: {
            ToolbarItemGroup(placement: .navigationBarTrailing) {
                Button {
                    presentationMode.wrappedValue.dismiss()
                } label: {
                    Image(systemName: "xmark")
                }
            }
        })
        .padding()
    }//: Navigation
}

SwiftUI 中的导航内容

Navigation stuff in SwiftUI

ios

swift

swiftui

xcode11

iOS 14

iOS 13 及以上（已弃用但仍然有效）

斯威夫特用户界面 2