Enable a view to be changeable inside a view

Question

This is the array of dialogue that displays the text.

import SwiftUI

var Dialogue: [String] = [
    “First line”,
    “Second line”,
    “Third line”
]

This is a view that manage the design of the dialogue, which is called “DialogueView”.

@State var dialogue: String = Dialogue[0]
…
ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .frame(width: .infinity, 
                               height: 90)
                        .padding(.trailing, 10)
                        .opacity(0.8)
                    Text(dialogue)
                        .foregroundColor(.black)
                        .padding()
                        .font(.system(size: 20))
                }

This is another view that display the dialogue. I add the onTapGesture because I want the user to tap the screen and change the text.

@State var DialogueIndex: Int = 0
…
VStack {
                DialogueView(dialogue: Dialogue[DialogueIndex])
                    .padding()
                Spacer()
                Text("- Tap to continue -")
                    .foregroundColor(.black)
                    .font(.system(size: 30))
                    .padding(.horizontal)
                    .background(
                        RoundedRectangle(cornerRadius: 10)
                            .opacity(0.7)
                    )
                    .onTapGesture {
                        DialogueIndex += 1
                    }
            }

It does not work. Can anyone point out the mistakes? Thanks!!

Answer 1

You need to change DialogueView like this

struct DialogueView: View {
    let dialogue: String      /// Here is the change
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 20)
                .frame(width: .infinity,
                       height: 90)
                .padding(.trailing, 10)
                .opacity(0.8)
            Text(dialogue)
                .foregroundColor(.black)
                .padding()
                .font(.system(size: 20))
        } 
    }
}

As making it with @State

@State var dialogue: String = Dialogue[0]

Will set it equal to the first element of the array regardless of the parameter value passed

BTW you can make it like this also

var dialogue: String = Dialogue[0]

or

var dialogue: String = ""

By just removing the @state