Willkommen zum zweiten Teil des Leitfadens zu Sketch Bridge für Qt Design Studio. Am Ende des ersten Teils haben Sie die erste Schaltfläche erstellt und dafür gesorgt, dass sie in verschiedenen Zuständen in Qt Design Studio funktioniert (im Rest des Tutorials als qds abgekürzt). Lassen Sie uns in diesem Teil zurückgehen und eine Menükomponente aus Instanzen dieser Schaltfläche erstellen und uns ansehen, wie die mcons und der Text für jede Instanz überschrieben werden.
Teil 2.1 - Erstellen einer Menükomponente mit Schaltflächeninstanzen
Lassen Sie uns also die Sketch-Datei öffnen und damit beginnen, das Hintergrundmenü zu erstellen, das groß genug ist, um alle vier Ihrer Schaltflächen aufzunehmen. Lassen Sie es uns vorerst ziemlich einfach halten - rechteckig.
Auch hier müssen Sie ein Rechteck erstellen, es in ein Symbol umwandeln und dann diese Instanz löschen und am Hauptsymbol auf Ihrer Symbolseite arbeiten.
Es ist möglich, die Größe und Farben des Rechtecks anzupassen, bis Sie zufrieden sind. In diesem Fall ist es möglich, die Einheiteneinstellungen zusammenzuführen, da Sie möchten, dass dort ein einfaches Einheitenobjekt beginnt.
Geben Sie dem Hintergrund auch eine qml-ID, in diesem Fall myMenu_Symbol_background .
Sobald Sie das Hintergrundmenü haben, können Sie Symbole verwenden, um die Schaltflächen aus der Hauptschaltflächenkomponente zu instanziieren, die Sie in Sketch erstellt und die Interaktionsfunktionalität in Design Studio hinzugefügt haben.
Gehen Sie dazu in das Skizzenmenü, um Assets hinzuzufügen, die Plus-Schaltfläche oben und gehen Sie zu Symbole/Dokument (Symbole/Dokument) - dies zeigt die aktuell im Dokument verfügbaren Symbole an. Hier gibt es vorerst nur ein Symbol, Ihre Schaltfläche, also fügen wir es der neuen Menükomponente hinzu.
Jetzt haben Sie die erste Kopie und Sie können diesen Vorgang einfach wiederholen, kopieren, einfügen oder mit Alt + Ziehen drei weitere Schaltflächen zum Menü hinzufügen.
Sobald dies erledigt ist, müssen Sie die qml-IDs überprüfen, die den neuen Symbolinstanzen zugewiesen sind, und während Sie dies tun, können Sie auch sicherstellen, dass das Menü eine gute qml-ID hat.
Beginnen wir also mit dem Menü, da dies ebenfalls ein Symbol ist, verwenden wir ein ähnliches Namensschema wie das letzte und nennen es myMenu_Symbol .
Jetzt können wir uns die Schaltflächen selbst ansehen, daher verwenden wir in diesem Fall das folgende Benennungsschema für diese Fälle. Es wird in etwa so aussehen:
myButton_myMenu_1
myButton_myMenu_2
myButton_myMenu_3
myButton_MyMenu_4
Aber was noch besser wäre, wäre ein spezifischer Name für jede Schaltflächenrolle, also überlegen wir uns, was diese Schaltflächen tun sollen. Basierend darauf, wie diese Benutzeroberfläche aussehen könnte, können wir uns ein noch klareres Namensschema für diese Schaltflächen ausdenken.
Eine Sache, die Sie nicht tun sollten, ist, diese IDs mitten in einem Projekt zu ändern, obwohl dies theoretisch möglich ist, da der Zusammenführungsmechanismus diese ID-Änderungen verfolgt, daher ist es eine gute Idee, sich während des gesamten Prozesses an das Benennungsschema zu halten.
Verwenden wir stattdessen diese IDs:
myButton_myMenu_home
myButton_myMenu_dashboard
myButton_myMenu_profile
myButton_myMenu_settings
Dadurch wird klarer, wofür jede Instanz dient, und es wird auch sichergestellt, dass Sie eindeutige Kennungen für jede Instanz Ihres Symbols haben.
An diesem Punkt hätten wir es bereits wieder nach qds exportieren können, aber während Sie hier sind, bereiten wir ein paar zusätzliche Dinge für die Schaltflächen vor, indem wir eine Beschriftung und ein Symbol hinzufügen.
Teil 2.2 - Vorbereiten des Symbols zum Überschreiben von Eigenschaften
Beginnen wir damit, sie dem Symbol der Hauptschaltfläche hinzuzufügen, also kommen wir jetzt darauf zurück und machen uns an die Arbeit. Sie können mit dem Label beginnen, und es ist eine gute Idee, sicherzustellen, dass es sichtbar ist, aber immer noch unter dem Maus-Hotspot, den Sie zuerst hinzugefügt haben.
Gehen Sie jetzt mit dem +-Symbol zurück zum Skizzenmenü, wählen Sie das Textelement aus und fügen Sie es Ihrem Design hinzu. Stellen Sie sicher, dass es sich um die zweite Ebene direkt unter dem Mausbereich handelt.
Stellen Sie nun sicher, dass das Textfeld eine feste Größe hat, die sich über die gesamte Breite der Schaltfläche erstreckt, und dass das Textobjekt zentriert ausgerichtet ist. Wenn Sie diesen Text in Ihren Instanzen überschreiben, wird die neue Beschriftung zentriert, und wenn Sie diese Eigenschaften auch nach qds exportieren wird überwiesen.
Da wir diesen Text überschreiben müssen, verwenden wir hier einfach "Standardtext" als Platzhalter.
Stellen Sie erneut sicher, dass das Textobjekt eine schöne qml-ID hat, nennen wir es myButton_Symbol_label und dann können wir es so ziehen, dass es sich unter dem Mausbereich befindet, und wir müssen auch sicherstellen, dass die Ebene denselben Namen wie die qml-ID hat.
Um nun ein Symbol oder tatsächlich drei Versionen desselben Symbols an dieser Stelle hinzuzufügen, müssen Sie das Platzhaltersymbol für die Hauptfigur verwenden und dann zurückgehen und die einzelnen Symbole ändern, sodass Sie einfach eine andere Form ziehen können, etwas so Einfaches wie ein Dreieck , indem Sie zum Formenmenü (Formenmenü) gehen, um zu skizzieren, indem Sie das Dreieck auswählen und ziehen.
Es ist darauf zu achten, dass es sich auch unter dem Mausbereich befindet, aber über den Hintergrundebenen (Hintergrundebenen). Sobald dies eingestellt ist, müssen Sie es zweimal duplizieren, um eine Version für jeden Status Ihrer Schaltfläche zu haben (Standard, Hover, On Click) und kleine Änderungen an jeder Version vornehmen, damit sie später in qds getestet werden kann.
In diesem Fall lohnt es sich, nur die Farben ein wenig anzupassen, da es sich um grafische Elemente handelt, die wir später ersetzen werden. Es spielt keine Rolle, was Sie hier tun, solange Sie sie voneinander unterscheiden können.
Jetzt lohnt es sich, wie bei allen Ebenen, die IDs zu ändern und die Exporteinstellungen zu überprüfen, um sicherzustellen, dass alle Symbole in diesem Fall so eingestellt sind, dass sie als untergeordnete Elemente exportiert werden. Nennen wir die Identifikatoren:
myButton_icon_placeholder_default
myButton_icon_placeholder_hover
myButton_icon_placeholder_pressed
Stellen Sie außerdem sicher, dass die Ebenen denselben Namen wie die IDs haben und als untergeordnete Elemente exportiert werden sollen, und ziehen Sie sie dann unter den Mausbereich im Ebenennavigator.
Mit diesem Set können Sie zum Menüsymbol zurückkehren und sehen, wie es sich auf Ihre Instanzen ausgewirkt hat, und wie Sie sehen können, haben sie jetzt alle Symbole und Textbeschriftungen. Wir werden später auf Symbole zurückkommen, da es mehrere verschiedene Ansätze gibt, die dafür verwendet werden können, und es lohnt sich, sie im Detail zu betrachten, während Sie Labels verwenden können, um die erste Ihrer Eigenschaftsüberschreibungen zu erstellen.
Als kurze Erklärung für das Überschreiben von Eigenschaften können Sie bei Symbolen in der Skizze einige Teile der Symbolinstanz in etwas Neues ändern. Dies wirkt sich nicht auf das ursprüngliche Mastersymbol aus, sondern nimmt diese Änderungen nur an der lokalen Instanz vor, an der Sie Änderungen vornehmen.
Obwohl es viele verschiedene Arten von qds-Zeichenüberschreibungen in Sketch gibt, unterstützen Entwickler nur wenige davon, wobei die wichtigste davon Text ist. Die andere Überschreibung ist das Symbol selbst, aber da dies ein ziemlich fortschrittliches Konzept ist, lohnt es sich nicht, darauf einzugehen, und stattdessen konzentrieren wir uns nur auf die Textversion.
Dazu müssen Sie zur ersten Instanz Ihrer Schaltfläche gehen, die als Startseite bezeichnet wird, und im Skizzeneigenschaften-Bedienfeld für Ihre Schaltfläche können Sie sehen, dass es ein neues Feld zum Überschreiben des Textes gibt. Um es zu verwenden, können Sie hier einfach neuen Text eingeben, also können Sie in diesem ersten Fall einfach "Home" zum Überschreibungstext hinzufügen und sehen, dass in diesem ersten Fall nur Sie Ihren neuen Text haben.
Wenn wir dies später in Design Studio erneut importieren, erhalten wir die Alias-Eigenschaft für die Schaltflächenkomponente für dieses Textfeld und fügen automatisch den Text „Home“ zum Alias dieser Instanz hinzu. Lassen Sie uns vorerst das Hinzufügen einer neuen Textbeschriftung zu allen Ihren Schaltflächen abschließen, und dann können Sie Ihr Design exportieren und mit qds weiterarbeiten.
Fügen wir also der zweiten Instanz Text hinzu, in diesem Fall "Dashboard" ("Toolbar"), der dritten - "Profile" ("Profile"), der vierten - "Settings" ("Settings") .
Jetzt können Sie auch sehen, warum das Textfeld der Schaltfläche mit fester Breite und die Option zur zentrierten Ausrichtung verwendet wurden, da Ihr Text jetzt immer gut in Ihrem Schaltflächendesign zentriert ist, egal wie lang er ist.
Exportieren wir es also erneut, dieses Mal erhalten wir eine Metadaten-Überschreibungswarnung, was normal ist, also fahren wir fort und wenn es vorbei ist, kehren wir zu qds zurück.
Teil 2.3 - Zusammenführen von Importen
Stellen Sie bei qds sicher, dass Sie sich im richtigen Projekt befinden, und wiederholen Sie dann die Schritte zum Importieren Ihrer Metadatendatei, indem Sie in der qml-Bibliothek auf die Schaltfläche „Assets importieren“ klicken und den Asset-Importer aufrufen. Es ist sehr wichtig, sicherzustellen, dass Sie die Zusammenführungsoption für den Import auswählen, wenn Sie dies vergessen, wird die gesamte Arbeit, die Sie in der vorherigen Lektion gemacht haben, überschrieben. Stellen Sie daher sicher, dass Sie die Zusammenführungsoption ausgewählt haben, bevor Sie fortfahren. Diese Einstellung bleibt zwischen Sitzungen bestehen, sodass Sie dies nur einmal tun müssen, aber Sie müssen sie aus Sicherheitsgründen bei jedem Importieren überprüfen.
Solange das Zusammenführen aktiviert ist, können Sie fortfahren und Ihre Projekte importieren, und unter der Annahme, dass keine Fehler gemacht werden (hier sollten keine Fehler oder Warnungen angezeigt werden), können Sie fortfahren und sich Ihren Import ansehen.
Das erste, was zu überprüfen ist, ist die neue Menükomponente, also schauen wir uns den Projektordner myMenu_Symbol.ui.qml an und öffnen ihn im Formulareditor.
Sie sollten ein Menü mit vier Schaltflächen und Alias-Text für jede sehen, da die Zustände und Interaktionen für diese Schaltflächen bereits erstellt wurden, sollte dieses Menü voll funktionsfähig sein, mit Ausnahme der Änderung der Symbole, die wir etwas später tun werden.
Testen wir es also, indem wir die Live-Vorschau ausführen und dann mit der Maus darüber fahren und auf die Schaltflächen klicken. Es ist ersichtlich, dass Sie dank der im vorherigen Tutorial geleisteten Arbeit einen Hover-and-Click-Zustand für jede neu hinzugefügte Schaltfläche haben, ohne die Arbeit duplizieren zu müssen. Dies sollte Ihnen die Leistungsfähigkeit einer guten Komponentenisierung zeigen, die sicherlich von den Entwicklern geschätzt wird, an die Sie diese Arbeit auslagern.
Wenn Sie jetzt Änderungen am allgemeinen Verhalten dieser Schaltflächen vornehmen müssen, müssen Sie nur zur Hauptkomponente gehen, dort Ihre Änderungen vornehmen, und sie werden automatisch auf alle Instanzen angewendet. Was wir jetzt tun werden, um die Symbole in den richtigen Zustand zu versetzen.
Wechseln wir also jetzt zur Schaltflächenkomponente und arbeiten mit den Symbolen.
Wenn die Schaltflächenkomponente im Navigator aktiv ist, können Sie drei neue Asset-Layer für jedes Symbol sehen. Wir müssen die Schritte aus Teil 1 wiederholen und jedes Symbol in jedem Zustand sichtbar machen. Gehen wir also jeden Zustand durch und verwenden dazu das Sichtbarkeits-"Kontrollkästchen". Stellen Sie sicher, dass der Standardwert der einzige ist, der standardmäßig sichtbar ist, bewegen Sie den Mauszeiger im Schwebezustand und klicken Sie im gedrückten Zustand.
Danach können Sie Ihre Schaltfläche direkt mit der Vorschau-Schaltfläche testen und Sie sollten jetzt sehen, dass sie sofort ausgelöst wird. Sie können dies auch schnell in Ihrer Menükomponente testen, um sicherzustellen, dass es in allen Ihren Instanzen funktioniert.
Der nächste Schritt besteht darin, zum Skizzieren zurückzukehren und einzelne Symbole zu erstellen. Zuvor müssen Sie eine Schaltfläche vorbereiten, um die Symbole in jeder Instanz zu ersetzen, und Sie können dies tun, indem Sie hier in qds Ihre eigenen Aliase erstellen. Stellen wir also sicher, dass sich Ihre Komponente im Grundzustand befindet, und wählen Sie dann standardmäßig ein Asset für das erste der Symbole aus.
Sehen Sie sich dann Ihr Eigenschaftenfenster an, indem Sie es im Navigator auswählen, und die Eigenschaft, an der Sie interessiert sind, ist die Quelldatei Ihres Symbols. Verwenden Sie dann das Aktionssymbol, um das Menü aufzurufen, und wählen Sie die Option zum Hinzufügen eines Alias aus. Das bedeutet, dass Sie aus den Symbolinstanzen in Ihrer Menükomponente ein neues Symbolobjekt für diese Schaltfläche festlegen können.
Wiederholen wir diesen Schritt für jedes der Symbole, bewegen Sie den Mauszeiger darüber und klicken Sie dann. Indem Sie den ursprünglichen Symbolalias festlegen, können Sie einen Blick auf Ihre Menükomponente werfen.
Laden wir also die Komponente myMenu_Symbol in den Formulareditor und wählen Sie eine Ihrer Schaltflächeninstanzen aus. Nach der Auswahl zeigt das Eigenschaftsfenster auf der rechten Seite alle verfügbaren Aliase für diese Instanz, darunter den Text-Alias, den Sie zu sketch hinzugefügt haben, und die drei verschiedenen Symbolstatus-Aliase, die Sie gerade zu qds hinzugefügt haben.
Wir werden darauf zurückkommen, nachdem wir einige Symbole in der Skizze erstellt und später geändert haben.
Teil 2.4. Icon-Entwicklung
Bei geöffneter Skizze erstellen wir eine Zeichenfläche nur für Symbole. Zeichenflächen sind nach dem Import normalerweise immer Komponenten in qds, wir werden sie später verwenden, wenn wir Bildschirme entwickeln, aber für diesen Fall werden wir Assets von dieser Zeichenfläche importieren und kein qml generieren, aber dazu später mehr.
Im Moment können Sie die Funktion von Sketch verwenden, um eine separate Seite für Assets zu erstellen, um sie später von Ihrem Bildschirmdesign getrennt zu halten. Fügen wir also eine neue Seite im Skizzenmenü oben links hinzu, und wir können diese Assets aufrufen und dann die Zeichenfläche zum Starten ziehen Ikonen erstellen. Die genauen Abmessungen dieser Zeichenfläche spielen keine Rolle, da sie im Moment nur ein Ort zum Speichern von Assets ist. Stellen Sie also einfach sicher, dass sie groß genug ist, um dieses Kunstwerk aufzunehmen, und dann können Sie sich auf die Erstellung der Symbole konzentrieren.
Lassen Sie uns sie direkt in der Skizze zeichnen und einige kombinierte Formen verwenden, um eine gute Möglichkeit zu finden, die Zusammenführungsfunktion des Bridge-Plug-ins zu verwenden.
Beginnen wir also mit dem Zeichnen des Haussymbols. Das Rechteck und das Dreieck sollten ausreichen, sobald Sie beide Formen haben, können Sie die Combo-Form verwenden, um ein Element zu erstellen, das zum Symbol wird, und dann einen Blick auf die Struktur Ihrer Komposition werfen, wie sie hier mit dem Bridge-Plugin funktioniert.
Auf diese Weise sieht die Combo-Form wie eine separate Minikomponente aus: Die Combo-Form fungiert als übergeordnetes Element für die beiden untergeordneten Ebenen, die darunter gezeichnet werden, und da nur ein Symbol-Asset benötigt wird, kann sichergestellt werden, dass die Combo-Form dies ist selbst ein untergeordnetes Layer und zwei untergeordnete Layer werden zusammengeführt. Dazu müssen Sie diese beiden Ebenen beim Export zu einem Bild zusammenführen, das zur zusammengeführten Form wird, sodass es die ID dieses Elements hat.
Dies ist eine besonders nützliche Technik, wenn Sie einen kontinuierlichen Arbeitsablauf betrachten, bei dem die Assets in einem Projekt minimiert werden, Sie aber immer zurückgehen und einzelne Teile des Projekts in einer Skizze ändern können.
Um mehrere Variationen für jedes Symbol zu erstellen, kopieren Sie es einfach zweimal. Indem Sie zwei zusätzliche Versionen Ihrer Symbole kopieren, können Sie einige Farbanpassungen vornehmen, und da diese Zeichenfläche nicht als eigentlicher Bildschirm im Design verwendet wird, können Sie alle Ihre Symbole nebeneinander platzieren und müssen sich keine Gedanken darüber machen, sie oben zu stapeln von einander. Während wir das erste Symbol erstellen, erstellen wir auch eindeutige qml-IDs für alle Symbol- und Unterformularoptionen.
Sobald Sie das erste Symbol erstellt haben, können Sie die restlichen drei schnell mit der gleichen Technik wie zuvor erstellen, indem Sie eine mehrteilige Combo-Form erstellen und sicherstellen, dass die untergeordneten Ebenen der Combo-Form zusammengeführt werden und die Combo-Form selbst ist ein Kind, das Symbol zweimal kopieren und drei Symboloptionen auswählen.
Das Video wird ein wenig beschleunigt, um Zeit zu sparen, aber während Sie entwickeln, müssen Sie überprüfen, ob Sie Ihre ID- und qml-Ebenen jedes Mal umbenennen und überprüfen, ob nur die obere Combo-Form so eingestellt ist, dass sie ein untergeordnetes Element exportiert, und dass alle verschachtelten Formen eingestellt sind zu verschmelzen.
Jetzt gibt es also 4 Symbole mit 3 Varianten pro Symbol. Lassen Sie uns alle diese qml-IDs durchgehen und sicherstellen, dass sie für Ihr Projekt einzigartig und aussagekräftig sind.
Werfen wir zunächst einen Blick auf die Zeichenfläche selbst. Es ist möglich, so etwas Einfaches wie iconAssets aufzurufen, auch wenn Sie nicht beabsichtigen, qml aus dieser Zeichenfläche zu generieren, ist es eine gute Praxis, sicherzustellen, dass Sie immer Ihre IDs überprüfen. Hoffentlich wird Ihnen das irgendwann zur zweiten Natur.
myButton_icon_home_default
myButton_icon_home_hover
myButton_icon_home_pressed
myButton_icon_dashboard_default
myButton_icon_dashboard_hover
myButton_icon_dashboard_pressed
myButton_icon_profile_default
myButton_icon_profile_hover
myButton_icon_profile_pressed
myButton_icon_settings_default
myButton_icon_settings_hover
myButton_icon_settings_pressed
Es lohnt sich auch sicherzustellen, dass alle IDs der untergeordneten Ebenen ebenfalls eindeutig sind, auch wenn sie nicht Teil des Projekts sind und daher nicht so wichtig sind, muss darauf geachtet werden, dass während des Importvorgangs keine Fehler auftreten. Anstatt also mit einem Namensschema zu arbeiten, listen wir sie hier einfach auf.
Beispielsweise verwendet das Haussymbol diese Vorlage für zusammengeführte Formen.
homeSquare1
homeDreieck1
homeSquare2
homeDreieck2
homeSquare3
homeDreieck3
Nachdem alle Ihre Symbole eingerichtet und die qml-IDs überprüft wurden, können Sie das Projekt erneut exportieren und zu qds zurückkehren, um diese Symbole zu Ihren Schaltflächen hinzuzufügen. Lassen Sie uns also auf die Export-Schaltfläche klicken und die Metadaten erneut überschreiben.
Jetzt können Sie zu qds und zum Asset-Importer zurückkehren. Dieses Mal verwenden wir eine andere Importer-Funktion und importieren nur die neuen Symbol-Assets, deaktivieren „qml generieren“ und stellen sicher, dass die Zusammenführung trotzdem für die Zukunft aktiviert ist. Fahren Sie fort und importieren Sie Ihr Projekt erneut.
Teil 2.5. Ersetzen der Symbolquelle
Jetzt können Sie sehen, dass Sie alle Symbol-Assets haben. Es ist nicht erforderlich, ein neues qml zu generieren, da es lediglich darum geht, die korrekten Versionen Ihrer Symbole mithilfe der Alias-Eigenschaften der Instanz zu ändern. Lassen Sie uns also die erste Instanz der Komponente auswählen und die Alias-Eigenschaften verwenden, die wir zuvor für diesen Zweck erstellt haben, um dies zu tun. Sie können auf Ihre erste Schaltfläche, das Home-Symbol, klicken und im Eigenschaftenbereich einfach das Dropdown-Menü verwenden, um neue Symbol-Assets auszuwählen. Wählen Sie also für jeden Zustand die entsprechenden Assets aus, und Sie können sie dann im Vorschaumodus auschecken.
Sie haben jetzt neue funktionierende Symbole für die erste Schaltfläche. Wiederholen wir diesen Vorgang für die restlichen Symbole, bis in jedem Fall die richtigen Symbole angezeigt werden, und testen Sie sie dann erneut im Vorschaumodus, um sicherzustellen, dass alle Zustände funktionieren.
Unten ist der qml-Code für beide Komponenten:
MyButton_Symbol.ui.qml
import QtQuick 2.8
Item {
id: myButton_Symbol
width: 211
height: 211
property alias myButton_icon_placeholder_defaultSource: myButton_icon_placeholder_default.source
property alias myButton_icon_placeholder_pressedSource: myButton_icon_placeholder_pressed.source
property alias myButton_icon_placeholder_hoverSource: myButton_icon_placeholder_hover.source
state: "default"
property alias myButton_Symbol_labelText: myButton_Symbol_label.text
Image {
id: myButton_SymbolAsset
x: 0
y: 0
source: "assets/myButton_Symbol.png"
}
Image {
id: myButton_Symbol_default
x: 0
y: 0
source: "assets/myButton_Symbol_default.png"
}
Image {
id: myButton_Symbol_hover
x: 0
y: 0
source: "assets/myButton_Symbol_hover.png"
}
Image {
id: myButton_Symbol_pressed
x: 0
y: 0
source: "assets/myButton_Symbol_pressed.png"
}
Text {
id: myButton_Symbol_label
x: 6
y: 150
width: 200
height: 23
color: "#ff818181"
text: "default text"
font.styleName: "Light"
horizontalAlignment: Text.AlignHCenter
font.family: "Helvetica Neue"
font.pixelSize: 20
verticalAlignment: Text.AlignVCenter
}
Image {
id: myButton_icon_placeholder_pressed
x: 70
y: 55
source: "assets/myButton_icon_placeholder_pressed.png"
}
Image {
id: myButton_icon_placeholder_hover
x: 70
y: 55
source: "assets/myButton_icon_placeholder_hover.png"
}
Image {
id: myButton_icon_placeholder_default
x: 70
y: 55
source: "assets/myButton_icon_placeholder_default.png"
}
MouseArea {
id: myButton_Symbol_MouseArea
x: 0
y: 0
width: 211
height: 211
hoverEnabled: true
}
states: [
State {
name: "default"
when: !myButton_Symbol_MouseArea.containsMouse
&& !myButton_Symbol_MouseArea.pressed
PropertyChanges {
target: myButton_Symbol_hover
visible: false
}
PropertyChanges {
target: myButton_Symbol_pressed
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_pressed
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_hover
visible: false
}
},
State {
name: "hover"
when: myButton_Symbol_MouseArea.containsMouse
&& !myButton_Symbol_MouseArea.pressed
PropertyChanges {
target: myButton_Symbol_pressed
visible: false
}
PropertyChanges {
target: myButton_Symbol_default
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_pressed
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_default
visible: false
}
},
State {
name: "pressed"
when: myButton_Symbol_MouseArea.pressed
PropertyChanges {
target: myButton_Symbol_default
visible: false
}
PropertyChanges {
target: myButton_Symbol_hover
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_default
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_hover
visible: false
}
}
]
}
myMenu_Symbol.ui.qml
import QtQuick 2.8
Item {
id: myMenu_Symbol
width: 250
height: 850
Image {
id: myMenu_SymbolAsset
x: 0
y: 0
source: "assets/myMenu_Symbol.png"
}
MyButton_Symbol {
id: myButton_myMenu_settings
x: 20
y: 639
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_settings_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_settings_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_settings_pressed.png"
myButton_Symbol_labelText: "Settings"
}
MyButton_Symbol {
id: myButton_myMenu_profile
x: 20
y: 428
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_profile_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_profile_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_profile_pressed.png"
myButton_Symbol_labelText: "Profile"
}
MyButton_Symbol {
id: myButton_myMenu_dashboard
x: 20
y: 217
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_dashboard_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_dashboard_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_dashboard_pressed.png"
myButton_Symbol_labelText: "Dashboard"
}
MyButton_Symbol {
id: myButton_MyMenu_home
x: 20
y: 6
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_home_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_home_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_home_pressed.png"
myButton_Symbol_labelText: "Home"
}
}
