Willkommen beim Sketch Bridge-Tutorial von Qt Design Studio. Um ihm zu folgen, benötigen Sie das kommerzielle Paket Qt Design Studio 1.5 und Sketch Bridge, macOS und Sketch (Entwickler verwendet 66.1).
Dieses Tutorial zeigt Ihnen, wie Sie ein Skizzenprojekt erstellen, das einen sauberen Export und Import in Qt Design Studio erstellt (für den Rest des Tutorials werden wir qds kurz nennen), Symbole und Instanzen für die ordnungsgemäße Komponentenisierung verwenden und sich aus Sketch bewegen zu qds in iterativen Schleifen, Erstellen einer komplexeren Szene aus einfachen Bausteinen. Wir werden auch über einige der häufigsten Probleme sprechen, mit denen Benutzer konfrontiert sind, und Tipps und Tricks geben, die der Entwickler bei der Arbeit mit dem Bridge-Plugin entwickelt hat.
Bevor wir auf weitere Erläuterungen eingehen, während Sketch Designern die Flexibilität und Offenheit ermöglicht, ihre Designkonzepte umzusetzen, ist es sehr wichtig, Ihr Projekt in qds zu strukturieren und vorzubereiten, um ein pixelgenaues Design zu erstellen, das auf entwicklerfreundlichen Komponenten in qds basiert auf eine bestimmte Weise, und obwohl es nicht allzu schwierig ist, es zu meistern, braucht es Zeit und Wissen, um es erfolgreich abzuschließen. Die Entwickler hoffen, dass dieser Leitfaden Ihnen das Wissen vermittelt, das Sie benötigen, um Ihre Projekte dem gewünschten Ergebnis näher zu bringen. Lassen Sie uns eintauchen und mit dem Entwerfen beginnen.
Teil 1.1 - Ein einfacher Knopf
Der erste Schritt beginnt mit dem Entwerfen einer einzelnen Schaltfläche, die als Grundlage für das Projekt verwendet und in Sketch ausgeführt wird. Öffnen Sie also die Sketch-App und erstellen Sie eine neue leere Datei.
Lassen Sie uns zunächst einen Standardhintergrund für Schaltflächen erstellen, indem Sie ein Rechteck ziehen. Es lohnt sich, darauf zu achten, dass die Schaltfläche die richtige Größe hat, und sie dann in ein Symbol umzuwandeln. Nachdem das Symbol erstellt wurde, löschen wir die Instanz und arbeiten direkt am Hauptsymbol.
Sie können dann einige gut abgerundete Ecken hinzufügen, einen Farbverlauf erstellen und der Schaltfläche einen Schatten und eine Hervorhebung hinzufügen. Um das Design heller zu machen, können Sie die Zeichenfläche etwas dehnen, um Platz für Schatten zu schaffen, und einen funktionierenden Hintergrund für das Symbol hinzufügen. Wählen wir eine Farbe, die nicht im Design verwendet wird, aber einen starken Kontrast zu den Farben des Designs bildet, wie dieses blassrosa im Video unten.
Auch wenn diese beiden Optionen deaktiviert wurden, muss dieser Hintergrund nicht exportiert werden oder angezeigt werden, wenn Zeichen später verwendet werden. Wenn der Designbereich vorhanden ist, lassen Sie uns diese Ecken abrunden, einen einfachen Farbverlauf und einige Schatten hinzufügen.
Wir haben jetzt einen standardmäßigen Hintergrundzustand für die Schaltfläche, also erstellen wir zwei weitere Zustände, die wir für dieses Tutorial verwenden möchten – den Schweben- und Gedrückt-Zustand .
Sie können dies tun, indem Sie das ursprüngliche Rechteck duplizieren, die Ebenen umbenennen und sie dann nebeneinander platzieren, damit Sie die parallelen Designänderungen sehen können. Um dies ein wenig einfacher zu machen, strecken wir die Breite des Zeichens so, dass es auf die Schaltfläche daneben passt, und ändern die Größe, nachdem wir mit dem Design fertig sind.
Wir haben jetzt ein schönes Setup, also ändern wir die Hover- und Click-Versionen des Hintergrunds der Schaltfläche, indem wir die Verlaufsfarben leicht anpassen, bis wir drei Versionen der Schaltfläche haben. Obwohl es in UX keine wirklichen Regeln gibt, die als relevant angesehen werden können, halten sich Entwickler an die Logik, dass der Schwebezustand etwas heller als normal und der gedrückte Zustand a ist, solange diese Zustände konsistent sind und mit Ihrem gesamten UI-Design funktionieren etwas dunkler.
An dieser Stelle werden die Entwickler auch ihre Layer benennen und diese Namen auch für die qml-IDs verwenden, aber dies wird in Kürze ausführlicher behandelt.
Lassen Sie uns die drei zuvor erstellten Hintergründe wieder übereinander platzieren, da wir möchten, dass sie für den Export gleich sind, und fügen Sie ein weiteres Element hinzu, um die oberste Ebene zu erstellen - Hotspot , der beim Import in Design Studio sein wird automatisch in Mausbereich umgewandelt.
Es ist wichtig, dass Sie beim Hinzufügen eines Zugriffspunkts, um das Ziel auf „Keine“ festzulegen, sicherstellen müssen, dass es sich um die oberste Ebene der Schaltfläche handelt, um Mausereignisse richtig zu erfassen.
Es lohnt sich auch sicherzustellen, dass die Zeichenfläche mit der Schaltfläche groß genug ist, um alle Schatteneffekte aufzunehmen, die ohne Beschneiden hinzugefügt wurden, aber nahe genug an den Rändern sind, um sicherzustellen, dass der Begrenzungsrahmen des Elements nicht zu groß ist. Gute und randnahe Effekte funktionieren am besten.
Nach all den vorherigen Schritten gibt es eine einfache Schaltfläche zum Vorbereiten von Einstellungen im Qt Bridge-Plugin.
Die häufigsten Fehler, die Entwickler bei Benutzern sehen, die die Sketch Bridge verwenden, sind auf doppelte IDs in ihrem Projekt zurückzuführen, obwohl der qds-Importer in der Lage ist, qml-IDs zu erkennen und zu speichern, ist es dennoch eine gute Idee, alle qml-IDs manuell zu überprüfen, um sicherzustellen, dass sie vorhanden sind sind einzigartig und bedeutend.
Ein Problem besteht darin, dass nach dem Umbenennen der qml-ID für ein Symbol jede Instanz dieses Symbols eine doppelte ID haben wird. Der Rat des Entwicklers lautet, ein Benennungsschema zu verwenden, das zwischen einem Symbol und Instanzen dieses Symbols unterscheidet.
Lassen Sie uns beispielsweise sicherstellen, dass Ihr Schaltflächensymbol die ID myButton_Symbol hat und verschiedene Ebenen dieses Präfix mit angehängten Zuständen wie myButton_Symbol_default usw. haben. Und da es später in diesem Projekt wahrscheinlich weitere Mausbereiche geben wird, können Sie den Hotspot in myButton_Symbol_hotspot umbenennen, wenn Wir verwenden die Schaltfläche als Bildschirminstanzen, stellen sicher, dass diese Instanzen eine eindeutige ID haben, die mit diesem Bildschirm verknüpft ist, und importieren auch, um zu beachten, dass qml-Identifikatoren nur eine Teilmenge der möglichen Zeichen verwenden können. Zu diesem Zweck wird der Leitfaden Unterstriche verwenden, um Namen zu trennen, da bekannt ist, dass dieses Format funktioniert.
Wenn wir diese IDs umbenannt haben, sollten Sie sicherstellen, dass alle Ebenen auf „Untergeordnet“ gesetzt sind, da es wünschenswert ist, dass es separate Assets für jede Ebene gibt, sodass wir in dieser Phase nichts zusammenführen. Später, wenn wir einige Hintergründe erstellen, werden wir union verwenden, um die Anzahl der einzelnen Assets im Design zu minimieren, aber jetzt lassen Sie uns alle diese qml-IDs korrekt festlegen und sicherstellen, dass für jedes der Schaltflächendesigns der Exporttyp auf Kind festgelegt ist .
Aus der subjektiven Erfahrung des Entwicklers ist es sinnvoll, die Ebenen genau wie Ihre qml-IDs zu benennen. Dies erleichtert das spätere Auffinden von Illustrationen erheblich, insbesondere da diese Dateien sehr groß und komplex werden können, wenn sie sich dem Fertigstellungsgrad eines UI-Projekts nähern .
In einem Qt Bridge-Plug-in lohnt es sich, zunächst einige grundlegende Eigenschaften auf der Einstellungsseite einzurichten. Dies sind die globalen Einstellungen, die für den Rest des Projekts verwendet werden, sodass Sie dies nur einmal tun müssen. Zuerst müssen Sie den Exportpfad auswählen. Erstellen wir dazu einen Projektordner, in dem wir später ein Design Studio-Projekt erstellen können, in dem wir einen Exportordner erstellen und ihn als Speicherort auswählen, an dem wir Assets und Metadaten ablegen möchten. Erstellen Sie die erforderlichen Ordner mit der Tastenkombination Umschalt+cmd+n.
Lassen Sie uns alle anderen Einstellungen als Standard belassen und verwenden Sie png für dieses Tutorial. An diesem Punkt können Sie zum Home-Panel des Bridge-Plugins zurückkehren und den ersten Export durchführen.
Wenn alle qml-IDs und Exporttypen richtig eingestellt sind, können Sie die Komponente exportieren und in Design Studio bringen, wo wir einige Zustände hinzufügen und die Schaltfläche testen, bevor wir mit der Entwicklung in Sketch fortfahren.
Also lasst uns einfach auf Export klicken und dann zu Design Studio gehen.
Teil 1.2 - Erster Import
Um mit Design Studio zu beginnen, können Sie ein leeres Projekt erstellen, um das Sketch-Design zu importieren. Gehen wir also zur Startseite und klicken auf die Schaltfläche „Neues Projekt“. Dadurch wird der Assistent gestartet. Anschließend müssen Sie ein leeres Standardprojekt auswählen.
Sie können einen Projektordner als Speicherort für dieses Projekt auswählen und dann die restlichen Einstellungen auf den Standardeinstellungen belassen. Nach Abschluss des Assistenten wechselt er automatisch zur standardmäßigen ui.qml-Datei, die mit dem Projekt geliefert wird, um das Skizzendesign zu importieren. Jetzt können Sie zum Assets-Panel gehen, neue Assets hinzufügen und dann zu dem Ordner gehen, in dem sich die Projekte wurden aus Sketch exportiert.
Als nächstes benötigen Sie eine .metadata-Datei. Diese Option ist nur verfügbar, wenn Sie über eine kommerzielle Version von Design Studio mit aktiviertem Importer-Plugin verfügen.
Um dies zu überprüfen, können Sie sich die verfügbaren Importe im Kombinationsfeld Dateitypfilter ansehen. Wenn der Metadatentyp vorhanden ist, haben Sie die richtige Einrichtung und können diese Datei auswählen, um das Importfenster zu starten.
Für den ersten Import sollten Sie die Standardeinstellungen verwenden, dann die Metadaten und Assets exportieren und die Zusammenführung deaktiviert lassen. Da wir jedoch sofort mit der Arbeit an einigen Dingen in Design Studio beginnen möchten, lassen wir die Zusammenführungsfunktion für alle nachfolgenden Importe aktiviert, überschreiben Sie also nicht versehentlich Ihre Arbeit in qds.
Sobald der Import abgeschlossen ist, können Sie den Importer schließen und sich die importierten Dateien ansehen. Sie befinden sich in einem Ordner, der nach Ihrem Exportordner benannt ist. Wenn Sie zu diesem Ordner gehen, sehen Sie die Elemente. Im Moment haben Sie nur eine Schaltflächenkomponente, also gehen wir zu dieser Datei und überprüfen, ob Ihr Export korrekt ist.
Diese Datei sollte drei verschiedene Schaltflächenebenen haben, die für verschiedene Zustände verwendet werden können, sowie den Mausbereich. Standardmäßig fügt Sketch dem Export eine leere Ebene hinzu, hier heißt es Asset, und das erste, was Sie jetzt tun müssen, ist, diese Ebene zu löschen, da sie in Ihrer Komponente nicht benötigt wird.
Danach müssen Sie den Hover-Mausbereich so einstellen, dass er aktiviert wird, da der Hover-Status verwendet wird. Lassen Sie es uns gleich tun, indem Sie auf den Mausbereich im Navigator klicken, zum Eigenschaftenbereich gehen und den Mauszeiger für Ihren Mausbereich auswählen.
Da wir uns derzeit im Basiszustand befinden, ist dies der einzige Zustand, den wir im Moment haben, also gilt er für jeden Zustand, der von nun an hinzugefügt wird. Während Sie hier sind, können Sie die gewünschten Staaten hinzufügen. Sie sollten immer versuchen, explizite Benutzerzustände für eine Anwendung zu verwenden.
Der Basisstatus ist nützlich, um Änderungen an Ihrem Design vorzunehmen, die wir auf jeden anderen Status anwenden möchten. Wenn wir uns derzeit in einem vom Benutzer erstellten Status befinden, gelten alle Änderungen, die wir im aktuellen Status vornehmen, nur für diesen Status.
Lassen Sie uns also die drei Zustände erstellen, die Sie für diese Schaltfläche benötigen. Lassen Sie uns einen Status mit einem Standardnamen hinzufügen, einen mit dem Namen Hover und einen mit dem Namen Clicked.
Nachdem Sie nun über diese Status verfügen, können Sie den Standardsystemstatus in einen benutzerdefinierten Standardstatus ändern. Wir tun dies, indem wir auf das Aktionssymbol auf der Miniaturansicht des Zustands klicken und „Als Standard festlegen“ auswählen. Jedes Mal, wenn diese Komponente geladen wird, ist dies der Zustand, in dem die Schaltfläche sichtbar ist.
Jetzt müssen Sie diesen Zuständen etwas Logik hinzufügen, um sie mit Ihrem Mausbereich zu verbinden. Wir werden dies im nächsten Schritt mit der Option tun, wenn die Auswahlbedingungen auch hier auf dem Aktionssymbol angezeigt werden. Lassen Sie uns zunächst eine Illustration in jedem der jeweiligen Zustände vorbereiten, und da dies der erste Import ist, beginnen wir damit, einfach den richtigen entsprechenden Asset-Layer in jedem Zustand anzuzeigen.
Am einfachsten geht das, indem man in jedem Zustand einfach die jeweilige Ebene sichtbar und alle anderen Ebenen unsichtbar macht. Lassen Sie uns also zunächst zum Standardzustand zurückkehren, indem Sie auf das gewünschte Miniaturbild in der Statusleiste klicken. Wenn dieser Status ausgewählt ist, ist es möglich, zu Ihren Bildern im Navigator zu gehen und jedes der Assets einzeln auszuwählen und die Sichtbarkeit für jede Ebene richtig umzuschalten, sodass der Standardstatus erfordert, dass die Standardebene sichtbar ist und beim Bewegen und Klicken darauf gesetzt wird unsichtbar .
Sobald sie eingerichtet sind, können Sie in den Hover-Zustand wechseln und diesen Vorgang wiederholen, sodass das Hover-Bild die einzige sichtbare Ebene ist. Abschließend wiederholen wir dies für die gepresste Schicht, wählen den gepressten Zustand aus und wiederholen den Vorgang, um nur die gepresste Schicht sichtbar zu machen.
Teil 1.3 - Ausführungsbedingungen
Sie sollten jetzt bereit sein, diesen Zuständen Logik hinzuzufügen, um sie mit Ihrem Mausbereich zu verbinden, aber zuerst lohnt es sich, schnell zu überprüfen, ob alles richtig eingerichtet ist, indem Sie zwischen die Miniaturansichten der Zustände klicken. Wenn alles korrekt ist, sollten Sie im Formulareditor nur die entsprechende Ebene sehen. Angenommen, alles funktioniert gut, lassen Sie uns fortfahren und dem Status-/Mausbereich etwas Logik hinzufügen, wir tun dies mit "Run Conditions" - im Grunde bedeutet dies, dass dieser Status aktiv ist, wenn bestimmte Bedingungen erfüllt sind. Ausführungsbedingungen können ziemlich schnell kompliziert werden und oft müssen Sie mehr als eine Bedingung hinzufügen, um sinnvolles Verhalten richtig zu modellieren. Sie werden sehen, dass in zwei Zuständen zwei separate Bedingungen ausgewertet werden müssen, um sicherzustellen, dass das Verhalten korrekt ist. Sie müssen auch sorgfältig prüfen, ob alle getesteten Bedingungen wahr oder nicht wahr sind.
Im Kontext von qml und qds bedeutet dies, dass es möglich ist, die Eigenschaften mehrerer Elemente zu validieren und die Benutzeroberfläche in einen Zustand zu versetzen, in dem diese Bedingungen zutreffen. Sie können sehen, ob etwas wahr, nicht wahr, größer, gleich usw. ist. Sie können auch mehrere Elemente auf ihre Gültigkeit mit Operatoren wie AND oder OR vergleichen.
Ausführungsbedingungen werden von links nach rechts und in der Reihenfolge ihres Erscheinens im Code ausgewertet. Wenn Sie also zwei Bedingungen für verschiedene Zustände haben, die beide wahr sind, wird die erste dieser Bedingungen für Ihren Zustand ausgewählt. Daher ist es wichtig sicherzustellen, dass jede Bedingung nur in einem Zustand wahr sein kann.
Wenn sich das alles im Moment etwas kompliziert anhört, versuchen Sie es einfach Schritt für Schritt, vielleicht haben Sie am Ende eine bessere Vorstellung von der Nützlichkeit und Macht von Laufzeitbedingungen.
Beginnen wir mit dem Hinzufügen einer Standardbedingung. Sie müssen sicherstellen, dass Ihre Standardschaltfläche angezeigt wird, wenn die Maus nicht über die Schaltfläche bewegt und die Maustaste nicht gedrückt wird. Diese beiden Bedingungen müssen eine „nicht“-Bedingung sein, und beide müssen wahr sein, sodass die Maus nicht bewegt und die Schaltfläche nicht gedrückt wird – dies ist eine gültige Aussage.
Wir können eine Fehlerbedingung definieren, indem wir ein Ausrufezeichen vor unsere Bedingungen setzen, und um beide Bedingungen auszuwerten, verwenden wir ein doppeltes kaufmännisches Und-Zeichen zwischen ihnen. Also lasst uns weitermachen und es jetzt tun. Beginnen Sie mit der Auswahl des Standardzustands im Miniaturbild-Vorschaufenster des Zustands, klicken Sie dann auf das Aktionssymbol und wählen Sie die Option „Bedingung hinzufügen, wenn“ aus. Dadurch wird der Bindungseditor geöffnet, und Sie können Ihre Bedingung hier hinzufügen.
Es ist sehr wichtig, dass die Bedingung korrekt geschrieben ist, daher verwenden wir die Autocomplete-Funktion, um sicherzustellen, dass keine Rechtschreibfehler vorhanden sind.
Standardzustandsbedingung
Nach den ersten drei Buchstaben des zu prüfenden Elements ist es in diesem Fall der Mausbereich namens myButton_Symbol_mouseArea. Nachdem die ersten drei Zeichen eingegeben wurden, sollte eine Liste aller möglichen Vervollständigungen angezeigt werden, also wählen wir den Mausbereich aus der Liste aus. In dieser ersten Bedingung müssen Sie die Mausbereichseigenschaft namens containsMouse überprüfen.
Dadurch erfahren Sie, ob der Benutzer mit der Maus über die Schaltfläche gefahren ist. Nachdem Sie also den Mausbereich im Bindungseditor haben, können Sie einen Punkt hinzufügen und dann die Liste durchlaufen und die Eigenschaft finden, die die Maus enthält, und sie auswählen.
Nun gibt es eine erste Bedingung, die prüft, ob der Benutzer aktuell nicht mit der Maus über den Button geschwebt hat, und die sieht so aus:
!myButton_Symbol_mouseArea.containsMouse
Sie müssen auch die zweite Bedingung auswerten, um sicherzustellen, dass der Benutzer nicht auch auf die Schaltfläche klickt. Sie können eine Bedingung festlegen, um beide Dinge auszuwerten, indem Sie zwei kaufmännische Und-Zeichen dazwischen einfügen. Jetzt können Sie den ersten Schritt wiederholen, denn es lohnt sich, diesen Bereich der Maus noch einmal zu überprüfen.
Danach folgen die Anfangsbuchstaben des Mausbereichs, der die Autocomplete-Liste aufruft. Wählen Sie den Mausbereich erneut aus und fügen Sie einen Punkt hinzu, um eine Liste von Eigenschaften zu erhalten. Diesmal ist die Eigenschaft, an der wir interessiert sind, ein Klick, der uns sagt, ob diese Schaltfläche eine gedrückte Maus enthält.
Die Endbedingung für diese erste Schaltfläche sollte also so aussehen:
!myButton_Symbol_mouseArea.containsMouse && !myButton_mouseArea.pressed
Wenn diese Bedingung nicht wahr ist, führt sie selbst nichts aus, sondern stellt nur sicher, dass die Schaltfläche nach Ablauf des Hover- oder Click-Ereignisses in ihren Standardzustand zurückkehrt. Da die Schaltfläche im Moment immer im Standardzustand ausgelöst wird, werden keine Änderungen angezeigt. Fügen wir also die folgenden Bedingungen hinzu, und dann können wir die Schaltfläche testen.
Hover-Zustandsbedingung
Die zweite Bedingung muss für Ihre Hover-Schaltfläche gelten, also stellen wir zuerst sicher, dass wir uns im richtigen Zustand befinden, indem wir auf die Miniaturansicht des Hover-Status in der Miniaturansichtsleiste klicken, und nachdem wir den richtigen Zustand im Formulareditor erhalten haben, können wir die hinzufügen folgende. In diesem Fall möchten Sie, dass es einen Hover-Zustand gibt, wenn sich die Maus über dem Mausbereich befindet, aber auch nicht gedrückt wird (da dies der gedrückte Zustand wäre).
Lassen Sie uns also den Bindungseditor für diesen Zustand erneut ausführen, indem Sie auf das Aktionssymbol klicken und "Bedingung hinzufügen, wenn" auswählen. Wenn der Bindungseditor geöffnet ist, können Sie die Funktion zur automatischen Vervollständigung verwenden, um sicherzustellen, dass die Bedingung richtig geschrieben ist. Die erste Bedingung, die wir brauchen, ist diejenige, die überprüft, ob sich die Maus über dem Mausbereich befindet, also erneut suchen
myButton_Symbol_mouseArea
Wenn wir die ersten drei Buchstaben eingeben und eine Liste der in der Datei verfügbaren Elemente erhalten, können Sie nach unten scrollen und den Mausbereich auswählen. Nach der Auswahl fügen wir am Ende einen Haltepunkt hinzu und führen die Liste der verfügbaren Eigenschaften zur Bewertung aus.
Die gewünschte Eigenschaft heißt containsMouse, sodass wir entweder mit der Eingabe beginnen können, um die Liste einzugrenzen, oder nach unten scrollen und sie auswählen können. Beachten Sie, dass dieses Mal das Ausrufezeichen nicht hinzugefügt wird, da wir überprüfen möchten, ob die Bedingung wahr ist und das Ausrufezeichen überprüft wird wenn es falsch ist. Es gibt also eine erste Bedingung für diesen Zustand:
myButton_Symbol_mouseArea.containsMouse
Wir müssen auch sicherstellen, dass der Schwebezustand nicht angezeigt wird, wenn auf die Schaltfläche geklickt wird, da sich die Maus im Mausbereich befinden muss, um auf die Schaltfläche zu klicken. Um zwischen diesen beiden Ereignissen zu unterscheiden, fügen wir dem Status eine weitere Bedingung hinzu.
Wenn der Bindungseditor geöffnet ist, können Sie && hinzufügen und dann mit dem Hinzufügen einer weiteren Bedingung beginnen. In diesem Fall handelt es sich um dieselbe zweite Bedingung wie im vorherigen Standardzustand. Beginnend mit einem Ausrufezeichen können Sie die Bedingung !myButton_mouseArea.pressed erneut eingeben und überprüfen, ob die Schaltfläche nicht gedrückt ist.
Jetzt sollten Sie also eine vollständige Bedingung für diesen Zustand haben, und sie sollte so aussehen:
myButton_mouseArea.containsMouse && !myButton_mouseArea.pressed
Der erste prüft, ob sich die Maus über der Schaltfläche befindet, aber noch nicht gedrückt ist. Wie Sie sehen können, ist der einzige Unterschied das Ausrufezeichen am Anfang, daher müssen Sie alle Bedingungen sorgfältig überprüfen, um sicherzustellen, dass alles richtig formatiert ist.
Lassen Sie uns eine letzte Bedingung hinzufügen, und dann können wir die Schaltfläche testen, und der Entwickler wird Ratschläge geben, die beim Debuggen komplexerer Zustände und Bedingungen helfen.
Zustand im gedrückten Zustand
Die letzte Bedingung für den gedrückten Zustand ist also einfacher, einfacher, da nur ausgewertet werden muss, ob die Taste gedrückt ist oder nicht. Wechseln wir in den gedrückten Zustand, indem wir erneut auf das Miniaturbild in der Statusleiste klicken, starten Sie den Bindungseditor mit dem Aktionssymbol, und dieses Mal benötigen wir eine einfache Bedingung:
myButton_mouseArea.pressed
Alle Staaten haben jetzt Bedingungen, die mit dieser Schaltfläche getestet werden können, indem eine Live-Vorschau durchgeführt wird. In diesem Fall ist es ziemlich einfach zu sehen, ob die richtigen Zustände zur richtigen Zeit aktiviert werden, aber je komplexer Ihr Design und je subtiler die Änderungen sind, desto schwieriger wird es. Sie werden es sehen, wenn Sie sich nur die Vorschau ansehen. Verwenden wir also einen kleinen Trick, um sicherzustellen, dass wir uns im richtigen Zustand befinden.
Dazu müssen Sie zunächst sicherstellen, dass Sie sich im Grundzustand befinden. Sie müssen ein Label hinzufügen, das den aktuellen Status anzeigt, in dem Sie sich befinden, sodass das Label und der Anker, die verwendet werden, in jedem Status vorhanden sein und die richtige Art und Weise haben müssen, damit umzugehen. Um zum Grundzustand zu gelangen, klicken Sie in der Statusleiste darauf, gehen Sie dann zum Abschnitt Qt-Quick Basics in der Bibliothek QML-Typen und ziehen Sie ein Textelement in den Formulareditor oben auf Ihrer Schaltfläche.
Sie müssen es entfernen, sobald Sie sicher sind, dass die Zustände korrekt sind, also spielt es keine Rolle, wie es aussieht, solange es lesbar ist. Wenn Sie also die Größe und Farbe anpassen müssen, um das Etikett lesbar zu machen, tun Sie dies jetzt.
Sobald das Etikett fertig ist, muss der Anker hinzugefügt werden, also stellen wir sicher, dass das Textelement ausgewählt ist, und dann können wir zum Eigenschaftenfenster gehen und die Texteigenschaft für dieses Element finden.
Bewegen Sie nun die Maus darüber, um das Aktionssymbol anzuzeigen, und starten Sie den Bindungseditor, indem Sie „Bindung festlegen“ auswählen. Hier verwenden wir dieses Textlabel, um den aktuellen Status der Komponente anzuzeigen. Dies kann durch Binden der State-Eigenschaft der Komponente an Ihren Text erfolgen. Dies kann mithilfe von Kombinationsfeldern im Bindungseditor erfolgen, was eine alternative, einfachere Möglichkeit zum Hinzufügen einer Bindung darstellt.
Verwenden wir also das linke Kombinationsfeld, um die Schaltfläche myButton_Symbol auszuwählen, und dann das rechte Kombinationsfeld, um die State-Eigenschaft auszuwählen, die automatisch die Bindung erstellt:
myButton_Symbol.state
Sie sollten jetzt sehen, dass die Bezeichnung für alle Ihre definierten Zustände den Namen des Zustands anzeigt. Sie können auf die Miniaturansichten klicken, um sicherzustellen, dass die Beschriftung in jedem Zustand korrekt ist, und dann Ihre Schaltfläche testen, um sicherzustellen, dass sie ordnungsgemäß funktioniert.
Dies geschieht durch Starten einer Live-Vorschau über die Vorschau-Schaltfläche in der oberen Symbolleiste, wobei die Schaltfläche in einem Fenster gestartet wird, in dem Sie damit interagieren können. Klicken Sie also auf die Schaltfläche, die jetzt im Standardzustand beginnen sollte, bewegen Sie die Maus ein und aus, sollte der Zustand von Standard zu Schweben und zurück wechseln, und drücken Sie die Maustaste, um zwischen Schweben und Klicken zu wechseln. Sie sollten in jedem Bundesstaat das richtige Bild und Etikett sehen. Wenn es funktioniert, herzlichen Glückwunsch! Sie haben Ihre erste richtige qds-Komponente erstellt.
Wenn das nicht funktioniert, gibt es ein paar Dinge zu überprüfen:
Stellen Sie sicher, dass die Hover-Eigenschaft im Mausbereich im Basisstatus und in allen anderen benutzerdefinierten Status auf „true“ gesetzt ist.
Überprüfen Sie Ihre Begriffe sorgfältig auf Rechtschreibfehler.
Wenn all dies korrekt ist, sollten Sie eine funktionierende Schaltfläche haben. Nachfolgend finden Sie einen Beispielcode, wenn Sie überprüfen möchten, ob Ihrer übereinstimmt.
Im nächsten Teil kehren wir zu Sketch zurück und verwenden diese Schaltfläche, um ein Menüsymbol zu erstellen, das aus mehreren Schaltflächeninstanzen besteht, und übertragen dann alles zurück an Qt Design Studio zur weiteren Entwicklung des Projekts.
Für diejenigen, die sich fragen, wie der qml-Code aussieht:
import QtQuick 2.8
Item {
id: myButton_Symbol
width: 211
height: 211
state: "default"
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"
}
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
}
},
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
}
},
State {
name: "pressed"
when: myButton_Symbol_MouseArea.pressed
PropertyChanges {
target: myButton_Symbol_default
visible: false
}
PropertyChanges {
target: myButton_Symbol_hover
visible: false
}
}
]
}
