Remove, or change color of the safe area at the bottom of the View in SwiftUI
Here is the screen shot:
The code to the view is as follows:
struct ViewDetails: View {
@EnvironmentObject var displayDetails: DisplayDetails
var body: some View {
ScrollView {
GeometryReader { geometry in
ZStack {
if geometry.frame(in: .global).minY <= 0 {
Image("header")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width, height: geometry.size.height)
.offset(y: geometry.frame(in: .global).minY/9)
.clipped()
} else {
Image("header")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
.clipped()
.offset(y: -geometry.frame(in: .global).minY)
}
}
}.frame(height: 400)
VStack(alignment: .leading) {
HStack {
Image("author")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.clipped()
.cornerRadius(10)
VStack(alignment: .leading) {
Text("Article by")
.font(.custom("AvenirNext-Regular", size: 15))
.foregroundColor(.gray)
Text("John Doe")
.font(.custom("AvenirNext-Demibold", size: 15))
}
}.padding(.top, 20)
Text("Lorem ipsum dolor sit amet")
.font(.custom("AvenirNext-Bold", size: 30))
.lineLimit(nil)
.padding(.top, 10)
Text("3 min read • 22. November 2019")
.font(.custom("AvenirNext-Regular", size: 15))
.foregroundColor(.gray)
.padding(.top, 10)
Text(articleContent)
.font(.custom("AvenirNext-Regular", size: 20))
.lineLimit(nil)
.padding(.top, 30)
}
.frame(width: 350)
}
.edgesIgnoringSafeArea(.all)
.onAppear(perform: {
self.displayDetails.showFullScreen.toggle()
})
}
}
So I'm not sure if I can remove whatever is displaying as gray/white at the bottom or if I can change the color for it, either way works for me but I am unable to achieve it!? Can anyone help.
Solution
I changed your code a little and ran it on the simulator. The only change is just adding .background(Color.yellow) before .edgesIgnoringSafeArea(.all). Here is the full code snippet with result:
struct ViewDetails: View {
var body: some View {
ScrollView {
GeometryReader { geometry in
ZStack {
if geometry.frame(in: .global).minY <= 0 {
Image("hp")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width, height: geometry.size.height)
.offset(y: geometry.frame(in: .global).minY/9)
.clipped()
} else {
Image("header")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
.clipped()
.offset(y: -geometry.frame(in: .global).minY)
}
}
}.frame(height: 400)
VStack(alignment: .leading) {
HStack {
Image("author")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 60, height: 60)
.clipped()
.cornerRadius(10)
VStack(alignment: .leading) {
Text("Article by")
// .font(.custom("AvenirNext-Regular", size: 15))
.foregroundColor(.gray)
Text("John Doe")
.font(.custom("AvenirNext-Demibold", size: 15))
}
}.padding(.top, 20)
Text("Lorem ipsum dolor sit amet")
// .font(.custom("AvenirNext-Bold", size: 30))
.lineLimit(nil)
.padding(.top, 10)
Text("3 min read • 22. November 2019")
.font(.custom("AvenirNext-Regular", size: 15))
.foregroundColor(.gray)
.padding(.top, 10)
Text("articleContent")
.font(.custom("AvenirNext-Regular", size: 20))
.lineLimit(nil)
.padding(.top, 30)
}
.frame(width: 350)
}
.background(Color.yellow)
.onAppear(perform: {
// self.displayDetails.showFullScreen.toggle()
})
.edgesIgnoringSafeArea(.all)
}
result:
P.S: There are lots of unnecessary details in your code snippets, so it's hard to analyze it =(
- Buttons in SwiftUI List ForEach view trigger even when not "tapped"?
- How to Smooth a Drawn Path in SwiftUI to Avoid Sharp Turns?
- SwiftUI @Binding Initialize
- SwiftUI: How would I make stretchable (flexible) sticky header for ScrollView?
- SwiftUI: List background is black when it is an empty List
- Animate parent view height without moving subviews
- Read data from Realtime Database from Firebase in SwiftUI
- What does the underscore mean before a variable in Swiftui in an init()?
- How to create circular text in SwiftUI that goes from a flat line to a perfect circle based on degree changes?
- TipKit with TabView
- How to trigger an Alert in View in Swift UI using a state from an enum in a singleton class
- SwiftUI - Strikethrough on TextField
- SwiftUI onDelete() need the row ID from the IndexSet
- Swift UI Image flickers when animating
- SwiftUI - fade out a ScrollView
- Navigation Issue in iOS 18: Duplication of Navigation Trigger When Using @Environment(\.dismiss) in SwiftUI
- SwiftUI: Nested scroll views on opposite axis
- How do I fix Screen Time API Error: Value of type 'Button<Text>' has no member 'familyActivityPicker'
- SwiftUI - .onTapGesture strange behaviour
- LazyVGrid item hit test area is not expected
- Cannot append to array inside bound variable
- Weird issue while showing an image in rounded rectangle
- Is there a way to tell if the search bar is active with the .searchable modifier?
- Restore values of a form when cancelling the update
- Heap Memory Stair-Case rising in SwiftUI project
- SwiftUi Change Tint of Unselected Item in Tab Bar
- How can I display Touch Bar Buttons using SwiftUI?
- ScrollViewReader's scrollTo does not scroll
- Detailed error from AsyncImage in SwiftUI?
- Change NavigationStack title font, tint, and background in SwiftUI