NavigationView {
ScrollView{
.navigationTitle("Home")
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
VStack{
HStack{
NavigationLink(
destination: Home(),
label: {
Image(systemName: "house")
.resizable()
.frame(width: 25.0, height: 20.0)
.foregroundColor(.blue)
.padding()
})
}
}
I cant use NavigationLink(destination : Text("Go home page"),label:{}
It is menu bar I want to freeze this menu bar when I scroll down or up
Thank you so much
import SwiftUI
struct HomeNav: View {
#State var isActiveHome: Bool = false
var body: some View {
NavigationView {
ScrollView{
Text("Main")
NavigationLink(
destination: Text("Home").navigationTitle("Home"),
isActive: $isActiveHome,
label: {
Image(systemName: "house")
.resizable()
.frame(width: 25.0, height: 20.0)
.foregroundColor(.blue)
.padding()
}).hidden().frame(width: 0, height: 0, alignment: .center)
.navigationTitle("Main")
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
VStack{
HStack{
Button(action: {
isActiveHome = true
}, label: {
Image(systemName: "house")
.resizable()
.frame(width: 25.0, height: 20.0)
.foregroundColor(.blue)
.padding()
})
}
}
}
}
}
}
}
}
Related
I wanted to make a RoundedRectangle that shows all the information and under it, there's a list of data.
The goal was, to make it look like a card, but when I change the background, it leaves a weird white gap, where it doesn't change the color. I already tried to change the background color, foreground color, accent color and everything I know for every single layer but I can't find the problem...
I made the RoundedRectangle .background green in this case, to make it more obvious.
Picture of the app, arrows are edited!
```var body: some View {
NavigationView {
VStack(alignment: .center) {
ZStack {
RoundedRectangle(cornerRadius: 25)
.padding()
.foregroundColor(.white)
.background(Color.green)
.frame(width: nil, height: 250)
VStack {
Text("Verfügbar")
.foregroundColor(.gray)
.italic()
.font(.title2)
Text("\(totalMoneyToday(), specifier: "%.2f")€")
.foregroundColor(.blue)
.bold()
.font(.largeTitle)
HStack {
Spacer()
VStack(alignment: .leading) {
Text("Einkommen")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.up.circle")
.foregroundColor(.green)
Text("\(posMoney(), specifier: "%.2f")€").bold()
}
}
Spacer()
VStack(alignment: .trailing) {
Text("Ausgaben")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.down.circle")
.foregroundColor(.red)
Text("\(negMoney(), specifier: "%.2f")€").bold()
}
}
Spacer()
}
.padding(5)
}
}.background(Color.red)
List {
ForEach(money) { money in
NavigationLink(destination: EditMoneyView(money: money)) {
HStack {
VStack(alignment: .leading, spacing: 6) {
Text(money.name!)
.bold()
Text("\(money.amount, specifier: "%.2f")") + Text("€")
}
Spacer()
Text("\(money.date!, style: .date)")
.foregroundColor(.gray)
.italic()
}
}
}
.onDelete(perform: deleteMoney)
}
}
.navigationBarTitle("Financist", displayMode: .inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
showingAddView.toggle()
} label: {
Label("Hinzufügen", systemImage: "plus.circle")
}
}
}
.sheet(isPresented: $showingAddView) {
AddMoneyView()
}
}
}```
Thank you so much guys!
I think it is just default spacing, make it zero
NavigationView {
VStack(alignment: .center, spacing: 0) { << here !!
It's your ZStack background.
var body: some View {
NavigationView {
VStack(alignment: .center) {
ZStack {
RoundedRectangle(cornerRadius: 25)
.padding()
.foregroundColor(.white)
.background(Color.green)
.frame(width: nil, height: 250)
VStack {
Text("Verfügbar")
.foregroundColor(.gray)
.italic()
.font(.title2)
Text("Money")
.foregroundColor(.blue)
.bold()
.font(.largeTitle)
HStack {
Spacer()
VStack(alignment: .leading) {
Text("Einkommen")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.up.circle")
.foregroundColor(.green)
Text("money").bold()
}
}
Spacer()
VStack(alignment: .trailing) {
Text("Ausgaben")
.foregroundColor(.gray)
.italic()
HStack {
Label("", systemImage: "arrow.down.circle")
.foregroundColor(.red)
Text("money").bold()
}
}
Spacer()
}
.padding(5)
}
}.background(Color.red)
List {
// ForEach(money) { money in
// NavigationLink(destination: EditMoneyView(money: money)) {
// HStack {
// VStack(alignment: .leading, spacing: 6) {
// Text(money.name!)
// .bold()
//
// Text("\(money.amount, specifier: "%.2f")") + Text("€")
// }
// Spacer()
// Text("\(money.date!, style: .date)")
// .foregroundColor(.gray)
// .italic()
// }
// }
// }
// .onDelete(perform: deleteMoney)
}
}
.navigationBarTitle("Financist", displayMode: .inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button {
// showingAddView.toggle()
print("DEBUG: Button")
} label: {
Label("Hinzufügen", systemImage: "plus.circle")
}
}
}
.background(.red) // added this
// .sheet(isPresented: $showingAddView) {
// AddMoneyView()
// }
}
}
I don't really follow why the following button:
Button { } label: {
Image(systemName: "globe")
.resizable()
.scaledToFill()
}
.frame(width: size, height: size)
.border(.yellow)
is behaving differently in the body and in the NavigationView?
Why isn't the one in the NavigationView filling the entire frame?
struct ContentView: View {
let size = 45.0
let fontSize = 17.0
var body: some View {
NavigationView {
Button { } label: {
Image(systemName: "globe")
.resizable()
.scaledToFill()
}
.frame(width: size, height: size)
.border(.yellow)
.toolbar {
HStack(alignment: .top) {
Button { } label: {
Image(systemName: "globe")
.resizable()
.scaledToFill()
}
.frame(width: size, height: size)
.border(.red)
// Image and Title
VStack {
Image("nemo")
.resizable()
.scaledToFit()
.frame(height: size)
Text("Navigation Title")
.font(.system(size: fontSize))
.bold()
}.border(.green)
}
//.frame(maxWidth: .infinity)
}
}
}
}
This is a design of default button in toolbar, instead we can use custom, like
Button { print(">> action here")} label: {
Image(systemName: "globe")
.resizable()
.scaledToFill()
}
.buttonStyle(MyTabbarButtonStyle())
.frame(width: size, height: size)
.border(.red)
// and style (tune colours as you want)
struct MyTabbarButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
.foregroundColor(configuration.isPressed ? .gray : .blue)
}
}
Basically I have the below listed code working with the exception of getting to view 4. I'm guessing I've messed up the binding in some way, I just can't figure out what. Can anyone help make this happen? Here's where I am with code:
import SwiftUI
struct ContentView: View {
#State var activeView: Int = 0
#State var activeNavigationLink: Int = 0
let items = ["View1", "View2", "View3", "View4"]
func navigationLinkBinding(id: Int) -> Binding<Bool> {
.init { () -> Bool in
activeNavigationLink == id
} set: { (newValue) in
if newValue {
activeNavigationLink = id
} else {
activeNavigationLink = 0
}
}
}
var body: some View {
TabView(selection: Binding<Int> (
get: {
activeView
}, set: {
activeView = $0
activeNavigationLink = 0
}))
{
NavigationView {
HStack(spacing: 40) {
VStack {
NavigationLink(
destination: NewView(), isActive: navigationLinkBinding(id: 2), label: {
Rectangle()
.fill(Color.red)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To View 3")
}
VStack{
NavigationLink(
destination: NewView(), isActive: navigationLinkBinding(id: 3), label: {
Rectangle()
.fill(Color.red)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To View 4")
}
}.navigationTitle("")
.navigationBarHidden(true)
}
.tabItem {
Image(systemName: "a.circle")
Text("Main")
}
.tag(0)
Text("View 5")
.padding()
.tabItem {
Image(systemName: "b.circle")
Text("View 3")
}
.tag(1)
}
}
}
The below is in the same file as the above. It is where view 4 resides:
struct NewView: View {
let items = ["View1", "View2", "View3", "View4"]
var body: some View {
HStack {
TabView {
VStack {
Rectangle()
.fill(Color.green)
.cornerRadius(12)
.frame(width: 70, height: 70)
Text(items[2])
}
.tabItem {Image(systemName: "a.circle"); Text("GREEN")}
.id(2)
VStack {
Rectangle()
.fill(Color.blue)
.cornerRadius(12)
.frame(width: 70, height: 70)
Text(items[3])
}
.tabItem {Image(systemName: "b.circle"); Text("BLUE")}
.id(3)
}
.navigationTitle("")
.navigationBarHidden(true)
.tabViewStyle(.page)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Here's the working code:
// ContentView.swift
// navtest
//
// Created by MRBarclay on 4/9/22.
//
import SwiftUI
struct ContentView: View {
#State var activeView: Int = 0
#State var activeNavigationLink: Int = 0
func navigationLinkBinding(id: Int) -> Binding<Bool> {
.init { () -> Bool in
activeNavigationLink == id
} set: { (newValue) in
if newValue {
activeNavigationLink = id
} else {
activeNavigationLink = 0
}
}
}
var body: some View {
TabView(selection: Binding<Int> (
get: {
activeView
}, set: {
activeView = $0
activeNavigationLink = 0
}))
{
VStack {
Text("Main 1")
Rectangle()
.fill(Color.yellow)
.cornerRadius(12)
.frame(width: 70, height: 70)
}
.tabItem {Image(systemName: "1.circle"); Text("Main 1")}
.tag(1)
NavigationView {
HStack(spacing: 40) {
VStack {
Text("Main 2")
NavigationLink(
destination: NewView(selectedItem: 1), isActive: navigationLinkBinding(id: 1), label: {
Rectangle()
.fill(Color.red)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 1")
}
VStack{
Text("Main 2")
NavigationLink(
destination: NewView(selectedItem: 2), isActive: navigationLinkBinding(id: 2), label: {
Rectangle()
.fill(Color.red)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 2")
}
VStack{
Text("Main 2")
NavigationLink(
destination: NewView(selectedItem: 3), isActive: navigationLinkBinding(id: 3), label: {
Rectangle()
.fill(Color.red)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 3")
}
}.navigationTitle("")
.navigationBarHidden(true)
}
.tabItem {Image(systemName: "2.circle"); Text("Main 2")}
.tag(2)
NavigationView {
HStack(spacing: 40) {
VStack {
Text("Main 3")
NavigationLink(
destination: NewView(selectedItem: 1), isActive: navigationLinkBinding(id: 1), label: {
Rectangle()
.fill(Color.blue)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 1")
}
VStack{
Text("Main 3")
NavigationLink(
destination: NewView(selectedItem: 2), isActive: navigationLinkBinding(id: 2), label: {
Rectangle()
.fill(Color.blue)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 2")
}
VStack{
Text("Main 3")
NavigationLink(
destination: NewView(selectedItem: 3), isActive: navigationLinkBinding(id: 3), label: {
Rectangle()
.fill(Color.blue)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 3")
}
}.navigationTitle("")
.navigationBarHidden(true)
}
.tabItem {Image(systemName: "3.circle"); Text("Main 3")}
.tag(3)
NavigationView {
HStack(spacing: 40) {
VStack {
Text("Main 4")
NavigationLink(
destination: NewView(selectedItem: 1), isActive: navigationLinkBinding(id: 1), label: {
Rectangle()
.fill(Color.green)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 1")
}
VStack{
Text("Main 4")
NavigationLink(
destination: NewView(selectedItem: 2), isActive: navigationLinkBinding(id: 2), label: {
Rectangle()
.fill(Color.green)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 2")
}
VStack{
Text("Main 4")
NavigationLink(
destination: NewView(selectedItem: 3), isActive: navigationLinkBinding(id: 3), label: {
Rectangle()
.fill(Color.green)
.cornerRadius(12)
.frame(width: 70, height: 70)
}).isDetailLink(false)
Text("To Sub 3")
}
}.navigationTitle("")
.navigationBarHidden(true)
}
.tabItem {Image(systemName: "4.circle"); Text("Main 4")}
.tag(4)
}
}
}
struct NewView: View {
#State var selectedItem: Int
#State var activeNavigationLink: Int = 0
var body: some View {
TabView(selection: $selectedItem) {
VStack {
Rectangle()
.fill(Color.blue)
.cornerRadius(12)
.frame(width: 70, height: 70)
Text("One")
}
.tabItem {Image(systemName: "a.circle"); Text("BLUE")}
.tag(1)
VStack {
Rectangle()
.fill(Color.green)
.cornerRadius(12)
.frame(width: 70, height: 70)
Text("Two")
}
.tabItem {Image(systemName: "b.circle"); Text("GREEN")}
.tag(2)
VStack {
Rectangle()
.fill(Color.orange)
.cornerRadius(12)
.frame(width: 70, height: 70)
Text("Three")
}
.tabItem {Image(systemName: "b.circle"); Text("ORANGE")}
.tag(3)
}
.navigationTitle("")
.navigationBarHidden(true)
.tabViewStyle(.page)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I am new to SwiftUI and am having a bug where my entire screen turns gray when I use too many Navigation Links.
I cannot find any solutions while researching the bug.
I am running the project on the newest version of Xcode 12.4.
My current setup is to have 2 different swiftUI Views, each containing a Navigation Link to the other.
This is what it looks like
Code:
PageOne.swift
struct PageOne: View {
var body: some View {
NavigationView {
VStack {
Text("This is page 1")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageTwo(),
label: {
VStack {
Text("Go to Page 2")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
PageTwo.swift
struct PageTwo: View {
var body: some View {
NavigationView {
VStack {
Text("This is page 2")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageOne(),
label: {
VStack {
Text("Go to Page 1")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
Project file
You should only have one NavigationView in the view hierarchy.
Try creating one NavigationView at the root level:
struct ContentView: View {
var body: some View {
NavigationView {
PageOne()
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
}
and then remove NavigationView from subviews:
struct PageOne: View {
var body: some View {
VStack {
Text("This is page 1")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageTwo(),
label: {
VStack {
Text("Go to Page 2")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
struct PageTwo: View {
var body: some View {
VStack {
Text("This is page 2")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageOne(),
label: {
VStack {
Text("Go to Page 1")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
As the picture shows, I want the button to be in the bottom right corner.
https://i.imgur.com/GiVor8a.png
var body: some View {
ZStack {
HStack {
Color.black
}
Button(action: {}) {
HStack {
Image(systemName: "rectangle.grid.1x2.fill")
}
.padding()
.background(Color.yellow)
.mask(Circle())
}.frame(width: 60, height: 60)
.border(Color.red, width: 1)
}
}
You can use Spacer() for that,
Here is Your Code :
ZStack {
HStack {
Color.black
}
VStack(alignment:.trailing) {
Spacer()
HStack {
Spacer()
Button(action: {}) {
HStack {
Image(systemName: "rectangle.grid.1x2.fill")
}
.padding()
.background(Color.yellow)
.mask(Circle())
}.frame(width: 60, height: 60)
.border(Color.red, width: 1)
}
}
}