UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Day 35 – Milestone: Projects 4-6: How do I render data past the settings initial form?

Forums > 100 Days of SwiftUI

So Im sorta struggling a bit at this point, my current code is:

struct ContentView: View {
    @State private var isRunning = false
    @State private var tables = 1
    @State private var numberOfQuestion = 2
    @State private var numberOfQuestions = [5, 10, 20]

    var body: some View {
        NavigationView {
             Group {
                Form {
                    Section(header: Text("Select up to which table you feel like practicing today")) {
                        Stepper(value: $tables, in: 1...12){
                            Text("\(tables)")
                        }

                    }
                    Section(header: Text("How many questions do you wish to be asked?")) {
                        Picker("Questions to be asked", selection: $numberOfQuestion) {
                            ForEach(0 ..< numberOfQuestions.count) {
                                Text("\(self.numberOfQuestions[$0])")
                            }
                        }.pickerStyle(SegmentedPickerStyle())
                    }
                    Button("Lets Play!") {
                        // initiate game

                    }
                }

            }

            .navigationBarTitle("LearnMultiTables")
        }

    }

}

My current idea is to add a "Play" button beneath the settings form which would trigger a state or binding variable which will result in the random questions being shown in the screen (in the same screen, just below the settings).

Common sense tells me this play button along with any other view I want to show should be placed outside the form, since the form is meant for settings only and theres no reason to put anything else in there but settings. Plus, if I add it within the form, SwiftUI formats my button with whatever format for buttons within forms SwiftUI considers reasonable, and thats somethink I do not want.

Thing is when I try and add the button after the form curly brace, it doesnt get rendered at all. Like literally it seems to be ignoring it or at least placing it off screen so I cant see it.

Any clue as to what could be going on here? Might have something to do with both the group and form both taking up the entire screen size?

Something tells me the answer to this is super easy but ive been struggling with this since I woke up so I figured id just ask away and ease some of the pain, haha.

PD: Is the game meant to be played on a single initial screen like im planning to do? If so, is there any reason to use a navigationView besides being able to add a fancy navigationBarTitle (tbh, thats the only reason I added one since I wont be transitioning from one view to another ).

Thanks!

PD2: Stay home fellas!

3      

Hi Stompy, if you want to have your button outside the form, put the form and the button on a VStack. There is no reason you won't see the button. Use a Spacer() if you want any VStack/HStack to take all the place. Other thing that can help you : by default the form seems to take all the place it can. But you can frame it (modifier) if you want to controle its size.

It's funny because I'm at the same point as you in training. For my part i didn't use any form for the settings :

Initially I wanted a form for the picker (to have the navigation style picker) but finally i chose the SegmentedPickerStyle(). I try to finish the game today. Hoping it can help you, I'm starting like you...

3      

Hi Stompy, if you want to have your button outside the form, put the form and the button on a VStack. There is no reason you won't see the button. Use a Spacer() if you want any VStack/HStack to take all the place. Other thing that can help you : by default the form seems to take all the place it can. But you can frame it (modifier) if you want to controle its size.

It's funny because I'm at the same point as you in training. For my part i didn't use any form for the settings :

Initially I wanted a form for the picker (to have the navigation style picker) but finally i chose the SegmentedPickerStyle(). I try to finish the game today. Hoping it can help you, I'm starting like you...

Hey! Thanks so much for getting back to me!

Wow, it seems your skills up to this point in the course are far better than mine, haha. That app looks amazing!

Putting the form and the button on a VStack did the trick. Thanks! However, its now centered on the screen (https://prnt.sc/rmmpx4), which leads me to question 1) below!. How can I position it to the top?

1) Im having a hard time aligning my views, I tried making that green background you have on top but for some reason it centers it on the screen, any clue as to how do I position a view to the top? I can do this by using the .offset modifier and take it all the way up I guess but I think thats not a good idea.

2) In your app, where will the questions be displayed once you press the play button? Are you using a navigationView and as such will present the questions in another screen?

Im not trying to be spoonfed or anything here, but if you could post a bit of your code that would also help a bunch! Just to have a visual picture of the whole alignment of views part, which I seem to be struggling quite a bit here, haha.

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Thank you Stompy, I just try to apply as much as I have seen so far in the training, no more. if you don't understand something like the alignment of the elements, I advise you to go back in the training because it is well explained. Do not hesitate, for my part I spent 2 days training on the closures until it sinks deep into my skull. No matter how long it takes you have to understand everything before moving on to the next chapter.

1) especially do not use offset, it is not made for that (it's mainly used for overlay) You must understand this rule : an element is placed at the center of its parent, until it takes all the place. So you have to make your children take all the place of the parent to do what you want. for example, past it to a new project to see the result :

VStack {
                Text("TOP")
                Spacer()
                Text("BOTTOM")
            }

and if you do this it's the same :

VStack {
                Text("TOP")
                Color.yellow
                Text("BOTTOM")
            }

because a spacer() or a Color expends to take all the place they can, pushing content around the edges.

2) i don't use navigationVue at all. i simply make a ZStack to put my settings above the game. And you use a simple @State to toggle settings. My game is something like this :

if it can help you. I will share the project if you want when I have finished (in a day or two)

3      

Thank you Stompy, I just try to apply as much as I have seen so far in the training, no more. if you don't understand something like the alignment of the elements, I advise you to go back in the training because it is well explained. Do not hesitate, for my part I spent 2 days training on the closures until it sinks deep into my skull. No matter how long it takes you have to understand everything before moving on to the next chapter.

1) especially do not use offset, it is not made for that (it's mainly used for overlay) You must understand this rule : an element is placed at the center of its parent, until it takes all the place. So you have to make your children take all the place of the parent to do what you want. for example, past it to a new project to see the result :

VStack { Text("TOP") Spacer() Text("BOTTOM") } and if you do this it's the same :

VStack { Text("TOP") Color.yellow Text("BOTTOM") } because a spacer() or a Color expends to take all the place they can, pushing content around the edges.

2) i don't use navigationVue at all. i simply make a ZStack to put my settings above the game. And you use a simple @State to toggle settings. My game is something like this :

if it can help you. I will share the project if you want when I have finished (in a day or two)

Thank you so much for the in depth reply!

Ive been able to progress a little bit with the challenge with the help you provided, however I really do seem to be struggling quite a lot with how to layout and position views on the screen, so I guess ill need to go back a bit and re read some concepts before I continue with all this.

If you can, please share your code so I can take a glimpse at how you positioned your elements, just so I can have a reference and compare with mine to see what I did wrong.

Again, thank you so so much! Reach out to me once you finish and please stay home!

3      

Hi, I improved the design a bit. (I had a problem with the clickable surface of the buttons but it is solved with the overlay) This mini game is almost finished.

I just have to display the final score and tell the player where he got it wrong. By cons I still have a big concern to resolve is having a clean display on all types of iPhone ... For now it's ok only on iPhone 11 but I'll look at it. I put the current code at your disposal anyway, although it is not finished, if it can already help you. https://drive.google.com/file/d/1tbwEFrVtl3iEdgOy6ZviSEJIbFCNgdWf/view?usp=sharing I will update when it will be finished.

3      

Hi, I improved the design a bit. (I had a problem with the clickable surface of the buttons but it is solved with the overlay) This mini game is almost finished.

I just have to display the final score and tell the player where he got it wrong. By cons I still have a big concern to resolve is having a clean display on all types of iPhone ... For now it's ok only on iPhone 11 but I'll look at it. I put the current code at your disposal anyway, although it is not finished, if it can already help you. https://drive.google.com/drive/folders/1jMbZMCmkqbfyZe9n3D5v-CvkwVrvoMMX?usp=sharing I will update when it will be finished.

Wow! That UI looks amazing, congratz!

Im definitely already learning a bit from your code, I certainly do not yet master your skills but Im improving. Thanks!

I wanted to make the game compile and run on a simulator but it did not work, Im getting some sort of storyboard error.

Pic: https://prnt.sc/rodmt5

Please let me know if you upload the code when you finish it, It'd be super cool to be able to see and learn from it!

3      

Hi, thank you. Apparently it's a problem with Google cloud which doesn't like to store these kind of files (i had same issue when download). I updated the file, test, and it's good, no more problem with a simple zip :) https://drive.google.com/file/d/1tbwEFrVtl3iEdgOy6ZviSEJIbFCNgdWf/view?usp=sharing I'm in a hurry to finish this and move on to the training which is so nice.

3      

@linkiliz Thank you for posting a link to your code, I tried to compare with my logic since there is a bug in my code. I show an alert only if there is a wrong answer and then I get issues with the number of questions shown going out of whack. Would you mind having a look at the function below? This is where I check the user answer:

func checkUserAnswer() {
        guard let answer = Int(userAnswer) else {
            userAnswer = ""
            return
        }

        if questions[currentQuestion].answer == answer {
            correctAnswers += 1
        } else {
            alertTitle = "Wrong!"
            alertMessage = "It is \(self.questions[currentQuestion].answer)."
            showingAlert = true
        }
        userAnswer = ""
        if currentQuestion+1 == numberOfQuestions {
            alertTitle = "Game ended! Your score is \(correctAnswers)."
            alertMessage = "Would you like to play again?"
            showingAlert = true
            activeGame = false
        } else if currentQuestion+1 < numberOfQuestions {
            currentQuestion += 1
        }
    }

I've noticed you're using DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) but since this is not something that has so far come up in the 100 days of SwiftUI course, I'm not sure how you've learned about it or why we should be using it? Do you mind explaining a little? Thanks!

3      

I'd appreciate anybody's input. Please see above, thanks!

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.