Добро пожаловать во вторую часть руководства по Sketch Bridge для Qt Design Studio. В конце первой части вы создали первую кнопку и заставили ее работать в различных состояниях в Qt Design Studio (в остальной части руководства будет сокращённо qds). В этой части вернёмся назад и создадим компонент меню из экземпляров этой кнопки, и рассмотрим переопределение мконок и текста для каждого экземпляра.
Часть 2.1 - Создание компонента меню с использованием экземпляров кнопок
Итак, давайте откроем файл Sketch и начнем с создания меню фона, нужно сделать его достаточно большим, чтобы поместились все четыре ваши кнопки. И пока оставим его довольно простым - прямоугольным.
Снова нужно создать прямоугольник, преобразовать его в символ, а затем удалить этот экземпляр и поработать над главным символом на вашей странице символов.
Можно регулировать размер и цвета прямоугольника, пока вы не будете довольны, и в этом случае возможно оставить единичные настройки для слияния, так как нужно, чтобы простой единичный ассет с этого начинался.
Также дадим фону идентификатор qml, в этом случае myMenu_Symbol_background .
Как только у вас будет меню фона, можно начинать использовать символы для создания экземпляров кнопок из компонента главной кнопки, которую создали в sketch и добавили функциональность взаимодействия в Design Studio.
Для этого перейдите в Sketch Menu для добавления ассетов, кнопку с плюсом вверху и перейти к символам/документу (symbols/document) - здесь отображаются текущие символы, доступные в документе. На данный момент здесь есть только один символ - ваша кнопка, так что давайте продолжим и добавим это в новый компонент меню.
Теперь у вас есть первый экземпляр и можно просто повторить этот процесс, скопировать, вставить или использовать alt + drag, чтобы добавить еще три кнопки в меню.
После того, как это будет сделано нужно проверить qml-идентификаторы, назначенные новым экземплярам символов, и, пока вы делаете это, также можете убедиться, что меню имеет хороший qml-идентификатор.
Итак, давайте начнем с меню, так как это тоже символ используем схему именования аналогичную последней и назовем ее - myMenu_Symbol .
Теперь можно посмотреть на сами кнопки, поэтому в этом случае будем использовать следующую схему именования для этих случаев. Это будет выглядеть примерно так:
myButton_myMenu_1
myButton_myMenu_2
myButton_myMenu_3
myButton_MyMenu_4
Но что было бы еще лучше, так это конкретное имя для каждой роли кнопок, поэтому давайте подумаем о том, что вы хотите, чтобы эти кнопки делали. Основываясь на том, каким может быть этот пользовательский интерфейс можно придумать еще более четкую схему именования этих кнопок.
Одна вещь, которую не следует делать - это изменять эти идентификаторы в середине проекта, хотя в теории это возможно, благодаря механизму слияния, отслеживающему эти изменения идентификаторов, поэтому рекомендуется придерживаться схемы имен в течение всего процесса.
Итак, вместо этого давайте использовать эти идентификаторы:
myButton_myMenu_home
myButton_myMenu_dashboard
myButton_myMenu_profile
myButton_myMenu_settings
Так понятнее для чего предназначен каждый экземпляр, а также это гарантирует, что у вас есть уникальные идентификаторы для каждого экземпляра вашего символа.
К этому моменту можно было бы уже реэкспортировать его в qds, но пока вы здесь, давайте подготовим пару дополнительных вещей для кнопок, добавив метку и иконку.
Часть 2.2 - Подготовка символа для переопределения свойств
Для начала добавим их к главному символу кнопки, поэтому давайте вернемся к этому сейчас и начнем работать. Начать можно с метки и желательно убедиться, что она видна, но все еще под точкой доступа мыши, которую добавили первой.
Теперь снова перейдите в Sketch Menu с + символом, выберите текстовый элемент и добавьте его в ваш дизайн, убедившись, что это второй слой, прямо под областью мыши.
Теперь убедимся, что текстовое поле имеет фиксированный размер, который охватывает всю ширину кнопки, а также что текстовый объект выровнен по центру, таким образом, когда вы переопределяете этот текст в ваши экземпляры, новая метка будет центрирована и, когда экспортируете в qds эти свойства также будут перенесены.
Поскольку нужно переопределить этот текст, давайте просто используем “default text” («текст по умолчанию») здесь в качестве placeholder.
И снова убедимся, что у текстового объекта есть хороший идентификатор qml, давайте назовем его myButton_Symbol_label , а затем можно перетащить его так, чтобы он находился под областью мыши, а также необходимо удостовериться, что слой имеет то же имя, что и идентификатор qml.
Теперь, чтобы добавить иконку или фактически три версии одной иконки на этом этапе нужно использовать иконку placeholder для основного символа, а затем вернутся и изменить отдельные иконки, поэтому можно просто перетащить другую фигуру, что-то простое, например, треугольник, перейдя в меню фигур (shapes menu) в sketch, выбрав треугольник и перетащив его.
Стоит убедиться, что он также находится под областью мыши, но выше фоновых слоев (background layers). Как только это установлено нужно продублировать его дважды, чтобы иметь версию для каждого состояния вашей кнопки (по умолчанию, при наведении курсора, при нажатии) и внести небольшие изменения в каждую версию, чтобы ее можно было позже протестировать в qds.
В этом случае стоит просто немного подкорректировать цвета, так как это графические элементы, которые позже заменим. Не имеет большого значения, что вы здесь делаете, пока вы можете отличить их друг от друга.
Теперь, как и во всех слоях, стоит изменить идентификаторы и проверить параметры экспорта, убедившись, что в этом случае все значки настроены на экспорт как дочерние. Дадим названия идентификаторам:
myButton_icon_placeholder_default
myButton_icon_placeholder_hover
myButton_icon_placeholder_pressed
Также стоит убедится, что слои имеют то же имя, что и идентификаторы и настроены на экспорт как дочерние элементы, а затем перетащим их под область мыши в навигаторе слоев (layer navigator).
С помощью этого набора можно вернуться к меню символа (menu symbol) и посмотреть, как это повлияло на ваши экземпляры, и, как видно теперь все они имеют значки и текстовые метки. Позже вернемся и разберемся с иконками, так как есть несколько разных подходов, которые можно использовать для этого, и стоит подробно рассмотреть их, пока можно использовать метки для создания первого из ваших переопределения свойств.
В качестве краткого объяснения для переопределения свойств, с помощью символов в sketch, вы можете изменить некоторые части экземпляра символа на что-то новое. Это не повлияет на исходный главный символ, а только внесет эти изменения в локальный экземпляр, в который вы изменения и вносите.
Хотя в sketch есть много разных типов переопределения символов с помощью qds, разработчики поддерживают только несколько из них, основным из которых является текст. Другим переопределителем является сам символ, но поскольку это довольно продвинутая концепция, ее касаться пока не стоит, а вместо этого сосредоточимся только на текстовом варианте.
Для этого нужно перейти к первому экземпляру вашей кнопки, который назвали home, и на панели свойств sketch для вашей кнопки видно, что есть новое поле для переопределения текста. Чтобы использовать его, можно просто напечатать здесь новый текст, поэтому для этого первого экземпляра можно просто добавить «Home» к тексту переопределения, и увидим, что в этом первом случае только у вас есть ваш новый текст.
Когда повторно импортируем это позже в design studio получим свойство псевдонима (alias property) для компонента кнопки для этого текстового поля и автоматически добавляем текст «Home» к псевдониму этого экземпляра. А пока давайте закончим добавление новой текстовой метки ко всем вашим кнопкам, а затем можно экспортировать ваш дизайн и продолжить работу с qds.
Итак, давайте добавим текст ко второму экземпляру, в этом случае “Dashboard” («Панель инструментов»), третье - “Profile” («Профиль»), четвертое - “Settings” («Настройки») .
Теперь также можно понять, почему текстовое поле фиксированной ширины кнопки и использовали опцию выравнивания по центру, поскольку ваш текст теперь всегда хорошо центрирован в вашем дизайне кнопки, независимо от его длины.
Итак, давайте экспортируем это снова, на этот раз получим предупреждение о переопределении метаданных, что является нормальным, так что продолжим и, когда это закончится вернемся к qds.
Часть 2.3 - Слияние импорта
В qds стоит убедиться, что вы находитесь в правильном проекте, а затем повторить шаги для импорта вашего файла метаданных, нажав кнопку импорта ассетов в библиотеке qml и вызвав импортер ассетов (asset importer). Очень важно убедиться, что вы выбрали опцию слияния для импорта, если вы забудете сделать это, то вся работа, которую вы проделали на предыдущем уроке, перезапишется. Поэтому, пожалуйста, убедитесь, что у вас выбрана опция слияния (merge option), прежде чем продолжить. Этот параметр является постоянным между сессиями, поэтому вам придется делать это только один раз, но проверять его нужно каждый раз, когда импортируете в целях безопасности.
Пока слияние включено, можно продолжать и импортировать ваши проекты и, при условии, что не допущены ошибки (здесь не должно быть ошибок или предупреждений) можно продолжить и посмотреть на ваш импорт.
Первое, что можно проверить - это новый компонент меню, поэтому давайте посмотрим в папке проекта myMenu_Symbol.ui.qml и откроем его в редакторе форм.
Вы должны увидеть меню с четырьмя кнопками и текстом псевдонима для каждой, так как состояния и взаимодействия для этих кнопок уже созданы это меню должно быть полностью функциональным, за исключением изменения иконок, которые сделаем чуть позже.
Итак, давайте проверим его, запустив предварительный просмотр в реальном времени, а затем наведя курсор мыши, нажмите на кнопки. Видно, что благодаря работе, которую проделали в предыдущем уроке, у вас есть состояние наведения и нажатия для каждой новой добавленной кнопки без необходимости дублировать работу. Это должно показать вам мощь хорошей компонентизации, которую наверняка оценят разработчики, которым вы передадите эту работу.
Теперь, когда нужно внести изменения в общее поведение этих кнопок, вам нужно только перейти к основному компоненту, внести свои изменения там, и они будут автоматически применены ко всем экземплярам. Что и сделаем сейчас, сделав иконки в правильном состоянии.
Итак, давайте теперь переключимся на компонент кнопки и поработаем с иконками.
С активным компонентом кнопки в навигаторе можно видеть три новых слоя ассетов для каждой иконки. Нужно повторить шаги, которые сделали в части 1 и сделать каждую иконку видимой в каждом состоянии, поэтому давайте пройдемся по каждому состоянию и используем «флажок» видимости, чтобы сделать это. Убедитесь, что значение по умолчанию является единственным видимым по умолчанию, наведение в состоянии наведения и нажатие в состоянии нажатия.
Сделав это, можно проверить вашу кнопку напрямую с помощью кнопки предварительного просмотра и теперь вы должны посмотреть, что она срабатывает тотчас. Также можно это быстро проверить в вашем компоненте меню, чтобы убедиться, что она работает со всеми вашими экземплярами.
На следующем шаге нужно вернуться в sketch и создать отдельные иконки. До этого нужно подготовить кнопку для замены иконок в каждом экземпляре, и вы сможете сделать это, сделав ваши собственные псевдонимы здесь в qds. Так что давайте сделаем, убедившись, что ваш компонент находится в базовом состоянии, а затем выбрав ассет для первой из иконок, по умолчанию.
Затем загляните на вашу панель свойств, выбрав её в навигаторе и интересующее вас свойство - исходный файл вашей иконки, затем используйте иконку действия (action icon), чтобы вызвать меню и выбрать опцию добавления псевдонима. Это будет означать, что из экземпляров иконки в вашем компоненте меню можно установить новый ассет иконки для этой кнопки.
Давайте повторим этот шаг для каждого из иконок, наведите курсор мыши и затем нажмите. Установив псевдоним исходной иконки, можно взглянуть на ваш компонент меню.
Итак, давайте загрузим компонент myMenu_Symbol в редакторе форм и выберем один из ваших экземпляров кнопок. После того, как вы выбрали на панели свойств справа видны все доступные псевдонимы для этого экземпляра, показывающий псевдоним текста, который добавили в sketch и три разных псевдонима состояния иконки, которые только что добавили в qds.
Вернемся к ним снова после того, как создадим некоторые иконки в sketch и изменим их позже.
Часть 2.4. Разработка иконок
С открытым sketch будем создавать артборд только для иконок. Артборды обычно всегда являются компонентами в qds после импорта, будем использовать их позже, когда подойдем к разработке экранов, но для этого случая импортируем ассеты из этого артборда и не станем генерировать qml, но об этом позже.
На данный момент можно использовать функцию Sketch для создания отдельной страницы для ассетов, чтобы потом держать их отдельно от вашего дизайна экрана, поэтому давайте добавим новую страницу в верхнем левом меню sketch, и можно вызвать эти ассеты, а затем перетащить артборд, чтобы начать создавать иконки. Не имеют особого значения точные размеры этого артборда, так как сейчас это просто место для хранения ассетов, поэтому просто убедитесь, что он достаточно большой, чтобы вместить это произведение искусства, а затем можно сосредоточиться на создании иконок.
Нарисуем их непосредственно в sketch и используем несколько комбинированных фигур, чтобы взглянуть на хороший способ использования функции слияния плагина Bridge.
Итак, давайте начнем с рисования иконки дома. Прямоугольник и треугольник должны сделать свое дело, как только имеются обе фигуры, можно использовать комбинированную форму, чтобы создать один элемент, который станет иконкой, а затем взгляните на структуру вашей композиции, которая работает здесь с помощью плагина Bridge.
Таким образом, комбинированная фигура выглядит как отдельный мини-компонент: комбинироаванная фигура выступает в качестве родителя для двух дочерних слоев, которые нарисованы под ней, и, поскольку, нужен только один ассет иконки, можно убедиться, что комбинированная фигура сама по себе является дочерней и два дочерних слоя настроены на слияние. Для этого нужно объединить эти два слоя в одно изображение при экспорте, которое станет объединенной формой, поэтому будет иметь идентификатор этого элемента.
Это особенно полезный метод, когда рассматривается неразрывнй рабочй процесс в качестве минимизации ассетов в проекте, но при этом всегда позволяет вернуться и изменить отдельные части проекта в sketch.
Чтобы сделать несколько вариантов для каждой иконки просто скопируйте дважды. Скопировав две дополнительные версии ваших иконок, можно внести некоторые коррективы в цвета, а также поскольку этот артборд не используется в качестве фактического экрана в дизайне, можно поместить все ваши иконки рядом друг с другом и не беспокоиться о расположении их друг над другом. Пока делаем первую иконку, также создаем уникальные идентификаторы qml для каждого из вариантов иконок и подформ.
Сделав первую иконку, можно быстро сделать оставшиеся три, используя ту же технику, что и раньше, создав комбинированные фигуры из нескольких частей, убедившись, что дочерние слои комбинированных фигур настроены на слияние, а сама комбинированная фигура является дочерней, копируя иконку дважды и делая три варианта на иконку.
Видео немного ускоренное, чтобы сэкономить время, но по мере разработки нужно проверять, чтобы каждый раз переименовывать свои идентификаторы и слои qml, а также проверять, что только верхняя комбинированная фигура настроена на экспорт дочернего элемента и все вложенные формы настроены на слияние.
Итак, теперь имеется 4 иконки по три варианта на иконку, давайте рассмотрим все эти идентификаторы qml и убедимся, что они уникальны и значимы для вашего проекта.
Сначала давайте посмотрим сам артборд. Можно вызвать что-нибудь простое, например, iconAssets, даже если вы не собираетесь генерировать qml из этого артборда, хорошей практикой является уверенность в том, что вы всегда проверяете ваши идентификаторы. Надеемся, в какой-то момент это станет вашей второй натурой.
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
Также стоит удостовериться, что все идентификаторы дочерних слоёв также уникальны, даже если они не будут частью проекта и, следовательно, не так важны, нужно стараться, чтобы в процессе импорта не было ошибок. Поэтому вместо того, чтобы работать по схеме именования, просто перечислим их здесь простым способом.
Например, иконка дома использует этот шаблон для объединенных форм.
homeSquare1
homeTriangle1
homeSquare2
homeTriangle2
homeSquare3
homeTriangle3
Теперь, когда все ваши иконки настроены и проверены идентификаторы qml, можно реэкспортировать проект и вернуться в qds, чтобы добавить эти иконки в ваши кнопки. Итак, давайте нажмем кнопку экспорта и снова перезапишем метаданные.
Теперь можно вернуться к qds и к импортеру ассетов. На этот раз воспользуемся другой функцией импортера и импортируем только новые ассеты иконок, сняв флажок «сгенерировать qml», и убедимся, что слияние, по-прежнему, проверяется на будущее в любом случае. Продолжайте и импортируйте ваш проект снова.
Часть 2.5. Замена источника иконки
Теперь можно видеть, что у вас есть все ассеты иконок. Нет необходимости генерировать новый qml, поскольку стоит просто поменять правильные версии ваших иконок, используя свойства псевдонимов экземпляров. Итак, давайте выберем первый экземпляр компонента и воспользуемся свойствами псевдонима, которые были созданы ранее для этой цели, чтобы сделать это. Вы можете нажать вашу первую кнопку, иконку дома и на панели свойств просто использовать раскрывающийся список, чтобы выбрать новые ассеты для иконок, поэтому для каждого состояния выберете соответствующие ассеты, а затем сможете проверить это в режиме предварительного просмотра.
Теперь у вас есть новые рабочие иконки для первой кнопки. Давайте повторим этот процесс для остальных иконок, пока не появятся правильные иконки в каждом экземпляре, а затем снова протестируем их в режиме предварительного просмотра, чтобы убедиться, что все состояния работают.
Ниже приведён код qml для обоих компонентов:
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"
}
}
