in my project i'm try to remove the ugly space between my top bar Rectangle() and my List with NavigationView.
I don't know why between those 2 View SwiftUi create space.
as you can see from the picture below once I add the NavigationView it appear a strange space.
I would like my NavigationBarITEM touch my Rectangle()
if I use the offset() it works, but it sound strange.. should be by default they are inside a VStack
Thanks
VStack{
Rectangle()
.frame(height: g.size.height/12)
.foregroundColor(.blue)
.edgesIgnoringSafeArea(.top)
NavigationView{
List{
ForEach(self.dm.storage) { item in
Text(item.airportData.aptICAO)
}
} .navigationBarItems(trailing: EditButton())
}
}
It looks like you already have NavigationView above in view hierarchy, so you don't need second one
VStack{
Rectangle()
.frame(height: g.size.height/12)
.foregroundColor(.blue)
.edgesIgnoringSafeArea(.top)
// << no additional NavigationView needed
List{
ForEach(self.dm.storage) { item in
Text(item.airportData.aptICAO)
}
} .navigationBarItems(trailing: EditButton())
}
Related
Why the button doesn't work in this code by using SwiftUI?
I can't click the button.
When I lay the button on the top in VStack, it can work.
But when it is in below code, it can't work properly.
Is this related to VStack, TabView or button's overlay?
I think it is caused by button's offset and padding & tabview's padding.
Can I change it to ZStack in all same layout?
Please tell me how to do.
Thank you.
struct Profile: View {
#State private var selection = 0
var body: some View {
VStack{
VStack{
HStack{
Spacer()
Image(systemName: "person.circle")
Spacer()
}
HStack{
Text("|")
.foregroundColor(.white)
Image(systemName: "birthday.cake")
Text("birthDay")
}
}
.frame(height: 300)
.padding(.bottom,50)
Button(action: {
print("hello")
}){
Text("edit")
.fontWeight(.semibold)
.frame(width: 200, height: 48)
.foregroundColor(Color(.red))
.background(Color(.white))
.cornerRadius(24)
.overlay(
RoundedRectangle(cornerRadius: 24)
.stroke(Color(.red), lineWidth: 1.0)
)
.offset(y: -35)
.padding(.bottom, -20)
.contentShape(RoundedRectangle(cornerRadius: 20))
}
TabView(selection: $selection) {
VStack{
HStack{
Text("note")
}
}
.tag(0)
VStack{
Text("phone")
}
.tag(1)
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.frame(height:200)
.padding(.top,-60)
.padding(.horizontal)
}
}
}
The padding
.padding(.top,-60)
is covering your button.
Add the below line just after the padding, you'll see tabview covering the button with green transparent background.
.background(Color.green.opacity(0.4))
Just remove the .padding(.top,-60) and the button will click.
Add "Spacer()" underneath the Button
Spacer()
Spacer between Button() and Tabview() will enable the button to be clickable.
I have an HStack with content I want left aligned and then Details title to be centered. I am using a Spacer() to try and accomplish this but it looks like it's centering Details dependent on the content to the left of it. I would like it to be independent of that and just be centered to the screen. Is that possible using Spacer()?
VStack {
HStack(alignment: .top) {
Text("<------")
Spacer()
Text("Details")
Spacer()
}
Spacer()
}
A possible approach is to use overlay, like
VStack {
HStack(alignment: .top) {
Text("<------")
Spacer()
}
.overlay(
Text("Details") // << here !!
, alignment: .top)
Spacer()
}
, depending on needs you can place it to root VStack
How can I position my search-bar and button to the top of the screen with 65 padding from the top AND KEEP the onTapGestureFunctionality?
I tried the modifiers .edgesIgnoringSafeArea(.top) with padding(.top, 65) applied to the VStack inside my ZStack but then my onTapGesture would not work when tapping on either the search bar or the button...
Why does the Spacer() only push the elements about 80% to the top of the screen? Could this be because its inside a navigation view?
See image below.
Thank you
struct MapScreen: View {
var body: some View {
NavigationView {
ZStack(alignment: .bottom) {
VStack {
HStack(spacing: 15) {
SearchBar()
.padding(.leading, 5)
.onTapGesture {
print("search pressed")
}
ActivateClaimButton()
.onTapGesture {
print("claim pressed")
}
}
// 2 modifiers below positions correctly but
// onTapGesture doesn't work
// .padding(.top, 65)
// .edgesIgnoringSafeArea(.top)
Spacer()
}.zIndex(2)
MapView(locations: $locations, spotArray: $spotArray).edgesIgnoringSafeArea([.top, .bottom])
BottomNavBar().zIndex(1).edgesIgnoringSafeArea(.all).offset(y: 35)
}
.navigationViewStyle(StackNavigationViewStyle())
.fullScreenCover(isPresented: $presentSearchView, content: {
SearchView()
})
}
}
}
The answer that worked for me was
.navigationBarHidden(true)
How can I add a subtitle under a large title that was defined this way?
NavigationView{
VStack(){
//"Some code"
}
.navigationTitle("Analytics")
}
You could try something like this:
NavigationView{
VStack(){
//"Some code"
}
.navigationBarTitleDisplayMode(.large)
.toolbar {
ToolbarItem(placement: .navigationBarLeading) {
VStack {
Text("Title").font(.largeTitle).bold()
Text("Subtitle").font(.subheadline)
}
}
}
}
Seems "navigationSubtitle" is only for macos, this is another way to do it in ios:
.navigationBarItems(leading: VStack {
Text("Analytics").font(.largeTitle).bold()
Text("Subtitle")
})
Edit update:
you could also try this, with some loss of font choice:
.navigationTitle("Subtitle")
.navigationBarItems(leading: Text("Analytics").font(.largeTitle).bold())
I have found a solution to what I was looking for: basically create the top of the screen as it would normally be without a navigationView and then add a scrollview underneath.
HStack {
VStack(alignment: .leading, spacing: 5) {
Text("Title")
.font(.largeTitle)
.foregroundColor(Color(UIColor.label))
.fontWeight(.bold)
Text("subtitle")
.font(.subheadline)
.foregroundColor(Color(UIColor.label))
}
Spacer()
}
.padding()
ScrollView(.vertical, showsIndicators: false) {}
I have a "DetailView" accessed from a list in "ContentView". In this DetialView, there is too much text, and I can't figure out how to add a ScrollView (or if that is the correct addition) while in the NavigationView.
here you can see why I need a scroll
I've tried to add the ScrollView after NavigationView (above the VStack of information) without any luck.
struct DetailView: View {
var selectedGrape: Grape
var body: some View {
return NavigationView {
VStack {
Text(selectedGrape.grapeName)
.font(.largeTitle)
.foregroundColor(.blue)
Text("Characteristics")
.font(.title)
.fontWeight(.bold)
.padding(.top)
Text(selectedGrape.grapeCharacteristics)
}
}
}
}
It simply is unable to build
Why not:
NavigationView {
ScrollView {
VStack {
Text("Title")
.font(.largeTitle)
.foregroundColor(.blue)
Text("Headline")
.font(.title)
.fontWeight(.bold)
.padding(.top)
Text("Body")
}
}
}