I have two structs 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". In 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 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
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):
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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.