[Solved] QML color TextArea Background

taranaki

Hi everyone.

I am starting a new project with QML and I ran into this problem.

In my application (running on the Desktop) I have several TextAreas. I am using them because of the built-in scroll functionality and I would like the application to look consistent.
Most TextAreas are "readOnly: false", but I also need one TextArea that is "readOnly: true". I would like to visually distinguish this by changing the background color to gray when the user cannot edit the text.

Edit: I am aware of the enabled attribute. Unfortunately setting "enabled: false" makes it impossible for the user to select text. It would be nice if the user could still select text, therefore I am using the readOnly attribute.

So far I have tried using the backgroundVisible attribute together with a gray Rectangle behind the TextArea. This did not give any changes no matter what value backgroundVisible has. Maybe I am using it wrong/misunderstanding what the attribute does?

Also I tried to set the opacity of the TextArea, but I cannot manage to set the opacity of the text separately. Is there a way?

I have seen that there is a style attribute available. I am a bit reluctant to use it and not even sure how to use it. Would this be the way to go?

Thank you very much for your help.

dasun

As I know Qt 5.1 Qt Quick doesn't support change style for TextArea. But You can change background color in Qt 5.2
please follow this "link":http://doc-snapshot.qt-project.org/qt5-stable/qml-qtquick-controls-styles-textareastyle.html

Sample Qml:
@TextArea {
style: TextAreaStyle {
backgroundColor: "#eee"
}
}@

taranaki

Ok, very interesting. I guess I will have to consider using Qt 5.2 then instead of 5.1. Thanks a lot for the hint!

dasun

Your welcome! Please add [Solved] to the title. It may help someone with similar issue.

sgrahovac

I was excited to get this working using Qt 5.2 BETA, but unfortunately, this does not seem to work for me. The following is the simple code snippet I am using under Qt 5.2. Any help would be much appreciated.

import QtQuick 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Rectangle {
width: 800
height: 600

 gradient: Gradient {
     GradientStop { position: 0.0; color: "lightsteelblue" }
     GradientStop { position: 1.0; color: "blue" }
 }

 TextArea
 {

       width: 100

       height: 100

// This gives me error "TextAreaStyle" is not a type

        style: TextAreaStyle {

            backgroundColor: "#eee"

        }

 }

}

taranaki

It is not included in beta! You need to wait for the next release...

dasun

Ooops! It should work according to the documentation. It must be a bug. Can you report it?

taranaki

It's not, just check the git repository (it was added a few days AFTER beta)

dasun

ahh, My mistake, :)

Jens

There is another simpler way though. Just set the "backgroundVisible" property to false and place an image or a colored rectangle as the parent of the TextArea. That should work even in 5.2.