web-dev-qa-db-fra.com

Ubuntu SDK QML comment changer la couleur de fond de TextField

Dans certaines situations, la couleur d'arrière-plan de mon application QML MainView donne à l'entrée de champ de texte un lettrage gris sur un fond brun également foncé. Cela rend presque impossible la lecture du texte saisi dans le champ de texte.

Lorsque vous saisissez du texte, tout va bien, car l'arrière-plan devient blanc et le texte sombre est maintenant visible, mais lorsqu'un texte n'est pas sélectionné, le texte est illisible.

Existe-t-il un moyen de changer la couleur d'arrière-plan d'un champ de texte? J'ai déjà essayé de changer la couleur du texte, et cela fonctionne lorsque vous ne saisissez pas de texte, mais dès que je clique dans le champ de texte pour saisir du texte, je ne peux plus le lire car la couleur de fond du champ de texte devient blanche et la couleur du texte est également très léger.

Quelqu'un a-t-il une solution à ce problème qu'il pourrait suggérer?

Merci

application-developmentubuntu-touchubuntu-sdkqml
4
Randy_O

Le SDK Ubuntu est livré avec son propre élément TextField . Sur un fond sombre, vous pouvez utiliser la version Qt par défaut en important QtQuick.Controls (14.04 uniquement). Il restera toujours un fond blanc mais peut également être stylé avec TextFieldStyle:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

MainView {
    width: 400
    height: 300
    backgroundColor: "black"

    Column {
        spacing: units.gu(2)
        anchors.centerIn: parent
        TextField {
            placeholderText: "ask"
        }
        TextField {
            placeholderText: "Enter text"
            text: "ubuntu"
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    radius: 5
                    color: "gold"
                    implicitWidth: 100
                    implicitHeight: 24
                    border.color: "#333"
                    border.width: 1
                }
            }
        }
    }
}

Cela ressemblera à la capture d'écran ci-dessous:

enter image description here

Source: http://qt-project.org/doc/qt-5/qml-qtquick-controls-styles-textfieldstyle.html

6
Sylvain Pineau