I am very new to swiftui, and am making a simple game for learning reasons. I have no idea why this error would show because I did basically the same thing a couple of lines up. If you want to check the code yourself just use some random images. I cant post this post because it has to much code. it is telling me that I have to add more text so that is what I am doing right now, you do not have to read this.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
Image("background")
.ignoresSafeArea()
VStack{
Spacer()
Image("logo")
Spacer()
HStack {
Spacer()
Image("card3")
Spacer()
Image("card4")
Spacer()
}
Spacer()
Image("dealbutton")
Spacer()
HStack{
Spacer()
Text("Player")
Spacer()
Text("CPU")
Spacer()
}
.font(/*#START_MENU_TOKEN#*/.title/*#END_MENU_TOKEN#*/)
.foregroundColor(.white)
Spacer()
HStack{
Spacer()
Text("0")
Spacer()
Text("0")
Spacer()
}
Spacer() //here is the error
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Note Spacer() is a view, and so you are exceeding the number of views (10) allowed inside another view. Try some variations of this, or use Group {...}:
struct ContentView: View {
var cardView: some View {
Group {
Spacer()
HStack {
Spacer()
Image("card3")
Spacer()
Image("card4")
Spacer()
}
Spacer()
}
}
var textview: some View {
Group {
Spacer()
HStack{
Spacer()
Text("0")
Spacer()
Text("0")
Spacer()
}
Spacer()
}
}
var devView: some View {
Group {
Spacer()
HStack{
Spacer()
Text("Player")
Spacer()
Text("CPU")
Spacer()
}
Spacer()
}
}
var body: some View {
ZStack{
Image("background")
.ignoresSafeArea()
VStack{
Spacer()
Image("logo")
Spacer()
cardView
Image("dealbutton")
devView
.font(.title)
.foregroundColor(.white)
textview
Spacer()
}
}
}
}
Related
I want to prevent the 3 bars from leaving the screen. Once they have reached the top of the screen they will remain there until scrolling has been reset. So only the circle and remaining elements will continue to scroll.
If possible it would also make sense for the circle to rest as well but further off screen.
import SwiftUI
struct ContentView: View {
var body: some View {
ScrollView {
LazyVStack {
Circle()
HStack {
Rectangle()
.frame(height: 50)
.padding()
Rectangle()
.frame(height: 50)
.padding()
Rectangle()
.frame(height: 50)
.padding()
}
ForEach(0..<20) { index in
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
}
}
.padding()
}
}
}
You could turn the rectangles into a section for your LazyVStack list and then set the
stack view to pin the section headers using LazyVStack(pinnedViews:[.sectionHeaders]) Please see Apple documentation for more details.
struct ContentView: View {
var body: some View {
ScrollView {
LazyVStack(pinnedViews:[.sectionHeaders]) {
Circle()
Section(header:
HStack {
Rectangle()
.frame(height: 50)
.padding()
Rectangle()
.frame(height: 50)
.padding()
Rectangle()
.frame(height: 50)
.padding()
}) {
ForEach(0..<20) { index in
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
}
}
}
.padding()
}
}
}
This is my code:
struct Account: View {
var body: some View {
VStack {
ScrollView {
HStack {
Text("Account")
.font(.largeTitle)
.fontWeight(.bold)
Spacer(minLength: 0)
}
.padding()
.background(Color.indigo)
VStack {
Text("Doe, John Jack")
.font(.title)
Divider()
.foregroundColor(Color.indigo)
HStack {
Text("")
}
}
Spacer(minLength: 0)
VStack {
Button(action: {
}) {
Text("Log Out")
.foregroundColor(.red)
.fontWeight(.bold)
}
}
}
}
}
}
If you run the code above, you will see that the indigo doesn't go behind the time and battery precentage. How can I make it do that?
Try like this:
struct Account: View {
var body: some View {
VStack {
ScrollView {
HStack {
Text("Account")
.font(.largeTitle)
.fontWeight(.bold)
Spacer(minLength: 0)
}
.padding()
.background(Color.indigo)
VStack {
Text("Doe, John Jack")
.font(.title)
Divider()
.foregroundColor(Color.indigo)
HStack {
Text("")
}
}
Spacer(minLength: 0)
VStack {
Button(action: {
}) {
Text("Log Out")
.foregroundColor(.red)
.fontWeight(.bold)
}
}
}.padding(.top, 66)
}
.background(Color.indigo)
.edgesIgnoringSafeArea(.all)
}
}
You would also have to add some top padding to the ScrollView since ignoring safe area is going to push all your views to the margins
You should ignore the top safe area for this:
.ignoresSafeArea(.container, edges: .top)
Full working example
struct ContentView: View {
var body: some View {
Color
.indigo
.ignoresSafeArea(.container, edges: .top)
}
}
Does anyone know how to make the following view in SwiftUI?
HStack:
[ blank logo(centered) Skip(text)]
So I have the following HStack:
Zstack(alignment: .topLeading) {
VStack{
HStack {
Image("onboarding-logo")
.resizable()
.scaledToFit()
.frame(width: 150.0, height: 150.0)
.padding(.top, 35)
}
}
}
Does anyone know how I can have a "Skip" text in the top right corner of the screen, but also keep my logo centered and not have anything on the left side? I've tried Spacers and all, but I'm having no luck.
I would like to click "Skip" and then lead to another view.
There are many ways to achieve this. Here I have used LazyVGrid since other answers based on Stacks
struct ContentView: View {
var body: some View {
VStack {
LazyVGrid(columns: [GridItem(), GridItem(), GridItem()], content: {
Spacer()
Image(systemName: "star.fill")
.frame(width: 150, height: 150, alignment: .center)
.border(.gray)
Button(action: {
}, label: {
Text("Skip")
})
})
.border(.gray)
Spacer()
}
}
}
Is this the screen configuration you want?
The Zstack is used to center the Hstack into which the image is placed, and the new HStack uses a spacer to move the Text to the right.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
VStack {
HStack(alignment: .center) {
Image("farnsworth")
.resizable()
.scaledToFit()
.frame(width: 150.0, height: 150.0)
}
Spacer()
}
VStack {
HStack {
Spacer()
Button {
// do Something...
} label: {
Text("Skip>>")
.padding(.top, 10)
}
}
Spacer()
}
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Hey guys I had a quick question hopefully you guys are able to help. Im using swiftUI to make this app. When I use NavigationLink to get to different views there's always this extra space that I can't get rid of. I've tried
'.navigationbarIsHidden(true)'
but that just doesn't work at all
code for view 1:
struct MenuView: View{
var column = [GridItem(.adaptive(minimum: 160), spacing: 20)]
#StateObject var cartManager = CartManager()
var body: some View{
NavigationView{
VStack {
ScrollView(.vertical, showsIndicators: false){
LazyVGrid(columns: column, spacing: 20){
ForEach(productList, id: \.id){ product in
ProductCard(product: product)
.environmentObject(cartManager)
}
}.padding()
}
.navigationTitle("Menu")
.navigationBarTitleDisplayMode(.automatic)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
NavigationLink(
destination:
CartView()
.environmentObject(cartManager)
){
CartButton(numberOfProducts: cartManager.products.count)
}
}//TOOLBARITEM
}//TOOLBAR
}//VSTACK
}//NAVVIEW
}}
code for view 2:
struct CartView: View {
#EnvironmentObject var cartManager: CartManager
var body: some View {
NavigationView {
VStack {
// Text("Cart")
ScrollView(.vertical, showsIndicators: false){
if(cartManager.products.count > 0){
ForEach(cartManager.products, id: \.id){
product in
ProductRow(product: product)
.environmentObject(cartManager)
}
VStack {
HStack{
Text("Tax:")
.font(.title)
Spacer()
Text("$\(cartManager.tax, specifier: "%.2f")")
.bold()
}.padding()
HStack{
Text("Tip:")
.font(.title)
Spacer()
Text("$\(cartManager.tip, specifier: "%.2f")")
.bold()
}.padding()
HStack{
Text("Total:")
.font(.title)
Spacer()
Text("$\(cartManager.total, specifier: "%.2f")")
.bold()
}
}.padding()
}else{
Spacer(minLength: 300)
Image(systemName: "takeoutbag.and.cup.and.straw.fill")
.font(.largeTitle)
Text("Your cart is empty!")
.font(.title2)
Text("Add things to your order to continue!")
.font(.title2)
}
}
}
.navigationTitle("Your Order")
.navigationBarTitleDisplayMode(.automatic)
}
}
}
I am displaying some rows in a list (actually, 2 parallel lists in the example posted here), from a custom row view labeled EventRow.
In order to avoid bad UI on larger devices like an iPad, I limited the width of the EventRow to 200.
How could I get the EventRows to be centered in my lists on larger devices ?
I tried applying a .center alignment to the EventRows in the ForEach methods of my lists, tried doing the same on the lists as well, but nothing seems to work.
As an alternate solution, is there a way to set a MAX Spacer width ? I know you can set a minLength, but not a MAX it seems...
Here's a screenshot on the iPad Pro 11 sim :
The code for my EventRow file is as follows :
import SwiftUI
struct EventRow: View {
var body: some View {
VStack{
HStack {
Text("Text one")
Spacer()
Text("Text two")
}
HStack {
Spacer()
Image(systemName: "flame")
.font(.body)
Spacer()
} // END of second HStack
.padding(.top, -14)
} //END of Vstack
.frame(maxWidth: 200) // To limit width on larger devices
.listRowBackground(LinearGradient(gradient: Gradient(colors: [Color.white, Color.blue]), startPoint: .top, endPoint: .bottom))
}
}
struct EventRow_Previews: PreviewProvider {
static var previews: some View {
EventRow().previewLayout(.fixed(width: 300, height: 60))
}
}
And my ContentView :
struct ContentView: View {
struct listsSetup: ViewModifier {
func body(content: Content) -> some View {
return content
.frame(maxHeight: UIScreen.main.bounds.size.height/3)
.overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.blue, lineWidth: 1))
.padding([.top, .bottom])
}
}
#State private var selected : Int = 0
var body: some View {
VStack {
HStack {
VStack { // 1 list Vstack
VStack {
Text("List 1")
.padding(.top)
List {
EventRow()
EventRow()
} // END of 1st List
}
.modifier(listsSetup())
} // END of 1st list VStack
VStack { // 2nd Vstack
VStack {
Text("List 2")
.padding(.top)
List {
EventRow()
EventRow()
} // END of Landings List
}
.modifier(listsSetup())
} // End of 2nd List VStack
} // End of 1st & 2nd lists HStack
.padding(.top)
Spacer()
Picker("", selection: $selected){
Text("0").tag(0)
Text("1").tag(1)
}.pickerStyle(SegmentedPickerStyle())
Text("\(selected)")
} // END of VStack
} // END of body
}
Again, any help would be appreciated.
Just embed it in one more container, like below (tested with Xcode 11.4)
VStack {
VStack{
HStack {
Text("Text one")
Spacer()
Text("Text two")
}
HStack {
Spacer()
Image(systemName: "flame")
.font(.body)
Spacer()
} // END of second HStack
.padding(.top, -14)
} //END of Vstack
.frame(maxWidth: 200) // To limit width on larger devices
}.frame(maxWidth: .infinity) // << here !!