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")
}
}
}
Related
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 am unsure how to fix this. I have implemented a ScrollView and a NavigationView with ZStacks. However, the automatic display mode doesn't work and the ScrollView sits behind it, with the Title overlapping.
https://i.stack.imgur.com/KPkGh.png
https://i.stack.imgur.com/H8NwS.png
Here is my current code:
struct Overview: View {
var body: some View {
ZStack{
NavigationView {
ZStack {
Color.init("Background")
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
.edgesIgnoringSafeArea(.top)
ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
ForEach(0..<10) {
Text("Item \($0)")
.foregroundColor(.white)
.font(.largeTitle)
.frame(width: 340, height: 200)
.background(ColorManager.BoxColor)
.cornerRadius(10)
}
}
.frame(maxWidth: .infinity)
}
}
}
}
}
}
var body: some View {
NavigationView {
ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
ForEach(0..<10) {
Text("Item \($0)")
.foregroundColor(.blue)
.font(.largeTitle)
.frame(width: 340, height: 200)
.background(Color(.gray))
.cornerRadius(10)
}
}
.frame(maxWidth: .infinity)
}
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
}
}
You had the navigation item in a ZStack. A ZStack is used to display overlapping views on top of each other.
I believe what you really were looking to achieve stacking the title above the scrollView. That would be achieved with VStack. That however, would still be wrong.
Because it's a navigational setting, it goes inline with the NavigationView. So it can be displayed in the NavigationBar. It doesn't need to be apart of any Stacks.
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())
}
I'm trying to make a simple app using SwiftUI using NavigationView and the last View is a video player (which I obviously don't want to have a navigationBar). The thing is that every other View leading to the player has navigationBarTitle and it just stays.
What I have:
ContentView :
var body: some View {
NavigationView {
VStack {
Text("Sample")
DetailedView(data: CustomData.sample)
}
.navigationBarTitle(Text("Main"))
}
}
DetailedView:
#ObservedObject var data: CustomData
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack {
ForEach(data.array) { videoData in
NavigationLink(destination: VideoDetailed(videoData: videoData)) {
VideoRow(episode: episode)
}
}
}
}
}
VideoDetailed:
#ObservedObject var videoData: VideoData
var body: some View {
VStack {
NavigationLink(destination: PlayerContainerView(url: videoData.url)
.navigationBarBackButtonHidden(true)
.navigationBarTitle(Text("_"))
.navigationBarHidden(true)){
Image(systemName: "play.fill")
.resizable()
.foregroundColor(.white)
.aspectRatio(contentMode: .fit)
.shadow(radius: 5)
.frame(maxWidth: 50)
}
Text(videoData.description)
Spacer()
}
.navigationBarTitle(Text(videoData.title), displayMode: .inline)
}
As a result of this code I get no back button and a "_" for title with a navigation bar
You need to set the title to an empty string and the displayMode to inline for it to hide.
.navigationBarTitle("", displayMode: .inline)
.navigationBarHidden(false)
Just remove this line:
.navigationBarTitle(Text("_"))
from VideoDetailed.
Hello everyone. I'm developing a simple SwiftUI application that displays some tweets. It has a tab view with two views: the main page that will display the tweets and a secondary view.
The problem is that the main page has a NavigationView. If I choose to display only the main page, everything seems correct, but when I display it from the TabView and I scroll down, the NavigationView feels a bit weird.
As I'm not good at explaining, here you have some images:
It should be like this
But it is like this
I thought of adding .edgesIgnoringSafeArea(.top), but the NavigationView is now hidden by the notch and it doesn't make the effect.
Is there any way I can make the NavigationView display like in the first image?
Any help is appreciated. Thanks in advance.
My code
HomePageView:
struct HomePageView: View {
var body: some View {
NavigationView {
List {
//tweet code
}
.navigationBarTitle("Your feed")
}
}
}
TabView:
struct TabController: View {
#State private var selection = 0
var body: some View {
TabView(selection: $selection){
HomePageView()
.tabItem {
VStack {
Image(systemName: "house.fill")
.font(.title)
}
}
.tag(0)
Text("Second View")
.font(.title)
.tabItem {
VStack {
Image(systemName: "bell.fill")
.font(.title)
}
}
.tag(1)
}
}
}
Try adding .edgesIgnoringSafeArea(.top) to your tabview.
struct ContentView: View {
#State private var selection = 0
var body: some View {
TabView(selection: $selection){
HomePageView()
.tabItem {
VStack {
Image(systemName: "house.fill")
.font(.title)
}
}
.tag(0)
Text("Second View")
.font(.title)
.tabItem {
VStack {
Image(systemName: "bell.fill")
.font(.title)
}
}
.tag(1)
}.edgesIgnoringSafeArea(.top)
}
}