I already searched, but can't find a solution that works.
I have this super simple code. When I add the NavigationView, the background color goes away.
I think if I can make the background color of NavigationView Transparent, it would solve the issue.
struct TestView: View {
var body: some View {
VStack {
Spacer()
NavigationView {
Text(/*#START_MENU_TOKEN#*/"Hello, World!"/*#END_MENU_TOKEN#*/)
}
Spacer()
}
.background(Color(red: 128 / 255, green: 27 / 255, blue: 44 / 255))
.ignoresSafeArea(.all)
}
}
Thanks in advance
I had the exact same issue.
I managed to solve this by keeping the 'NavigationView' as the parent and having the ZStack as the child for your background
So to take your code:
var body: some View {
Spacer()
NavigationView {
ZStack {
//Your colour here + Safezone ignore
}
VStack {
Text("Hello, World!")
Spacer()
}
}
}
}
Related
I have a View that will display over another View. The view animation slides in from the right perfectly, but when I click on the Close button, the view disappears without the desired animation of sliding back to the right before disappearing.
I have tried using .opacity(self.isShowing ? 1 : 0), but then the View fades in and out, I need it to slide in and out. Other variations have not produced the desired results.
What am I doing wrong? Any guidance, even a duplicate solution (that I could not find) would be greatly appreciated.
struct NotificationView<parentView>: View where parentView: View {
#Binding var isShowing: Bool
let parentView: () -> parentView
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .center) {
self.parentView()
if(self.isShowing == true){
VStack {
Text("This is a test view\n")
Button(action: {
self.isShowing.toggle()
}) {
Text("Close")
}
}
.frame(width: geometry.size.width, height: geometry.size.height)
.background(Color(UIColor.systemBackground))
// .opacity(self.isShowing ? 1 : 0)
.transition(.move(edge: self.isShowing ? .trailing : .leading))
.animation(Animation.easeInOut(duration: 1.0))
}
}
}
}
}
Move conditional part into container and add animation to container, so it will animate content, like
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .center) {
self.parentView()
VStack { // << here !!
if(self.isShowing == true){
VStack {
Text("This is a test view\n")
Button(action: {
self.isShowing.toggle()
}) {
Text("Close")
}
}
.frame(width: geometry.size.width, height: geometry.size.height)
.background(Color(UIColor.systemBackground))
.transition(.move(edge: self.isShowing ? .trailing : .leading))
}
}.animation(Animation.easeInOut(duration: 1.0)) // << here !!
}
}
}
I have a ScrollView:
ScrollView {
VStack (alignment: .leading) {
Text("\(userData.username), \(userData.age)")
.fontWeight(.semibold)
.font(Font.system(size:30))
}
}
The output is:
I tried flipping the Stack and having the scroll view inside, but I get the same result.
The work around I have is to put it in a HStack and add a Spacer()
HStack {
Text("\(userData.username), \(userData.age)")
.fontWeight(.semibold)
.font(Font.system(size:30))
.padding([.leading])
Spacer()
}
This does the trick but I dont think this is the ideal way. Is this the only way? or is there a better solution to align text vertically in a scrollview?
By default stack container is tight to content, so alignment has no effect.
Here is possible solution
ScrollView {
VStack (alignment: .leading) {
Text("\(userData.username), \(userData.age)")
.fontWeight(.semibold)
.font(Font.system(size:30))
}.frame(maxWidth: .infinity, alignment: .leading) // << make screen-wide !!
}
Actually, you just missed a parameter and can do this:
ScrollView {
VStack (alignment: .leading, spacing: 8) {
Text("\(userData.username), \(userData.age)")
.fontWeight(.semibold)
.font(Font.system(size:30))
}
}
I have a problem related on my List view. The question is simple: how can I get rid of that wierd gray rectangle showing on top of the TabBar? I didn't code that, I just implemented a controller with a List and NavigationBar and then it showed that thing.
For more clear explanation I post the images:
ItemRow.swift code:
import SwiftUI
struct ItemRow: View {
static let colors: [String: Color] = ["D": .purple, "G": .orange, "N": .red, "S": .yellow, "V": .pink]
var item: MenuItem
var body: some View {
NavigationLink(destination: Text(item.name)) {
HStack {
Image(item.thumbnailImage)
.clipShape(Circle())
.overlay(Circle().stroke(Color("IkeaBlu"), lineWidth: 2))
VStack(alignment: .leading){
Text(item.name)
.font(.headline)
Text("€ \(item.price)")
}.layoutPriority(1)
Spacer()
ForEach(item.restrictions, id: \.self) { restriction in
Text(restriction)
.font(.caption)
.fontWeight(.black)
.padding(5)
.background(Self.colors[restriction, default: .black])
.clipShape(Circle())
.foregroundColor(.white)
}
}
}
}
}
struct ItemRow_Previews: PreviewProvider {
static var previews: some View {
ItemRow(item: MenuItem.example)
}
}
thanks a lot for the help
Remove the marked part of hack from TabBar view and that glitch will go.
Tested with Xcode 11.4 / iOS 13.4
} .onAppear {
// UITabBar.appearance().isTranslucent = false // << this one !!
UITabBar.appearance().barTintColor = UIColor(named: "IkeaBlu")
}.accentColor(Color(.white))
I want to display a label in the centre of a view with a progress indicator to the right of the label. How can I do this in SwiftUI on macOS?
The code below aligns the HStack in the centre of the VStack but I want the text centered and the progress indicator aligned with the text's trailing edge. I guess I could replace the HStack with a ZStack but it's still not clear how one aligns two controls to each other or how one prevents the container from be centered by its container.
import SwiftUI
struct AlignmentTestView: View {
var body: some View {
VStack(alignment: .center, spacing: 4) {
HStack {
Text("Some text")
ActivityIndicator()
}
}.frame(width: 200, height: 200)
.background(Color.pink)
}
}
struct AlignmentTestView_Previews: PreviewProvider {
static var previews: some View {
AlignmentTestView()
}
}
Here is possible approach (tested replacing ActivityIndicator with just circle).
Used Xcode 11.4 / iOS 13.4 / macOS 10.15.4
var body: some View {
VStack {
HStack {
Text("Some text")
.alignmentGuide(.hAlignment) { $0.width / 2.0 }
ActivityIndicator()
}
}
.frame(width: 200, height: 200, alignment:
Alignment(horizontal: .hAlignment, vertical: VerticalAlignment.center))
.background(Color.pink)
}
extension HorizontalAlignment {
private enum HAlignment : AlignmentID {
static func defaultValue(in d: ViewDimensions) -> CGFloat {
return d[HorizontalAlignment.center]
}
}
static let hAlignment = HorizontalAlignment(HAlignment.self)
}
I want to have a full screen image in the background. I have implemented this:
struct LoginView: View {
var body: some View {
VStack {
Spacer();
Text("Hallo");
Text("Hallo2");
Text("Hallo2");
Text("Hallo2");
Text("Hallo2");
Text("Hallo2");
Text("Hallo2");
Spacer();
}.background(Image("Background LaunchScreen")
.resizable()
.aspectRatio(UIImage(named: "Background LaunchScreen")!.size, contentMode: .fill)
.clipped())
.edgesIgnoringSafeArea(.all)
}
}
When I remove the spacers, the image is no longer displayed in full screen mode.
Surely that can be solved differently?
And if I turn the iPhone in the simulator to the side, I have left and right white stripes.
How can I change this?
Here's a possible solution using GeometryReader and ZStack:
import SwiftUI
struct LoginView: View {
var body: some View {
GeometryReader { geometry in
ZStack {
Image("LaunchImage")
.resizable()
.aspectRatio(geometry.size, contentMode: .fill)
.edgesIgnoringSafeArea(.all)
VStack {
ForEach (1...10, id: \.self) { _ in
Text("Hallo")
.foregroundColor(Color.white)
}
}
}
}
}
}
#if DEBUG
struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView()
}
}
#endif
Results