Making items in HStack visible / invisible later

Question

I have a game view that has a board and I have several parts in a VStack and the final 2 HStack are some 'buttons' and then a row of tiles for the game.

        VStack(spacing: 5) {  
        HStack {}
        HStack {}
        ......
        ......
        HStack {

                ResetButton {
                    self.returnLetters()
                }
                NewLine {
                    self.newLine()
                }
                CalcButton {
                    self.calcButton()
                }
                StartButton {
                                   self.startButton()
                               }
                }

        HStack {
            ForEach(0..<7) { number in
                Letter(text: self.tray[number], index: number, onChanged: self.letterMoved, onEnded: self.letterDropped)
                            }
                }

This sets the screen all very well However I would ideally not want to show the Start and Calc buttons until later in the game, or indeed replace the Reset and NewLine buttons with Start and Calc.

As it looks

Ideally What I would have until later in game

Changing to this on the last go

Is there a way to not show items in the Stack or add items to the stack later please?

thanks

score 0 · Answer 1 · answered Feb 03 '20 at 14:49

Here is a pattern, introduce corresponding @State variable with desired initial state value. The state can be changed later at any time somewhere in view and view will be updated automatically showing conditionally dependent button:

  @State private var newLineVisible = false // initially invisible
  ...
  var body: some View {
        ...
        HStack {

                ResetButton {
                    self.returnLetters()
                }
                if self.newLineVisible { // << include conditionally
                   NewLine {
                       self.newLine()
                   }
                }
                CalcButton {
                    self.calcButton()
                }

score 0 · Accepted Answer · answered Feb 03 '20 at 14:50

Use @State boolean variable that define if the buttons should be shown or not, when you change their value the view will be refreshed.

@State var isResetVisible = true
...
if isResetVisible {
    ResetButton {
        self.returnLetters()
    }
}

then you set it to false somewhere and it will hide

Making items in HStack visible / invisible later

2 Answers2