Custom Styles für Qt Quick Controls

Hmm ich möchte meinem Knopf eine andere Farbe und Form geben aber es gibt im QtQD keine Farbauswahl für mein Button Objekt.  Also wie stelle ich das an?

Die Lösung heist:

import QtQuick.Controls.Styles 1.0

hiermit lässt sich der Style in unserem fall der Buttonstyle anpassen.

Dazu müssen wir bei unserem Button folgenden Code einfügen:

 Button {
          id: button1
          x: 130
          y: 38
          width: 100
          height: 100
          style: ButtonStyle 
                {
                 background: Rectangle 
                      {
                        color: control.pressed ? "green" : "blue"  //ist der Knopf gedrückt wenn nein blau wenn ja grün
                        implicitWidth: 100                         //wird keine Größe angegeben werden die impliciten größen verwendet 
                        implicitHeight:100
                        border.width: control.activeFocus ? 2 : 1 //wird mit tab auf activer focus geschaltet verändert sich der Button Rand
                        border.color: "#999"
                        radius: width/2 // die Größe halbiert ergibt einen Runden Button
                      }
                 }
          }

Der Ternary Operator bedeutet folgendes: condition ? true-statement : false-statement

Schon haben wir einen bunten Knopf der grün wird wenn wir ihn drücken.
Ein bisschen hässlich sieht er ja schon aus unser Knopf um ihn zu verschönern belegen wir ihn mit einem Gradienten

also in die geschweifte Klammer von Style->Rectangle  folgendes einfügen:

  gradient: Gradient {
                        GradientStop { position: 0 ; color: control.pressed ? "lightgreen" : "blue" }
                        GradientStop { position: 1 ; color: control.pressed ? "darkgreen" : "darkblue" }
                     }

Es wird ein Farbübergang von position 0 auf position 1 gemacht (man kann beliebig viele Positionen einfügen) in unserem Fall wenn der Knopf nicht gedrückt ist von blue->darkblue und wenn er gedrückt ist von lightgreen nach darkgreen hier kann man auch jede Beliebige Farbe wählen von #fffff bis #00000. Der Gradient überschreibt die eigenschaft color daher can die Zeile color: control.pressed ? „green“ : „blue“ gelöscht werden

Jetzt schaut unser Knopf schon ansehnlicher aus das Problem  im QtQD wird der Runde Button manchmal nicht sofort angezeigt dort sieht man nach wie vor einen Eckigen Button mit den Standard styles.

Nach einem Neustart vom QtCreator sieht man aber auch hier den runden Entwurf.