Ласкаво просимо до посібника з Qt Design Studio Sketch Bridge. Щоб виконати його, вам знадобляться комерційний пакет Qt Design Studio 1.5 і Sketch Bridge, macOS і Sketch (розробник використовує 66.1).
У цьому уроці буде розказано, як зробити sketch-проект, який створює чистий експорт та імпорт у Qt Design Studio (скорочено називатимемо qds для решти уроку), використовує символи та екземпляри для правильної компонентизації та переходить від Sketch до qds в ітеративних циклах, створюючи складнішу сцену з простих будівельних блоків. Також розповімо про деякі найбільш поширені проблеми, з якими стикаються користувачі, дамо поради та хитрощі, які розробник створив, працюючи з плагіном Bridge.
Перш ніж почнуться подальші роз'яснення, відзначимо, що, хоча Sketch дозволяє дизайнерам гнучко і відкрито реалізовувати свої концепції дизайну, для створення ідеального за пікселями дизайну, побудованого на дружніх для розробника компонентах в qds, дуже важливо структурувати і підготувати свій проект певним чином і, хоча його освоєння не надто складно, для його успішного виконання потрібні час та знання. Розробники сподіваються, що цей посібник надасть вам необхідні знання, щоб наблизити ваші проекти до бажаного вами результату. Давайте заглибимося та почнемо проектувати.
Частина 1.1 - Проста кнопка
Перший крок почнеться з розробки єдиної кнопки, яка буде використовуватися як основа для проекту і запустити його в Sketch, тому відкрийте програму Sketch і створіть новий порожній файл.
Спочатку давайте створимо тло кнопки за замовчуванням, перетягуючи прямокутник. Варто переконатися, що це правильний розмір для кнопки, а потім перетворити його на символ. Після того, як створили символ, давайте видалимо екземпляр і працюватимемо безпосередньо на головному символі.
Потім можна додати кілька добре закруглених кутів, створити градієнт, додати тінь та підсвічування до кнопки. Щоб зробити дизайн легшим, можна трохи розтягнути артборд, щоб звільнити місце для тіней та додати фон для символу. Давайте виберемо колір, який не планується використовувати в дизайні, але який дає сильний контраст із кольорами дизайну, як цей блідо-рожевий на відео нижче.
Крім того, хоча вибір цих двох параметрів було скасовано, не потрібно, щоб цей фон експортувався або з'являвся, коли символи пізніше використовуватимуться. З розміченим простір дизайну давайте закруглимо ці кути, додамо простий градієнт і кілька тіней.
Тепер є фоновий стан за замовчуванням для кнопки, тому давайте створимо два інші стани, які хотілося б використовувати для цього уроку - стан наведення і натискання (hover and pressed state).
Зробити це можна, продублюючи оригінальний прямокутник, перейменувавши шари, а потім розмістивши їх поряд, щоб можна було бачити паралельні зміни дизайну. Щоб зробити це трохи простіше, розтягнемо ширину символу, щоб він відповідав кнопці поряд, змінимо розмір після того, як закінчимо з дизайном.
Тепер є хороше налаштування, тому давайте змінимо версії наведення та натискання фону кнопки, злегка коригуючи кольори градієнта, доки не отримаємо три версії кнопки. Хоча в UX немає справжніх правил, які можна вважати актуальними, до тих пір, поки ці стани узгоджені і працюють з вашим загальним дизайном інтерфейсу користувача, розробники дотримуються логіки, що стан наведення трохи яскравіший, ніж нормальний, а натиснутий стан трохи темніший.
На цьому етапі розробники також дадуть назву своїм шарам і будуть використовувати ці імена для ідентифікаторів qml, але незабаром це буде розглянуто докладніше.
З трьома раніше створеними фонами, давайте помістимо їх назад один на одного, тому що бажаємо, щоб вони були такими ж для експорту, і додамо ще один елемент, який зробимо верхнім шаром - точку доступу (hotspot), яка при імпорті в design studio буде автоматично перетворена на область миші.
Важливо, що коли додаємо точку доступу, щоб встановити ціль в none, потрібно бути впевненим, що це верхній шар кнопки, щоб правильно захоплювати мишею події.
Також варто переконатися, що артборд з кнопкою на ньому досить великий, щоб вмістити всі ефекти тіні, які були додані без обрізки, але підібралися досить близько до кордонів, щоб переконатися, що рамка обмежує елемента не надто велика. Добре і щільно прилеглі до меж ефекти працюють найкраще.
Після всіх попередніх кроків є проста кнопка для підготовки налаштувань у плагіні Qt Bridge.
Найбільш поширені помилки, які бачать розробники у користувачів, які використовують sketch bridge, відбуваються через наявність дублюючих ідентифікаторів у їх проекті, хоча імпортер в qds здатний виявляти та зберігати ідентифікатори qml, все ж рекомендується вручну перевірити всі ідентифікатори qml, є унікальними та значущими.
Одна з проблем полягає в тому, що після перейменування ідентифікатора qml для символу кожен екземпляр цього символу матиме ідентифікатор, що повторюється. Порада розробника полягає у використанні схеми іменування, яка розрізняє символ та екземпляри цього символу.
Наприклад, переконаємося, що ваш символ кнопки має ідентифікатор myButton_Symbol, а різні шари мають цей префікс з приєднаними станами, як myButton_Symbol_default і т. д. І оскільки, напевно, буде більше областей миші, пізніше в цьому проекті можна перейменувати точку доступу коли будемо використовувати кнопку як екземпляри на екрані, обов'язково дамо цим екземплярам унікальний ідентифікатор, пов'язаний з цим екраном, а також імпортуємо, щоб відзначити, що ідентифікатори qml можуть використовувати лише підмножину можливих символів. Для цього в посібнику будуть використовуватися підкреслення, щоб відокремити імена, тому що добре відомо, що цей формат працюватиме.
Коли перейменували ці ідентифікатори, варто переконатися, що всі шари встановлені в Child, тому що бажано, щоб для кожного шару були окремі asset'и, тому нічого об'єднуватимемо на даному етапі. Пізніше, коли створимо деякі фони, будемо використовувати об'єднання, щоб мінімізувати кількість окремих asset'ів у дизайні, але зараз давайте правильно встановимо всі ці qml-ідентифікатори та переконаємося, що для кожного з дизайнів кнопок встановлено тип експорту child.
За суб'єктивним досвідом розробника, має сенс називати шари точно так, як ваші ідентифікатори qml, це значно полегшить пошук ілюстрацій пізніше, особливо тому, що ці файли можуть стати дуже великими і складними, коли вони наближаються до рівня завершення проекту інтерфейсу користувача.
У плагіні Qt Bridge слід спочатку налаштувати кілька основних властивостей на сторінці налаштувань. Це глобальні налаштування, які будуть використовуватись для решти проекту, тому потрібно буде зробити це лише один раз. Спочатку потрібно вибрати шлях експорту. Для цього створимо папку проекту, де пізніше зможемо створити проект Design Studio, в якій створимо папку експорту та виберемо її як місце розташування, в яке хочемо помістити asset'и та метадані. Створіть необхідні папки за допомогою клавіш shift+cmd+n.
Залишимо решту налаштувань за замовчуванням і будемо використовувати png для цього уроку. На даний момент все готове повернутися до домашньої панелі Bridge Plugin і виконати перший експорт.
З усіма qml-ідентифікаторами та типами експорту, встановленими правильно, ви готові експортувати компонент і перенести його до Design Studio, де додамо кілька станів і протестуємо кнопку, перш ніж продовжимо розробку в Sketch.
Отже, давайте просто натиснемо на експорт, а потім вирушимо до Design Studio.
Частина 1.2 - Перший імпорт
Для початку в Design Studio можна створити порожній проект для імпорту Sketch design, тому перейдемо на домашню сторінку і натиснемо кнопку нового проекту, це запустить wizard (майстри), після чого потрібно вибрати порожній проект за замовчуванням.
Можна вибрати папку проекту як місце розташування для цього проекту, а потім інші параметри можна залишити за промовчанням. Після завершення роботи wizard піде автоматичне перемикання на файл ui.qml за замовчуванням, який постачається разом із проектом, щоб імпортувати sketch design, тепер можна перейти на панель asset'ів, додати нові asset'и та потім перейти до папки, в яку експортували проекти із Sketch.
Далі потрібний .metadata file. Ця опція буде доступна, тільки якщо у вас є комерційна версія Design Studio з увімкненим плагіном засобу імпорту.
Щоб перевірити це, ви можете переглянути доступні імпорти у полі зі списком фільтрів типів файлів. Якщо тип метаданих (metadata type) є, значить у вас є коректне налаштування, і можна вибрати цей файл, щоб запустити панель імпорту.
Для першого імпорту слід використовувати параметри за замовчуванням, далі експортувати метадані та asset'и, залишаючи злиття вимкненим. Але оскільки хочеться відразу ж почати роботу над деякими речами в Design Studio, при всіх наступних імпортах залишимо функцію злиття включеної, тому випадково не перезапишіть вашу роботу в qds.
Після завершення імпорту можна закрити імпортер та подивитися на імпортовані файли. Вони будуть розташовані у папці з ім'ям вашої папки експорту. Якщо ви перейдете в цю папку, побачите елементи. На даний момент у вас є тільки один компонент кнопки, тому перейдемо до цього файлу і перевіримо, що ваш експорт виконано правильно.
У цьому файлі повинні бути три різні шари кнопок, які будуть використовуватися для різних станів плюс область миші. За замовчуванням sketch прикріплює порожній шар до експорту, тут він називається asset'ом, і перше, що потрібно зробити зараз – це видалити цей шар, оскільки він не потрібен у вашому компоненті.
Після цього потрібно встановити, щоб область миші наведення була включена, оскільки буде використовуватися стан наведення. Давайте зробимо це прямо зараз, клацнувши мишею на миші в навігаторі, перейшовши на панель властивостей і вибравши наведення мишею для вашої області миші.
Оскільки в даний час знаходимося в Base State (базовому стані), це єдиний стан, який маємо на даний момент, тому він застосовуватиметься до кожного стану, який буде додаватися з цього моменту. Поки ви тут, ви можете додавати необхідні стану. Ви завжди повинні намагатися використовувати явні стани користувача для програми.
Базовий стан корисний для внесення змін до вашого дизайну, який бажаємо застосувати до будь-якого іншого стану, якщо в даний час перебуваємо в стані, створеному користувачем, то будь-які зміни, які ми вносимо в поточному стані, будуть застосовуватися тільки до цього стану.
Отже, давайте створимо три стани, які вам потрібні для цієї кнопки. Додамо стан з назвою за замовчуванням, одне з ім'ям наведення, а інше - з натисканням.
Тепер у вас є ці стани, можна змінити стан системи за замовчуванням на стан користувача за умовчанням. Робимо це, клацаючи іконку дії на мініатюрі стану та вибираючи «зробити за замовчуванням» (“make default”), тепер щоразу при завантаженні цього компонента – це буде стан, у якому видно кнопку.
Тепер необхідно додати деяку логіку в ці стани, щоб з'єднати їх із вашою областю миші. Зробимо це на наступному кроці, використовуючи параметр, коли умови вибору також будуть тут на іконці дії (action icon). А поки давайте підготуємо ілюстрацію в кожному з відповідних станів і, оскільки це перший імпорт, давайте почнемо з простого показу коректного відповідного шару asset'ів у кожному стані.
Найпростіший спосіб зробити це просто зробити відповідний шар видимим, а всі інші шари невидимими в кожному стані. Отже, спочатку давайте повернемося до стану за промовчанням, клацнувши по потрібній мініатюрі на панелі станів. З цим вибраним станом можна перейти до ваших зображень у навігаторі і вибрати кожен з asset'ів один за одним і правильно перемикати видимість для кожного шару, тому для стану за промовчанням потрібно, щоб шар за промовчанням був видимим, а при наведенні та натисканні встановити невидимим .
Після того, як вони налаштовані, можна перейти у стан наведення та повторити цей процес, роблячи зображення при наведенні мишею єдиним видимим шаром. Нарешті, робимо це ще раз для натискання шару, вибираючи стан натискання і повторюючи процес, щоб зробити видимим тільки шар натискання.
Частина 1.3 — Умови виконання
Тепер ви повинні бути готові додати логіку до цих станів, щоб з'єднати їх із вашою областю миші, але спочатку варто швидко перевірити, що все налаштовано правильно, клацаючи між мініатюрами станів. Якщо все правильно, ви маєте побачити лише відповідний шар у редакторі форм (form editor). Припускаючи, що все працює нормально, давайте підемо і додамо логіку до станів/області миші, зробимо це за допомогою Умов виконання - по суті, це означає, що при виконанні певних умов цей стан буде активним. Умови виконання можуть ускладнюватися досить швидко і часто, вам потрібно додати більше однієї умови, щоб правильно змоделювати будь-яку значущу поведінку. Ви побачите, що у двох станах потрібно оцінити дві окремі умови, щоб переконатися, що поведінка коректна. Також потрібно бути обережними, щоб перевірити, чи є всі умови, що перевіряються true або not true.
У контексті qml і qds це означає, що можливо оцінити достовірність властивостей декількох елементів і перемістити інтерфейс користувача в стан, в якому застосовуються ці умови. Можна подивитися чи є щось істинним, не істинним, великим, рівним і т. д. Також можна порівняти кілька елементів щодо їх достовірності з такими операторами, як AND або OR.
Умови виконання оцінюються зліва направо та в порядку появи у коді, тому, якщо у вас є дві умови для різних станів, які обидва є дійсними, він вибере першу з цих умов, яка буде застосовуватись до вашого стану. Тому важливо переконатися, що кожна умова може бути істинною лише в одному стані.
Якщо в даний момент все це звучить дещо складно, просто спробуйте слідувати крок за кроком, можливо, до кінця у вас створиться найкраще уявлення про корисність та силу умов виконання.
Почнемо з додавання умови за умовчанням (default condition). Необхідно переконатися, що кнопка за замовчуванням відображається, коли миша не наведена на кнопку і кнопка миші не натиснута. Обидві ці умови повинні бути умовою «не», і обидві повинні бути істинними, тому миша не наведена і кнопка не натиснута – це правильне твердження.
Можна визначити умову не виконання, додавши знак оклику перед нашими умовами і для оцінки обох умов будемо використовувати символ подвійного амперсанда між ними. Отже, давайте йти вперед і робити це зараз. Почніть з вибору стану за замовчуванням на панелі попереднього перегляду мініатюр станів, потім клацніть іконку дії і виберіть параметр add when condition («Додати за умови»), при цьому відкриється редактор прив'язки, і тоді можна додати вашу умову сюди.
Дуже важливо, щоб умова була написана правильно, тому використовувати функцію автозаповнення, щоб переконатися у відсутності орфографічних помилок.
Умова стану за замовчуванням (Default State Condition)
Після перших трьох літер елемента, які потрібно перевірити, в даному випадку це область миші, яка називається myButton_Symbol_mouseArea. Після того, як перші три символи введені, має бути список усіх можливих завершень, тому давайте виберемо область миші зі списку. У цій першій умові необхідно перевірити властивість області миші, яка називається containsMouse.
Це скаже вам, якщо користувач навів кнопку. Таким чином, після того, як у вас є область миші в редакторі прив'язок, можна додати точку повної зупинки, а потім пройти по списку і знайти властивість, що містить мишу і вибрати його.
Тепер є перша умова, яка перевіряє, що користувач на даний момент не навів на кнопку, і це виглядає так:
!myButton_Symbol_mouseArea.containsMouse
Також потрібно оцінити другу умову, щоб переконатися, що користувач також не натискає кнопку, можна встановити умову для оцінки обох речей, додавши два амперсанди між ними. Тепер можна повторити перший крок, тому що варто ще раз перевірити цю область миші.
Далі йдуть перші літери області миші, що викликає список автозаповнення. Знову виберіть область миші і додайте точку повної зупинки, щоб отримати список властивостей, на цей раз цікава для нас властивість є натисканням, яке повідомляє нам, чи містить ця кнопка натиснутою мишу.
Отже, остаточна умова для цієї першої кнопки має виглядати так:
!myButton_Symbol_mouseArea.containsMouse && !myButton_mouseArea.pressed
Сама по собі, коли ця умова не актуальна, вона нічого і не робить, просто гарантує, що після того, як подія наведення або натискання пройшла, кнопка повернеться в стан за замовчуванням. Оскільки на даний момент кнопка завжди запускається в стані за замовчуванням, не буде видно жодних змін, тому давайте додамо наступні умови, а потім можна перевірити кнопку.
Умова стану наведення (Hover State Condition)
Друга умова повинна бути для вашої кнопки наведення, тому давайте спочатку переконаємося, що перейшли у правильний стан, клацнувши мініатюру стану наведення на панелі мініатюр, а потім, отримавши правильний стан у редакторі форм, можна додати наступне. В цьому випадку потрібно, щоб був стан наведення, коли миша знаходиться над областю миші, але також не натиснута (оскільки це буде натиснутий стан).
Отже, давайте знову запустимо редактор прив'язок для цього стану, натиснувши на іконку дії і вибравши «add when condition» («додати за умови»). З відкритим редактором прив'язок можна використовувати функцію автозаповнення, щоб переконатися, що умова написана правильно. Перша умова, яка нам потрібна, це та, яка перевіряє, чи знаходиться миша над областю миші, тому знову шукаємо
myButton_Symbol_mouseArea
Коли введемо перші три літери та отримаємо список елементів, доступних у файлі, можна прокрутити вниз і вибрати область миші. Як тільки вибрали, додаємо точку зупинки до кінця та запускаємо список доступних властивостей для оцінки.
Властивість, яку потрібно називати containsMouse, тому можна або почати друкувати, щоб звузити список, або прокрутити вниз і вибрати його, зауважте, що цього разу не додано знак оклику, тому що хочемо перевірити, чи виконується умова і знак оклику перевіряє, чи є воно хибним. Отже, є перша умова цього стану:
myButton_Symbol_mouseArea.containsMouse
Також потрібно переконатися, що стан наведення не відображається, коли натискаємо кнопку, оскільки, щоб натиснути кнопку, миша повинна знаходитися в області миші. Щоб розрізняти ці дві події, додамо ще одну умову стану.
Відкривши редактор прив'язки, можна додати &&, а потім почати додавати іншу умову. У цьому випадку це та сама друга умова, що й у попередньому стані за умовчанням. Починаючи з знака оклику, можна знову ввести умову !myButton_mouseArea.pressed, перевіривши, що кнопка не натиснута.
Отже, тепер у вас має бути повна умова для цього стану, і вона має виглядати так:
myButton_mouseArea.containsMouse && !myButton_mouseArea.pressed
Перше перевіряє те, що миша знаходиться над кнопкою, але ще не натиснута. Як ви можете бачити, єдина відмінність - це знак оклику на початку, тому необхідно ретельно перевіряти всі умови, щоб переконатися, що все правильно оформлено.
Давайте додамо остаточну умову, а потім можна протестувати кнопку, і розробник дасть пораду, яка допоможе при налагодженні складніших станів та умов.
Умова стан натискання (Pressed State Condition)
Отже, остання умова для натиснутого стану простіше, тому що єдине, що необхідно оцінити це те, натиснута кнопка чи ні. Давайте перейдемо в натиснутий стан, знову клацнувши по мініатюрі на панелі станів, запустимо редактор прив'язок за допомогою іконки дії і цього разу потрібна проста умова:
myButton_mouseArea.pressed
Тепер у всіх станах є умови, які можна протестувати за допомогою цієї кнопки, виконавши попередній перегляд в реальному часі. У цьому випадку досить просто побачити, чи активовані правильні стани в потрібний час, проте чим складніше ваш дизайн і чим тонші зміни, тим важче стає. Ви побачите це просто переглянувши прев'ю. Отже, давайте скористаємося невеликим фокусом, щоб переконатися, що у правильному стані.
По-перше, для цього потрібно переконатися, що ви знаходитесь у базовому стані. Вам потрібно додати мітку, яка показуватиме поточний стан, в якому ви знаходитесь, тому мітка та прив'язка, які будуть використовуватися, повинні бути в кожному стані та мати правильний спосіб обробки. Щоб перейти до базового стану, клацніть його на панелі станів, потім перейдіть до розділу Qt-Quick Basics у бібліотеці типів QML (QML Types library) і перетягніть текстовий елемент до редактора форм у верхній частині вашої кнопки.
Потрібно буде її видалити, як тільки переконайтеся, що стан правильний, тому не має великого значення, як вона виглядає, поки вона читальна. Тому, якщо вам потрібно відрегулювати розмір і колір, щоб мітка була легкочитана, зробіть це зараз.
Як тільки мітка буде готова, потрібно буде додати прив'язку, тому давайте переконаємося, що текстовий елемент вибраний, а потім можна перейти до панелі властивостей і знайти властивість тексту для цього елемента.
Тепер наведіть на нього курсор миші, щоб відобразити іконку дії, і запустіть редактор прив'язок, вибравши "установити прив'язку" ("set binding"). Тут будемо використовувати цю текстову мітку, щоб показати стан компонента. що можна зробити, зв'язавши властивість стану компонента з текстом. Це можна зробити, використовуючи поля зі списком у редакторі прив'язок, це альтернативний простіший спосіб додати прив'язку.
Отже, давайте використовуємо ліве поле зі списком, щоб вибрати кнопку myButton_Symbol, а потім праве поле зі списком, щоб вибрати властивість стану (state property), яке автоматично створить прив'язку:
myButton_Symbol.state
Тепер ви повинні побачити, що для всіх ваших певних станів на мітці відображатиметься назва стану. Можна клацнути на мініатюрах, щоб переконатися, що мітка вірна в кожному стані, а потім перевірити вашу кнопку, щоб переконатися, що вона працює правильно.
Робиться це так, запускається перегляд у реальному часі за допомогою кнопки попереднього перегляду у верхній панелі інструментів, при цьому кнопка запускається у вікні, де можна взаємодіяти з нею. Тому натисніть кнопку, яка тепер повинна починатися зі стану за замовчуванням, переміщення та вимкнення миші має переключити стан зі стандартного на наведення та назад, і натиснути кнопку миші, щоб переміщатися між наведенням та натисканням. Ви повинні побачити правильне зображення та мітку в кожному штаті. Якщо це працює, вітаємо! Ви створили свій перший правильний компонент QDS.
Якщо це не працює, є кілька речей, які потрібно перевірити:
Переконайтеся, що властивість наведення миші на область миші має значення true у базовому стані та у всіх інших станах користувача.
Уважно перевірте умови на наявність орфографічних помилок.
Якщо все це правильно, у вас має бути працююча кнопка. Нижче наведено код для прикладу, якщо ви хочете двічі перевірити, чи збігається ваш.
У наступній частині повернемося до Sketch і будемо використовувати цю кнопку для створення символу меню, що складається з декількох екземплярів кнопки, а потім перенести все назад у Qt Design Studio для подальшої розробки проекту.
Для тих, хто цікавиться, як виглядає qml-код:
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
}
}
]
}
