Challenge: Center the Slider | raywenderlich.com


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/18176818-your-first-ios-and-swiftui-app-polishing-the-app/lessons/22
1 Like

In this video Ray speaks of moving the slider view to content view’s ZStack, but instructions on screen indicate “HStack” instead. Probably a typo, but it messed me up a little, as when I paused the video I was looking at “HStack” and wouldn’t find that in my code.

1 Like

my ocd got kicked off from that hstack and vstack! haha

Hi @arrteme and @vh62, sorry about this typo - it’s now been fixed :]

Thanks for pointing this out!

Hi Ray,

I tried to put the 100 padding (bottom) to the InstructionView, but it seems it also applies to the InstructionText view inside it. Here is part of my code, and how it looks like in preview (also Similator):

struct ContentView: View {
    
    @State private var alertIsVisible = false
    @State private var sliderValue  = 50.0
    @State private var game = Game()
    
    var body: some View {
        ZStack {
            BackgroundView(game: $game)
            VStack {
                InstructionView(game: $game)
                    .padding(.bottom, 100)
                HitMeButton(game: $game,
                            alertIsVisible: $alertIsVisible,
                            sliderValue: $sliderValue)
            }
            SliderView(sliderValue: $sliderValue)
        }

    }
}

struct InstructionView: View {
    @Binding var game: Game
    
    var body: some View {
        InstructionText(instruction: "🎯🎯🎯\nPut the bullseye as close as you can to")
            .padding(.leading, 30.0)
            .padding(.trailing, 30.0)
        BigNumberText(number: String(game.target))
        
    }
}

image

I compared with the video-yfsa2-materials/ContentView.swift at versions/1.0 · raywenderlich/video-yfsa2-materials (github.com), but it seems there is no difference.

Am I making a mistake here?


A tiny update here

I just tried adding a padding (top) to the Hit me button instead, and it works!

ZStack {
            BackgroundView(game: $game)
            VStack {
                InstructionView(game: $game)
                HitMeButton(game: $game,
                            alertIsVisible: $alertIsVisible,
                            sliderValue: $sliderValue)
                    .padding(.top, 100)
            }
            SliderView(sliderValue: $sliderValue)
        }