Поставяне на методи за изграждане на съвети и трикове за диета за по-чист UI код във Flutter by
На първо място искам да поясня, че тази статия е написана от Liro Krankka и правя само оторизиран превод, в края на статията ще бъдат връзките към използваната оригинална статия.
Трептенето е готино - разтърси го.
Разполагаме с модерни и свежи приложни програмни интерфейси (API) за изграждане на сложни потребителски интерфейси (UI) в малко количество код. Горещото презареждане е страхотно - можем да бъдем 5 екрана дълбоко в нашата йерархия за навигация, да направим няколко промени в потребителския интерфейс, да натиснем crtl + S и потребителският интерфейс ще се промени за по-малко от секунда, без да загуби състоянието. Но що се отнася до изграждането на сложни приложения, в крайна сметка получаваме много UI код.
С повече код идва и повече отговорност за поддържането му четливост. Поддържането на кода четлив улеснява поддръжката в дългосрочен план. Нека да видим няколко бързи съвета как да поддържаме нашия потребителски интерфейс по-четлив.
Повечето дизайни в нашите приложения се основават на съдържание, поставено хоризонтално или вертикално. Това означава, че няколко пъти ще използваме джаджи Column или Row.
Тъй като поставянето на приспособления точно под или едно до друго не винаги изглежда добре, искаме да имаме полета между тях. Един от най-очевидните начини за поставяне на марж между две приспособления е да увиете един от тях в приспособление Padding.
Помислете за следния пример:
Имаме три текстови джаджи в колона, които имат 8,0 полета между тях.
Проблемът: „Скрити джаджи“
Проблемът с използването на приспособления за подплата навсякъде е, че те започват да закриват "бизнес логиката" на нашия потребителски интерфейс код. Увеличете визуалния шум, като добавите нива на отстъп и брой редове.
Това, което искаме да направим, е да накараме основните джаджи да се открояват възможно най-много. Всяко допълнително ниво на отстъпа се брои. Ако можем да намалим броя на редовете едновременно, това също би било чудесно.
Решението: Използвайте SizedBoxes
За да се преборим с проблема със скритите приспособления, можем да заменим всички подложки с приспособления SizedBoxes, като използването на SizedBoxes вместо Paddings ни позволява да намалим нивото на отстъп и броя на редовете:
Тук приспособленията SizedBox изпълняват същата функция за разделяне на текста с марж от 8.0.
Същият подход може да се използва с приспособленията за редове, тъй като редовете подреждат своите приспособления за деца хоризонтално, можем да използваме свойството width на SizedBox за хоризонтални полета вместо за височина.
Крановете или крановете редовно са най-често срещаният начин за взаимодействие на потребителя с нашите приложения.
За да позволим на потребителя да „докосне“ някъде в нашето приложение, можем да използваме приспособление GestureDetector. за да го използвате, трябва да обгърнете оригиналната джаджа и да посочите обратното обаждане в свойството onTap в конструктора GestureDetector.
Помислете за следния пример, взет от приложението (Създадено от оригиналния писател) в приложението KKino:
Приложението inKino има мрежа от филмови плакати. когато потребителят докосне един от тях, той трябва да бъде отведен на страницата с подробности за филма.
Проблемът: Смесване на UI кода с Logic
Нашият метод за изграждане трябва да съдържа само минималния минимум, свързан с изграждането на потребителския интерфейс на нашето приложение. Логиката, съдържаща се в onTap, не е свързана с изграждането на потребителския интерфейс, това добавя ненужен шум към метода на изграждане.
В този случай можем бързо да определим, че Navigator.push въвежда нов маршрут и това е EventDetailsPage, така че докосването на елемент в мрежата отваря страницата с подробности. Ако обаче е включено повикването onTap, това може да изисква малко повече четене, за да се разбере методът на изграждане.
Решението: Извлечете логиката към частен метод
Този проблем може да бъде решен чрез извличане на повикването от onTap в добре наречен частен метод. В този случай създаваме метод, наречен _openEventDetails:
Това е по-добре.
Тъй като повикването onTap беше извлечено към добре именуван метод, не трябва да четем целия код. сега е лесно да разберете какво се случва, когато се извика повикването onTap, само като прочетете името на метода.
Сега намаляваме броя на редовете в нашия ценен метод за изграждане и се концентрираме само върху четенето на UI кода.