ios - SwiftUI 中的导航内容

标签 ios swift swiftui xcode11

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

我想将 BarButtonItem 和图像放入 NavigationBar

我已经能够显示导航栏并放置标题 enter image description here

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

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

        }
        .navigationBarTitle(Text("Notes"))

    }
}

最佳答案

iOS 14

您应该使用工具栏修饰符:

.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
    }
}

Demo

注释 1:您可以在那里查看任何查看。 (不仅是按钮)以及任何修饰符

注2:上面和下面的代码都会生成相同的外观项,但采用不同的方法

<小时/>

iOS 13 及更高版本(已弃用,但仍然有效)

您应该使用.navigationBarItems()修饰符。例如,您可以添加 ButtonImage,如下所示:

.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")
)

关于ios - SwiftUI 中的导航内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56607175/

相关文章:

swift - Swiftui withAnimation(.linear) 中的持续时间参数

ios - RealmSwift 需要重建。有我可以下载的更新吗?

ios - 如何使我的自定义手势识别器类实例同时工作?

ios - 检索 JSON 对象并填充数组 Swift

swift - AVFoundation:缩放视频改变颜色

swift - 将 2 个不同的按钮连接到同一个 socket (Swift)

swift - 如何使用Xcode侧面板图标图像?

ios - 如何有条件地包含在 XCode 中的 "Compiled Sources"

ios - 如何打开 SwiftUI 应用程序并使用 Siri Intent Extension 中的 NSUseractivity 执行功能?

SwiftUI TabView + NavigationView 导航栏不显示