This question already has an answer here:
Why SwiftUI Image add an extra padding to enclosing VStack?
(1 answer)
Closed 7 months ago.
I'm not sure as to why there is an empty space before and after ScrollView. Could someone explain it?
var body: some View {
VStack {
Text("A")
.background(.red)
Text("B")
.background(.blue)
Text("C")
.background(.red)
ScrollView {
Text("D")
.background(.blue)
}.background(.yellow)
Text("E")
.background(.red)
}
}
VStack{} generally has its own initialized spaces between each element.
To fix this just set spacing: to 0. (code is below the image)
VStack(spacing: 0) { //this
Text("A")
.background(.red)
Text("B")
.background(.blue)
Text("C")
.background(.red)
ScrollView {
Text("D")
.background(.blue)
}.background(.yellow)
Text("E")
.background(.red)
}
Related
This question already has an answer here:
How to change taskbar color and sf symbol colors?
(1 answer)
Closed 7 months ago.
I have an app with a tab bar that I would like to customize. The background color for the tab bar should be hex color #DC4848, and the icons white.
struct ContentView: View {
var body: some View {
TabView {
// Home page tab
NavigationView {
HomeView()
}
.tag(0)
.tabItem {
Image(systemName: "house")
.resizable().aspectRatio(contentMode: .fit)
.foregroundColor(.white)
Text("Home")
}
// Explore Page
NavigationView {
PreviewView()
}
.tag(1)
.tabItem {
Image(systemName: "magnifyingglass")
Text("Explore")
}
// Library Page
NavigationView {
HomeView()
}
.tag(2)
.tabItem {
Image(systemName: "ellipsis")
Text("More")
}
}
}
}
I tried accent color but it didn't work.
I ran into this problem myself. Just add this code to the top of your content view and it should fix it.
init() {
UITabBar.appearance().unselectedItemTintColor = UIColor.white
UITabBar.appearance().backgroundColor = UIColor(Color(hex: "DC4848"))
UITabBar.appearance().backgroundImage = UIImage()
}
This question already has answers here:
How to show NavigationLink as a button in SwiftUI
(9 answers)
Closed 8 months ago.
I tried adding a NavigationLink without a NavigationView on another project and it worked.
However when I tried copy and pasting the code onto another project, it doesn't work.
Please help. I've tried testing it on an empty project and it doesn't work as well. I'm wondering what went wrong. I've checked the curly braces placement as well. All placed correctly...
import SwiftUI
struct Intro: View {
var body: some View {
ZStack {
VStack {
Image("CDM")
.resizable()
.frame(width: 500, height: 500, alignment: .center)
HStack {
Text("Welcome to Chatter")
.font(.system(size: 45, weight: .semibold, design: .rounded))
.foregroundColor(Color("Yellow"))
Image(systemName: "message.fill")
.font(.system(size: 45))
.foregroundColor(Color("Yellow"))
.padding()
}
Text("""
Note:
This experience is best viewed in Horizontal
""")
.font(.system(size: 30, weight: .semibold, design: .rounded))
.foregroundColor(.secondary)
.padding()
Button(action: {
print("intro2")
}) {
NavigationLink(destination: Intro2()) {
Text("Next")
.font(.system(size: 30, weight: .semibold ,design: .rounded))
.foregroundColor(.white)
.padding()
.background(Color("Purple"))
.cornerRadius(20)
}
}
}
}
}
}
struct Intro2: View {
var body: some View {
VStack {
Text("What you can do in this experience")
Button {
print("test")
} label: {
NavigationLink(destination: Main()) {
HStack {
Text("Click here to get started!")
.font(.system(size: 25, weight: .regular ,design: .rounded))
.foregroundColor(.white)
.padding()
.background(Color("Purple"))
.cornerRadius(20)
}
}
}
}
}
}
here is an example code, that shows the NavigationLink is not triggered if it is not inside a NavigationView. Comment-out the NavigationView and see the difference.
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct ContentView: View {
var body: some View {
NavigationView {
Button { print("testing") } label: {
NavigationLink(destination: Text("Intro link view")) {
Text("Click here to get started!")
}
}
}
}
}
Note that NavigationView will be deprecated, see https://developer.apple.com/documentation/swiftui/navigationview
As I mentioned, there is no need to use a Button, NavigationLink is already a button.
This question already has answers here:
Clear background for form sections in SwiftUI?
(2 answers)
Closed 2 years ago.
I have a SwiftUI section like so:
struct FormView: View {
var body: some View {
Form {
Section {
Button(action: {
}) {
HStack {
Spacer()
Text("Save")
.font(.headline)
.foregroundColor(.white)
Spacer()
}
}
.listRowInsets(.init())
.frame(height: 50)
.background(Color.blue)
.cornerRadius(15)
}.background(Color.clear)
}
//.background(Color.red)
.background(LinearGradient(gradient: Gradient(colors: [.green, .red]), startPoint: .leading, endPoint: .trailing))
.edgesIgnoringSafeArea(.all)
}
}
struct WelcomeScreen: View {
var body: some View {
FormView().background(Color.red)
.onAppear {
UITableView.appearance().backgroundColor = .clear
}
}
}
And it looks like this:
How can I get rid of the white background color of the section? I've tried adding .background(Color.clear) but that did nothing.
Here is possible solution - use list row background color same to parent background.
Tested with Xcode 12.1 / iOS 14.1
struct FormView: View {
var body: some View {
Form {
Section {
Button(action: {
}) {
HStack {
Spacer()
Text("Save")
.font(.headline)
.foregroundColor(.white)
Spacer()
}
}
.listRowInsets(.init())
.listRowBackground(Color.red) // << here !!
.frame(height: 50)
.background(Color.blue)
.cornerRadius(15)
}
}.background(Color.red).edgesIgnoringSafeArea(.all)
}
}
When dealing with a non-solid color, add
.onAppear {
UITableViewCell.appearance().backgroundColor = UIColor.clear
}
and set
.listRowBackground(Color.clear)
I am not gonna lie, but the modifiers in SwiftUI are super tricky. I want to get rid of the grey area above my list. I have tried all, padding, offset, frame, you name it. It's still there. Why is it there anyway. Is it some kind a header that I could possibly undefine? Anyway, here is the code:
List{
ForEach(prim, id: \.id) { value in
GeometryReader { geometry in
HStack {
Text(value.label)
.font(.system(size: 12))
.padding(.vertical, 0)
.frame(width: geometry.size.width/4)
Spacer(minLength: geometry.size.width/4)
TextField("", value: value.data , formatter: NumberFormatter())
.font(.system(size: 12))
.padding(.vertical, 0)
.keyboardType(.numberPad)
.textFieldStyle(RoundedBorderTextFieldStyle())
}.padding(.top, 0)
}.padding(.top, 0)
}.padding(.top, 0)
}
.padding(.top, 0)
.listStyle(GroupedListStyle())
I have not defined the grey area, so why is it there? It pushes my list down and so my third item in the list disappears.
If it is not empty NavigationView (because it is not clear where is this List placed), then it is due to used list style.
You can use instead plain style
}
.padding(.top, 0)
.listStyle(PlainListStyle())
Before var body: some View put this:
init()
{
UITableView.appearance().backgroundColor = .clear
}
What is an effective & effecient way to get the Dismiss button (X) into the top right corner?
I'm struggling with container alignment... can't say I GROK it.
Needless to say ... this ain't it!
var body: some View {
ZStack {
Image("Biz-card_2020")
.resizable()
.edgesIgnoringSafeArea(.all)
HStack(alignment: .top) {
VStack() {
Spacer(minLength: 5) // vertical space
HStack() {
Spacer()
// close Welcome page (X) button
Button(action: {
//print(" - Button to dismiss page \(self.isPresented)")
self.isPresented = false // dismiss the Welcome view
//print(" - after action Button to dismiss Welcome page \(self.isPresented)")
}, label: {
Image(systemName: "xmark.circle" )
.scaledFont(name: "Georgia", size: Const.titleText)
.minimumScaleFactor(0.3)
.accentColor(.white)
.padding(10)
})
}
Spacer()
}
}
}
}
You need to remove Spacer(minLength: 5) and replace it with padding for HStack.
Spacer(minLength: 5) doesn't mean its length will be exactly 5 (only that the minimum length will be 5).
You may also want to extract close button to another function for clarity.
Try the following:
struct ContentView: View {
...
var body: some View {
ZStack {
Image("Biz-card_2020")
.resizable()
.edgesIgnoringSafeArea(.all)
closeButton
}
}
var closeButton: some View {
VStack {
HStack {
Spacer()
Button(action: {
...
}) {
Image(systemName: "xmark.circle")
.padding(10)
}
}
.padding(.top, 5)
Spacer()
}
}
}
ZStack can be configured using .topTrailing etc. You should use those alignments to configure your view. Using something like Spacer() is going to cause the rest of your views to get pushed down.
ZStack(alignment: .topTrailing) {
// your code here
}
If you need to move your code a bit more, use either padding, or offset modifiers.