Разбиване на оформления в редове и колони в Flutter

Ако сте чели за Flutter дори в продължение на 5 минути, сигурно сте се натъкнали на джаджи. И най-популярният факт „В Flutter почти всичко е джаджа“.

Да, всичко.

Определям Widgets като компоненти или блокове, които определят потребителския интерфейс. AppBar е джаджа, текстът върху него е джаджа, стилът, който прилагате към текста, е джаджа, дори подравняването на текста може да бъде наречено като джаджа. В Flutter всичко, което е изглед или допринася за свойство на изгледа, е джаджа.

Мога да продължа и за джунджурии, но за да опростя, ето препоръчителен списък от джунджурии, които трябва да знаете, за да създадете приложение във Flutter. За бърза справка вижте по-долу.

Фокусиране върху редове и колони

В Flutter можете да разбиете почти 90% от дизайна на оформлението в редове и колони. Понякога ще трябва да използвате други джунджурии като Stack, Grid и т.н., но от базовото ниво ще изисквате редове и колони в някой UI блок или другия.

Така редовете и колоните са ...

Когато има елементи, разположени един до друг или хоризонтално наляво / надясно на друг елемент, ви трябват редове.

Когато има елементи, разположени един след друг или вертикално отгоре / отдолу към друг елемент, се нуждаете от колони.

Доста основни, нали?

За целите на тази статия трябва да знаете и следното:
Контейнери: Ако идвате от фон за уеб разработка или имате някакви основни познания по HTML, контейнерите ще звучат доста познато на divs.
Стекове: Ако има изгледи, припокриващи се с други изгледи, използвайте стекове.

Нека създадем потребителски интерфейс

Време е да се потопите в кода и да изградите няколко доста популярни компоненти на оформлението и да видите как редовете и колоните се вписват тук. За първия дизайн ще репликираме елемента от списъка на екрана за чатове WhatsApp. Нещо подобно на изображението по-долу.

Разбивка на оформлението №1

И така, колко елементи или изгледи виждаме? Снимка на профила. Потребителско име. Последно съобщение на потребителя Време на последното съобщение. И брой непрочетени съобщения.

Нека увиваме всичко това в контейнер и има три детски секции: leftSection, middleSection и rightSection, една след друга хоризонтално.

leftSection ще съдържа снимката на профила.
middleSection ще има lastMessage под userName.
rightSection ще има undeadMessageCount под timeStamp.

Добре. Беше ли трудно?
Може би в началото, но след като получите закачането на редове и колони, можете естествено да разбиете оформления в главата си.

Време за кодиране

За разлика от повечето други уроци за начинаещи нива, винаги ще се опитвам да разбивам кода си на различни класове и джаджи. Това прави кода супер четим.

main.dart

void main () => runApp (нов MyApp ());

клас MyApp разширява StatelessWidget {
  // Тази джаджа е коренът на вашето приложение.
  @override
  Изграждане на приспособления (контекст на BuildContext) {
    върнете MaterialApp (
      начало: нов ChatItemScreen (), // извикване на chat_screen_item.dart
    );
  }
}

Съвет за начинаещи: Не забравяйте да импортирате класовете, които ще използвате. Така например, main.dart ще импортира chat_screen_item.dart, който има нашия клас ChatItemScreen.

chat_item_screen.dart

клас ChatItemScreen удължава StatelessWidget {
  @override
  Изграждане на приспособления (контекст на BuildContext) {
    върнете ново скеле (
      appBar: нов AppBar (
        заглавие: нов текст („елемент от чата“),
        backgroundColor: Colors.lightGreen,
      ),
      body: нов ChatItem (), // извикване на chat_item.dart
    );
  }
}

Това беше само за да започнете, за да не се препъвате в основните си стъпки. Сега преминаваме към основния код. Нашият клас ChatItem ще върне приспособление Container, което има дете на Row. Това редово дете ще има три нови деца leftSection, middleSection и rightSection джаджи, които ще изградим скоро.

chat_item.dart

клас ChatItem разширява StatelessWidget {

  окончателен leftSection = нов контейнер ();
  final middleSection = нов контейнер ();
  final rightSection = нов контейнер ();

  @override
  Изграждане на приспособления (контекст на BuildContext) {
    върнете ново скеле (
    тяло: нов контейнер (
      дете: нов ред (
        деца: <Джаджа> [
          leftSection,
          middleSection,
          rightSection
        ],
      ),
    ),
  );

  }

}

Ляв участък

В лявата част се нуждаем от CircleAvatar и имаме и хубава малка джаджа за това.

окончателен leftSection = нов контейнер (
  дете: нов CircleAvatar (
    backgroundImage: нов NetworkImage (URL),
    backgroundColor: Colors.lightGreen,
    радиус: 24.0,
  ),
);

Среден раздел

Сега вътре в контейнера middleSection създаваме колона от два текстови джаджа, които ще съдържат съдържанието на потребителското име и lastMessage.

final middleSection = нов контейнер (
  дете: нова колона (
    деца: <Джаджа> [
      нов текст („Име“),
      нов текст ("Здравейте какво имам?"),
    ],
  ),
);

Това върши работата по поставянето на джаджи една след друга, но изглежда наистина грозно. Време е да добавите малко разкрасяване.

final middleSection = ново разширено (
  дете: нов контейнер (
    подплънки: нов EdgeInsets.only (отляво: 8.0),
    дете: нова колона (
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      деца: <Джаджа> [
        нов текст („Име“,
          стил: нов TextStyle (
              цвят: цветове
              fontWeight: FontWeight.w600,
              fontSize: 16.0,
          )),
        нов текст ("Здравей какво?", стил:
          нов TextStyle (цвят: Colors.grey),),
      ],
    ),
  ),
);
  • Разширен: Тъй като този раздел иска цялото свободно пространство, което обхващаме, ние увиваме целия контейнер в тази разширена джаджа. Без това оформлението ще изглежда така -
  • Подплънка: Повече място за дишане, уау.
  • TextStyle: Придава стилизиране на текста, като цветове, размер на шрифта и т.н. Толкова като CSS, по дяволите.
  • Сега мога да обясня crossAxisAlignment и mainAxisAlignment, но не мога да го обясня по-добре от този видеоклип. Затова бих ви предложил да се учите от най-добрите. (Проверете от 2:00 до 7:30, за да получите само кратка справка по темата, в която се намираме)

Десен раздел

Почти сме готови. Просто трябва да се изгради още една колона от две джаджи. Този път джаджите за деца ще бъдат Textwidget за времева марка и още един малък CircleAvatar за броя.

final rightSection = нов контейнер (
  дете: нова колона (
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    деца: <Джаджа> [
      нов текст („9:50“,
          стил: нов TextStyle (
            цвят: Colors.lightGreen,
          fontSize: 12.0),),
      нов CircleAvatar (
        backgroundColor: Colors.lightGreen,
        радиус: 10.0,
        дете: нов текст ("2",
        стил: нов TextStyle (цвят: Colors.white,
        fontSize: 12.0),),
      )
    ],
  ),
);

Сега пуснете това красиво нещо. И е готово

Ще разделим ли друго оформление, само за да сме сигурни, че ще го закачите?

Разбивка на оформлението №2

Карта за колекции Zomato

Така че имаме тази проста подредба на картата, която има колона от няколко текстови джаджа, припокриващи се с фоново изображение. Хм .. казахте ли припокриване? Значи това означава ли, че тук използваме Stacks?

ДА, получавате го.

Така че вместо ляв, среден или десен раздел, нека разбием това оформление на backgroundImage и onTopContent.

@override
Изграждане на приспособления (контекст на BuildContext) {

  върнете нов контейнер (
    подплънки: нов EdgeInsets.all (8.0),
    височина: 250.0,
    дете: нов стек (
      деца: <Джаджа> [
        backgroundImage,
        onTopContent
      ],
    ),
  );
}

Фоново изображение

Сега фоновото изображение просто ще съдържа контейнер с фоново изображение и цветен филтър, за да потъмнее фона.

final backgroundImage = нов контейнер (
    декорация: нов BoxDecoration (
      изображение: нов DecorationImage (
        colorFilter: нов ColorFilter.mode (
            Colors.black.withOpacity (0.6),
            BlendMode.luminosity)
        изображение: нов NetworkImage (URL),
        подходящ: BoxFit.cover,
      ),
    ),
);

Върху съдържание

Какво мислиш? Редове или колони?

Имаш го. Coluuuumns.

окончателен onTopContent = нов контейнер (
  височина: 80.0,
  дете: нова колона (mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.start,
    деца: <Джаджа> [
      нов текст („Тенденция тази седмица“,
      стил: bigHeaderTextStyle),
      нов текст („Най-популярните ресторанти в града тази седмица“,
        стил: descTextStyle),
      нов контейнер (
        височина: 2.0,
        ширина: 150.0,
        цвят: Colors.redAccent,
      ),
      нов текст („30 МЕСТА“,
        стил: footerTextStyle),
      // нов контейнер ()
    ],
  ),
);

Сега не се изненадвайте от стиловете, които съм използвал. Това не са по подразбиране Flutter, знам, че имате грешки. Всички стилове за zomato карта са дефинирани тук.

Можете дори да намерите цялото хранилище на GitHub за тези оформления тук.

В бъдеще ще проуча по-сложни оформления, които можете да пробиете до кореновото ниво. Разбира се, ще ви трябват повече джаджи за по-сложни оформления, но редовете и колоните винаги ще имат роля в него някъде, така че е важно да получите това в главата си.

Прочетете и другите ми статии за Flutter

Flutter е свеж и в момента го откривам сам. Ако откриете нещо нередно с моя код или подход, не го споменавайте в коментарите, бих искал да подобря.
Ако сте научили дори нещо или две, ръкопляскайте колкото пъти е възможно, за да покажете подкрепата си!
Здравей Свят, аз съм Pooja Bhaumik. Креативен разработчик и логичен дизайнер. Можете ли да ме намерите на Linkedin или да ме дебнете в GitHub или да ме последвате в Twitter? Ако това е твърде социално за вас, просто пуснете имейл на pbhaumik26@gmail.com, ако искате да говорите с мен.