var body: some View {
NavigationView{
ZStack(alignment: .leading){
ZStack(alignment: .top){
VStack{
HStack(alignment: .top) {
Image(systemName: "chevron.left")
.font(.title2)
Text("profile")
.fontWeight(.bold)
Spacer()
Button(action: {
}) {
Image(systemName: "person.crop.circle.fill.badge.plus")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 24)
Text("subscribe")
Button(action: {
}) {
Image("share_black_24dp")
.tint(Color.white)
.foregroundColor(Color.white)
}
}
.foregroundColor(Color.white)
}
.frame(width: UIScreen.main.bounds.width - 20, height: 40)
.padding(.horizontal, 20)
.background(Color.teal)
}
// .navigationBarItems(leading: backButton)
ScrollView(.vertical, showsIndicators: false){
}
}
}
.navigationBarTitle("")
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
where does
.navigationBarTitle("")
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
need to be!?
I also tried it for NavigationView and it doesn't work
Your issue is that you have multiple NavigationViews.
NavigationView creates a new stack of views. Only your main view should have a NavigationView. The child views can use NavigationLink to push new views, but they should not create another NavigationView.
Think of it like this. NavigationView creates that stack to hold the views, and NavigationLink pushes a new view onto the stack. You only want to create one stack.
So, get rid of NavigationView in your View above, because it is linked from the main view which creates the NavigationView. Then, your code to hide the navigation bar will work as you expect.
I just started with SwiftUI and wanted to build a simple home app. In order to have a better overview I structured my site using a collapsible view, which when expanded reveals the home view. However, I've been struggling to make a dedicated "plus" button that adds another one of the predefined collapsable views to my Content View
Here is the code I made (with the help of a tutorial) for the CollapsableViewModel:
var body: some View {
ZStack{
VStack {
HStack{
Button(
action: { self.collapsed.toggle() },
label: {
HStack {
TextField("Empty...", text: $textFieldText)
.font(.title2.bold())
Spacer()
Image(systemName: self.collapsed ? "chevron.down" : "chevron.up")
}
.padding(.bottom, 1)
.background(Color.white.opacity(0.01))
}
)
.buttonStyle(PlainButtonStyle())
}
.padding(1)
}
VStack {
self.content()
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: collapsed ? 0 : .none)
.clipped()
.transition(.slide)
}
}
}
And here's my Content View:
var body: some View {
ScrollView{
HStack{
CollapsableViewModel(
label: { Text("") .font(.title2.bold()) },
content: {
HStack {
Text("turn off light.")
Text("turn on ac.")
Spacer()}
.frame(maxWidth: .infinity)
}
)
.frame(maxWidth: .infinity)
}
.padding()
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.statusBar(hidden: false)
.navigationBarHidden(true)
}
Now, the problem is that I really don't know where to start with this. My guess is that I have to work with an button that triggers a "showCollapsView" action. But I don't how I make it so that it appears under the VStack of my main ContentView. Any tipps would be appreciated, as I would love to understand this whole process myself!
I am trying to create below design using swiftUI but not able to find proper approach.
I tried but my image is not covering back button but coming below to back button
Expected design
VStack(spacing: 16) {
VStack {
ZStack(alignment: .topTrailing) {
Image("defaultImage")
.resizable()
.frame( height: 200)
Button("Cancel", action: {
print("cancel")
})
.padding(12)
}
}
}
My Design :(
You might want to do a lot of try in SwiftUI to get a custom design right. gave it a quick try for you and added comments on the code so you can understand most of what i did.
this is the quick result i got (with a random background i got on internet)
import SwiftUI
struct FirstView: View{
var body: some View{
NavigationView {
VStack{
NavigationLink(destination: BackgroundImageNav()){
Text("Go to the view")
.font(.title)
}
}
}
}
}
struct BackgroundImageNav: View {
#Environment(\.presentationMode) var presentationMode
// remplacing the back button action, (only problem is that this disable the swipe back)
var body: some View {
ZStack {
// ZStack help you having your image behind the other views
VStack {
Image("defaultImage")
.resizable()
.frame(height: 180)
.edgesIgnoringSafeArea(.all)
Spacer()
// having a spacer that push the image on the top and ignoring the safe area
}
VStack(alignment:.leading){
HStack{
Button(action:{
presentationMode.wrappedValue.dismiss()
// back button action
}){
Image(systemName:"chevron.left")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 30, height: 30)
.foregroundColor(.white)
}
Spacer()
Rectangle()
.fill(Color.white)
.frame(width: 200, height: 80, alignment: .center)
Spacer()
Button(action:{
// do something
}){
Image(systemName: "xmark")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(.white)
}
}.padding()
Text("Title")
.bold()
.font(.title)
.foregroundColor(.black)
.background(Color.white)
.padding(24)
Spacer()
}
}.navigationBarHidden(true)
// removing the bar to customize the back button
}
}
struct backgroundImage_Previews: PreviewProvider {
static var previews: some View {
FirstView()
}
}
Using XCode12, beta 4, I am trying to separate a header area and a ScrollView. I've tried both VStack and GeometryReader; however, when I click in the header area, the navigation link in the ScrollView item beneath it is triggered.
If I use a list, this undesired behavior is not observed. If I use the ScrollView in XCode 11.6 and build for iOS13, this undesired behavior is also not observed.
Did something change with ScrollViews in VStacks or GeometryReaders in iOS14? Why does the scrollview "slide" under the object in the VStack or GeometryReader?
struct ContentView: View {
var body: some View {
NavigationView{
//GeometryReader { geo in
VStack{
VStack{
Text("Blah")
}//.frame(height: geo.size.height*0.20)
VStack {
ScrollView {
ForEach(0..<10) { i in
NavigationLink(destination: Text("\(i)")) {
cardRow(i: i)
.frame(maxWidth: .infinity)
.foregroundColor(Color(UIColor.label))
.padding()
.background(RoundedRectangle(cornerRadius: 12))
.foregroundColor(Color(UIColor.secondarySystemFill))
.padding()
}
}
}
}//.frame(height: geo.size.height*0.90)
}
}.navigationViewStyle(StackNavigationViewStyle())
}
struct cardRow: View {
var i: Int
var body: some View {
HStack {
VStack {
Text("88")
}.hidden()
.overlay(
VStack{
Text("\(i)")
}
)
Divider()
.background(Color(UIColor.label))
Spacer()
}
}
}
}
Here is worked solution (tested with Xcode 12 / iOS 14)
VStack {
ScrollView {
ForEach(0..<10) { i in
NavigationLink(destination: Text("\(i)")) {
cardRow(i: i)
.frame(maxWidth: .infinity)
.foregroundColor(Color(UIColor.label))
.padding()
.background(RoundedRectangle(cornerRadius: 12))
.foregroundColor(Color(UIColor.secondarySystemFill))
.padding()
}
}
}.clipped().contentShape(Rectangle()) // << here !!
}
I'm trying to create a view in SwiftUI. In the preview, it looks like it should, but when run on my iPhone (or on the live preview) it looks like it is offset.
I tried to set the padding to -150, but then the TextField doesn't respond to touches.
VStack {
Text("Name:")
.padding(.bottom, 1)
TextField($name)
.padding(.horizontal, 25.0)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 500)
Text("Image:")
.padding(.top, 1)
Image(uiImage: image!)
.resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
.scaledToFit()
.frame(width: 250, height: 250)
.clipShape(RoundedRectangle(cornerRadius: 10))
.padding(.top, 5)
Button(action: {
withAnimation {
self.showImagePicker = true
}
}) {
Text("Select Image")
.color(.init(red: 20/255, green: 146/255, blue: 81/255))
}
Button(action: {
let list = LSList( title: self.name,
image: self.image!,
id: 0)
list.add()
self.userData.listsData.append(list)
}) {
Text("Add List")
.color(.white)
.font(.system(size: 25))
.bold()
.padding(.horizontal, 7)
.frame(height: 35)
.background(Color.green)
.clipShape(RoundedRectangle(cornerRadius: 3))
}
Spacer()
} .navigationBarTitle(Text("Add List"))
The view in the preview:
The view on my iPhone:
I had the same issue, but found the the problem I had was in using navigationView multiple times.
I thought that we should have NavigationView in every view, but apparently, we should place navigationView only in the main view of the application, and all other views that we enter via navigationLink, automatically get the back option without the need to mention NavigationView again.
So check if you use navigationView more than once in your code.
Strangely, we can specify navigationBarTitle even in views that dont have the navigationView mentioned in them, this is because the navigationView is at the parent view.
Use "displayMode: .inline", to make the navigation area as minimal as possible, it will save you real-estate.
Another thing to do, is to use Spacer().
If you want all your items to be at the top, just put Spacer() as the last item in VStack, and it will push all items to the top.
See this example:
VStack {
// What you care about displaying
Text("Something to Show 1")
Text("Something to Show 2")
Text("Something to Show 3")
// This should be the last, put everything to the top
Spacer()
}
.navigationBarTitle(Text("The Title"), displayMode: .inline)
I had a similar issue, I wanted a VStack to align its content on the top of the screen, and was only using a NavigationView in the parent, but the VStack showed centered. What fixed it for me was using a Spacer(), like this:
VStack(alignment: .leading, spacing: 10){
HStack(alignment: .center, spacing: 5.0) {
...
}
Group{
...
}
Spacer() //<-- This solved my problem
}
Assuming that your VStack is wrapped in a NavigationView, this is the reason it is not rendering correctly in the simulator. The reason it shows fine in preview is that it is not displaying the navigation bar (which includes the back button as well) because the canvas doesn’t know this view might be pushed but in runtime the navigation bar is added while you’re also using an extra NavigationView as well.
To fix it unwrap the VStack from NavigationView and simply remove this NavigationView from the child view.
To make it visible correct with Navigation items in previews(even for child views) you need to wrap the View into the NavigationView { }, because the Canvas is an empty clean environment and it doesn't know that the View may be pushed into the NavigationView
To fix it on iPhone makes sure you are correctly pushing the child view. It should be NavigationButton(destination: AddList()) {}
Example of RowView implementation:
NavigationButton(destination: CarDetail(car: car)) {
HStack {
VStack(alignment: .leading) {
Text(car.name)
Text(car.isAvailable ? "Is Available" : "Out of stock")
.font(.subheadline)
.foregroundColor(.secondary)
}
}
}
ScrollView(.vertical){
VStack {
Text("Name:")
.padding(.bottom, 1)
TextField($name)
.padding(.horizontal, 25.0)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: 500)
Text("Image:")
.padding(.top, 1)
Image(uiImage: image!)
.resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
.scaledToFit()
.frame(width: 250, height: 250)
.clipShape(RoundedRectangle(cornerRadius: 10))
.padding(.top, 5)
Button(action: {
withAnimation {
self.showImagePicker = true
}
}) {
Text("Select Image")
.color(.init(red: 20/255, green: 146/255, blue: 81/255))
}
Button(action: {
let list = LSList( title: self.name,
image: self.image!,
id: 0)
list.add()
self.userData.listsData.append(list)
}) {
Text("Add List")
.color(.white)
.font(.system(size: 25))
.bold()
.padding(.horizontal, 7)
.frame(height: 35)
.background(Color.green)
.clipShape(RoundedRectangle(cornerRadius: 3))
}
Spacer()
} .navigationBarTitle(Text("Add List"))
}