Changing background color of a textview

I have a View with a few TextViews, which look almost fine except the background color of the textviews that is white, where I would like it to be blue:

Here the code:

               VStack {
                    HStack {
                        TextField("mot", text:$tfMot)
                            .dynamicTypeSize(.xLarge)
                            .disabled(true)
                            .background(Color("fondbleu"))
                            
                        TextField("orthoAlt", text:$tfOrthoAlt, axis: .vertical)
                            .dynamicTypeSize(.small)
                            .background(Color("fondbleu"))
                            .disabled(true)
                    }
                    TextField("Définition", text:$tfDefinition, axis: .vertical)
                        .background(Color("fondbleu"))
                        .disabled(true)
                    TextField("Anagrammes", text:$tfAna, axis: .vertical)
                        .background(Color("fondbleu"))
                        .disabled(true)
                    TextField("Extensions +1", text: $tfExt, axis: .vertical)
                        .background(Color("fondbleu"))
                        .disabled(true)
                }

As one can see, the modifier:

                            .background(Color("fondbleu"))

has no effect.

I found out that the background color would change only if I ad the modifier:

                            .textFieldStyle(.plain)

But then, apparently all the attributes of the default text field style are lost and the text is stuck in the upper right corner of the field:

My problem now is how to get the text back in the vertical center of the field.

By the way, I tried to fix it using the attributes inspector panel but this one is frozen:

Any one can help me out ?

Replies

You have to:

  • declare fondbleu in a color asset catalog
  • set the stack background:
            VStack {
                HStack {
                    TextField("mot", text:$tfMot)
                        .dynamicTypeSize(.xLarge)
                        .disabled(true)
                        .background(Color("fondbleu"))
                    
                    TextField("orthoAlt", text:$tfOrthoAlt, axis: .vertical)
                        .dynamicTypeSize(.small)
                        .background(Color("fondbleu"))
                        .disabled(true)
                }
                TextField("Définition", text:$tfDefinition, axis: .vertical)
                    .background(Color("fondbleu"))
                    .disabled(true)
                
            }
            .background(Color("fondbleu"))