[英]How to add button on navigation bar with SwiftUI
I have two structs ContentView.swift
我有两个结构ContentView.swift
struct ContentView: View {
var body: some View {
NavigationView{
ZStack {
Color(red: 0.09, green: 0.63, blue: 0.52)
.edgesIgnoringSafeArea(.all)
VStack {
Image("flower_logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 150.0, height: 150.0)
.clipShape(Circle())
Text("ScanFlower")
.font(Font.custom("Pacifico-Regular", size: 40))
.bold()
.foregroundColor(.white)
Text("DETECT FLOWER SPECIES")
.foregroundColor(.white)
.font(.system(size: 15))
Spacer()
.frame(height: 100)
NavigationLink(destination: ScanWithCamera()){
NavigateButtons(imageName: "camera.fill", text: "Scan with camera")
}
NavigateButtons(imageName: "photo.fill", text: "Use pictures")
NavigateButtons(imageName: "chart.bar.fill", text: "Check your database")
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
which moved to second view ScanWithCamera.swift
by click on NavigationLink "Scan with Camera".通过单击 NavigationLink“使用相机扫描”移动到第二个视图ScanWithCamera.swift
。 In ScanWithCamera.swift
在ScanWithCamera.swift
struct ScanWithCamera: View {
var body: some View {
NavigationView{
Text("Damn...bro...")
.navigationBarTitle("Page2",displayMode: .inline)
.navigationBarItems(leading:
Button(action: {
print("Edit button pressed...")
}) {
Text("Edit")
}
)
}
}
}
struct ScanWithCamera_Previews: PreviewProvider {
static var previews: some View {
ScanWithCamera()
}
}
struct ScanWithCamera_Previews: PreviewProvider {
static var previews: some View {
ScanWithCamera()
}
}
I would like to have a button on Navigation Bar, but I have no idea how to add it there.我想在导航栏上有一个按钮,但我不知道如何在那里添加它。 When I tried to do it with .navigationBarItems
, I had navigation bar for almost half of screen当我尝试使用.navigationBarItems
进行操作时,导航栏几乎占屏幕的一半 like on the screen.就像在屏幕上一样。 how to add this button there so that the navigation bar does not increase?如何在此处添加此按钮以使导航栏不增加?
You can Use following code您可以使用以下代码
if you want to show edit on place of back... you can do this如果你想在后面显示编辑......你可以这样做
struct DestinationView: View {
var body: some View {
List {
Text("1")
}
.navigationBarTitle("Destination")
.navigationBarItems(leading:
Button("Edit") {
print("About tapped!")
}
).navigationBarBackButtonHidden(true)
}
}
If you want to show back with multiple button example如果您想用多个按钮示例显示回来
struct DestinationView: View {
var body: some View {
List {
Text("1")
Text("2")
}
.navigationBarTitle("DestinationView")
.navigationBarItems(leading: HStack {
Button("Back") {
print("About tapped!")
}.background(Color.black)
.foregroundColor(Color.white)
Button("Help") {
print("Help tapped!")
}
}, trailing:
HStack {
Button("About") {
print("About tapped!")
}
Button("Info") {
print("Help tapped!")
}
}
)
}
}
Result结果
If you want.inline and multiple buttons如果你想要.inline 和多个按钮
struct DestinationView: View {
var body: some View {
List {
Text("1")
Text("2")
}
.navigationBarTitle("Destination")
.navigationBarItems(leading: HStack {
Button("Back") {
print("About tapped!")
}.background(Color.black)
.foregroundColor(Color.white)
Button("Help") {
print("Help tapped!")
}
}, trailing:
VStack {
Button("About") {
print("About tapped!")
}
Button("Info") {
print("Help tapped!")
}.foregroundColor(Color.red)
}
)
}
}
Change your location from leading
to trailing
to put it on the top right of your navigation (where an Edit button would normally go):将您的位置从leading
更改为trailing
,将其放在导航的右上角(通常会出现“编辑”按钮):
NavigationView{
Text("Damn...bro...")
.navigationBarTitle("Page2",displayMode: .inline)
.navigationBarItems(trailing:
Button(action: {
print("Edit button pressed...")
}) {
Text("Edit")
}
)
}
In iOS 14+ if you try to use navigationBarButton
you'll get a deprecated warning and you'll be asked to use the toolBar
here's the example code for the same在 iOS 14+ 中,如果您尝试使用navigationBarButton
,您将收到已弃用的警告,并且会要求您使用toolBar
这是相同的示例代码
NavigationView {
Text("Hello")
}.navigationTitle("Home")
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
Button {
print("hello")
} label: {
Image(systemName: "person.crop.circle").imageScale(.large)
}
}
}
}
Here's how the above code will look like, you can change the placement of the ToolBarItem
by changing the value of placement
上面的代码如下所示,您可以通过更改位置的值来更改ToolBarItem
的placement
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.