2017-03-11 3 views
0

Ändern der style einer Komponente, scheint alle die Funktionen des Standardstils zu ersetzen. Gibt es eine Möglichkeit, nur ein Merkmal zu ändern?QT QML wie man nur eine Eigenschaft eines, sagen wir, Button-Stil ändern

Zum Beispiel nehme ich an, ich möchte einen roten Knopf;

import QtQuick 2.7 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 

ApplicationWindow 
{ 
    visible: true 
    width: 640 
    height: 480 

    Button 
    { 
     height: 200 
     width: 200 
     text: "Press me" 
     style: ButtonStyle 
     { 
      // changes background but also throws away everything else 
      // in standard button style 
      background: Rectangle { color: "red" } 
     } 
    } 
} 

Neudefinition ButtonStyle mit einem background zum Ändern der Farbe der Schaltfläche funktioniert gut, aber dann alles andere im System standardmäßig ButtonStyle ist verschwunden. Zum Beispiel, der Rahmen und der Klick markieren.

Wie man nur eine Funktion ändert und den Rest behält?

Es tut uns leid, wenn dies zuvor gefragt wurde.

Dank,

aktualisiert

Die obige Frage für Kontrollen 1 war, aber das gleiche Problem existiert für Kontrollen 2. Hier ist das gleiche Codebeispiel für Kontrollen 2.

import QtQuick 2.7 
import QtQuick.Controls 2.1 

ApplicationWindow 
{ 
    visible: true 
    width: 640 
    height: 480 

    Button 
    { 
     height: 200 
     width: 200 
     text: "Press me" 

     // changes background but also throws away everything else 
     // in standard button style 
     background: Rectangle { color: "red" } 
    } 
} 

Antwort

1

Vorwort
Der Zweck von QtQuick.Controls 1.4 war, Kontrollen mit natives Aussehen und Gefühl anzubieten. Wenn Sie einfachere einstellbare Steuerelemente haben möchten und das native Aussehen nicht benötigen, sollten Sie das neuere und schnellere QtQuick.Controls 2.0 berücksichtigen.

Haupt
Was Sie wünschen ist - afaik - unmöglich, da der Standardstil Image aus zwei Rectangles und einer besteht, wo die Image das wichtigste zu sein scheint. Sie können die Bilder in der mingw -Paket an diesem Ort finden:

Qt \ Qt5.7.0 \ 5.7 \ mingw53_32 \ qml \ QtQuick \ controls \ Styles \ Base \ images

zu Zugriff auf die Objekte der Steuerung, können Sie sie hier finden:

Button { 
     id: but2 
     x: 50 
     onClicked: console.log(this.children[1].item.children[0].item.children[0], this.children[1].item.children[0].item.children[1], this.children[1].item.children[0].item.children[2]) 
    } 

die einfachste Lösung, also Pop in den Sinn verwenden Colorize

import QtQuick 2.0 
import QtQuick.Window 2.0 
import QtQuick.Controls 1.4 
import QtQuick.Controls.Styles 1.4 
import QtGraphicalEffects 1.0 
Window { 
    width: 1024 
    height: 800 
    visible: true 

    Button { 
     id: but 
     text: 'test' 
    } 
    Colorize { 
     source: but 
     anchors.fill: but 

     // values from the documentation example. 
     hue: 0.0 
     saturation: 0.5 
     lightness: -0.2 
    } 
} 

Oder um allgemeiner zu sein: Um nur das Styling anzupassen, gehen Sie für Shader.

QtQuick.Controls 2.0
Dort haben Sie einen anderen Fall: die background ist ein Rectangle nicht nur die Component. Aber wenn du dir keins selbst zuordnest, wird es erst nach dem Button erstellt.

ist unmöglich, da der Hintergrund nicht instanziiert wird, wenn Sie versuchen, die Farbe zuzuweisen.
Sie könnten den Component.onCompleted Handler verwenden, dies zu tun:

Button { 
    id: but1 
    Component.onCompleted: background.color = 'red' 
} 

Aber natürlich kann man die Binding des ursprünglichen Stil zu überschreiben, dass der Farbwechsel behandelt, während die Button wird gedrückt beeing

Button { 
    id: but1 
    Component.onCompleted: background.color = Qt.binding(function() { return (but1.pressed ? 'red' : 'green') } 
} 

würde den Farbwechsel wieder ermöglichen, aber Sie werden nicht die Originalfarbe haben. Sie könnten die Originalfarbe retrive durch Ausprobieren:

Button { 
    id: but1 
    onPressed: console.log(this.background.color) 
    onReleased: console.log(this.background.color) 
} 

Dies wird ausgegeben Sie die Farben der beiden Staaten für pressed. Aber vielleicht gibt es mehr! So ist die einfachste Lösung ist ein bedingtes Binding, da dies zu nutzen:

Button { 
    id: but1 
} 

Binding { 
    when: but1.pressed 
    target: but1 
    property: 'background.color' 
    value: 'red' 
} 
+0

Scheißer. Entschuldigung ja, ich sollte Controls2.Button verwenden. Ich habe das geändert, aber es ist das gleiche außer 'Label' ->' contentItem'. Dann habe ich das gleiche Problem, wenn ich überschreibe, sagen 'Hintergrund. Ich mag deine Ideen zu Shadern und 'Colorize'. Ich denke, es ist eine bessere Möglichkeit, Stil hinzuzufügen, als diese Eigenschaften zu ändern. FWIW, ich denke, die Eigenschaften sind schlechtes Design, wenn man das Original nicht irgendwie erben kann. Vielen Dank. Ich werde mit deinen Vorschlägen gehen. –

+1

Bitte aktualisieren Sie Ihre Frage, um zu reflektieren, was Sie tatsächlich verwenden. Sie sind zwei sehr unterschiedliche Styling-APIs. – Mitch

+0

Obwohl ich bereits die Antwort auf einige Möglichkeiten, die Sie mit dem 'QtQuick.Controls 2.x 'haben, aktualisiert habe, wäre es gut, die Frage zu aktualisieren, damit sie auch anderen helfen kann. Bitte vergessen Sie nicht, die Antwort zu akzeptieren, wenn sie enthält, was Sie gesucht haben. Bitte tun Sie das auch, für alle Antworten auf Ihre anderen Fragen, denn dies ist beides: Höflich zu den Leuten, die sich die Zeit genommen haben zu antworten, und Leuten zu helfen, die Antwort zu finden, wenn sie das gleiche Problem haben wie Sie. – derM