Разбивка макетов в строках и столбцах в флаттер

Если вы читали о Флаттере хотя бы в течение 5 минут, значит, вы наткнулись на виджеты. И самый популярный факт: «Во Флаттере почти все - это виджеты».

Да все.

Я определяю виджеты как компоненты или блоки, которые определяют пользовательский интерфейс. AppBar - это виджет, текст на нем - это виджет, стиль, который вы применяете к тексту - это виджет, даже выравнивание текста можно назвать виджетом. Во Flutter все, что является представлением или вносит вклад в свойство представления, является виджетом.

Я могу продолжать и дальше о виджетах, но для упрощения, вот рекомендуемый список виджетов, которые вы должны знать, чтобы создать приложение во Flutter. Для быстрого ознакомления см. Ниже.

Сосредоточение внимания на строки и столбцы

В Flutter вы можете разбить почти 90% макетов на строки и столбцы. Иногда вам придется использовать другие виджеты, такие как Stack, Grid и т. Д., Но на базовом уровне вам потребуются строки и столбцы в каком-либо блоке пользовательского интерфейса или в другом.

Итак, строки и столбцы ...

Когда есть элементы, расположенные рядом или горизонтально слева или справа от другого элемента, вам нужны строки.

Когда есть элементы, размещенные один за другим или вертикально сверху / снизу к другому элементу, вам нужны столбцы.

Довольно простой, правда?

Для целей этой статьи вы также должны знать следующее:
Контейнеры. Если вы работаете в сфере веб-разработки или имеете базовые знания HTML, контейнеры покажутся вам знакомыми.
Стеки: Если есть виды, перекрывающие другие виды, используйте Стеки.

Давайте создадим некоторый интерфейс

Пришло время погрузиться в код и создать пару довольно популярных компонентов макета и посмотреть, как в них вписываются строки и столбцы. Для первого дизайна мы будем реплицировать элемент списка WhatsApp Chats Screen. Нечто похожее на изображение ниже.

Раскладка №1

Так сколько элементов или представлений мы видим? Изображение профиля. Имя пользователя. Последнее сообщение пользователя. Время последнего сообщения. И количество непрочитанных сообщений.

Позволяет обернуть все это внутри контейнера и иметь три дочерних раздела: leftSection, middleSection и rightSection, один за другим по горизонтали.

leftSection будет содержать изображение профиля.
middleSection будет иметь последнее сообщение ниже userName.
Параметр rightSection будет иметь значение unreadMessageCount ниже отметки времени.

Хорошо. Это было сложно?
Может быть, в начале, но как только вы освоите ряды и столбцы, вы, естественно, сможете разбить макеты в своей голове.

Время кодировать

В отличие от большинства других учебных пособий для начинающих, я всегда буду пытаться разбить свой код на различные классы и виджеты. Это делает код супер читабельным.

main.dart

void main () => runApp (new MyApp ());

класс MyApp расширяет StatelessWidget {
  // Этот виджет является корнем вашего приложения.
  @Override
  Сборка виджета (контекст BuildContext) {
    return MaterialApp (
      home: новый ChatItemScreen (), // вызывающий chat_screen_item.dart
    );
  }
}

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

chat_item_screen.dart

класс ChatItemScreen расширяет StatelessWidget {
  @Override
  Сборка виджета (контекст BuildContext) {
    вернуть новый эшафот (
      appBar: новый AppBar (
        title: new Text («Элемент чата»),
        backgroundColor: Colors.lightGreen,
      ),
      тело: новый ChatItem (), // вызывающий chat_item.dart
    );
  }
}

Это было только для того, чтобы начать, чтобы вы не натыкались на свои основные начальные шаги. Теперь перейдем к основному коду. Наш класс ChatItem вернет виджет Container, у которого есть дочерний элемент Row. У этого дочернего элемента Row появятся три новых дочерних виджета leftSection, middleSection и rightSection, которые мы вскоре создадим.

chat_item.dart

класс ChatItem расширяет StatelessWidget {

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

  @Override
  Сборка виджета (контекст BuildContext) {
    вернуть новый эшафот (
    Кузов: новый Контейнер (
      ребенок: новая строка (
        дети: <виджет> [
          LeftSection,
          middleSection,
          RightSection
        ],
      ),
    ),
  );

  }

}

Левая секция

В левом разделе нам нужен CircleAvatar, и у нас также есть хороший маленький виджет для этого.

final leftSection = новый контейнер (
  ребенок: новый круг аватар (
    backgroundImage: новый NetworkImage (URL),
    backgroundColor: Colors.lightGreen,
    радиус: 24,0,
  ),
);

Средняя секция

Теперь внутри middleSection Container мы создаем столбец из двух текстовых виджетов, который будет содержать содержимое userName и lastMessage.

окончательный middleSection = новый контейнер (
  ребенок: новая колонка (
    дети: <виджет> [
      новый текст («Имя»),
      новый текст («Привет, как дела?»),
    ],
  ),
);

Это делает работу размещения виджетов один за другим, но выглядит действительно некрасиво. Пришло время добавить украшения.

окончательный middleSection = новый расширенный (
  ребенок: новый контейнер (
    padding: new EdgeInsets.only (слева: 8.0),
    ребенок: новая колонка (
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      дети: <виджет> [
        новый текст («Имя»,
          стиль: новый TextStyle (
              цвет: Colors.black,
              fontWeight: FontWeight.w600,
              fontSize: 16,0,
          ),),
        новый текст ("Привет, что?", стиль:
          новый TextStyle (color: Colors.grey),),
      ],
    ),
  ),
);
  • Расширенный: Поскольку в этом разделе требуется все доступное свободное пространство, мы оборачиваем весь контейнер в этот расширенный виджет. Без этого макет будет выглядеть так -
  • Padding: Больше места для дыхания, вау.
  • TextStyle: дает стиль текста, например, цвета, fontSize и т. Д. Так же, как 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

Итак, у нас есть этот простой макет карты, который имеет столбец из нескольких текстовых виджетов, перекрывающих фоновое изображение. Хм .. ты сказал, перекрытие? Значит ли это, что мы используем стеки здесь?

Да, вы получаете это.

Поэтому вместо левой, средней или правой секции давайте разберем этот макет на backgroundImage и onTopContent.

@Override
Сборка виджета (контекст BuildContext) {

  вернуть новый контейнер (
    padding: новый EdgeInsets.all (8.0),
    высота: 250,0,
    ребенок: новый стек (
      дети: <виджет> [
        фоновая картинка,
        onTopContent
      ],
    ),
  );
}

Фоновая картинка

Теперь фоновое изображение будет просто иметь контейнер с фоновым изображением и цветной фильтр для затемнения фона.

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

На верхнем содержании

Как вы думаете? Ряды или столбцы?

Ты понял. Coluuuumns.

final onTopContent = новый контейнер (
  высота: 80,0,
  дочерний элемент: новый столбец (mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.start,
    дети: <виджет> [
      новый текст («Тенденции на этой неделе»,
      style: bigHeaderTextStyle),
      новый текст («Самые популярные рестораны в городе на этой неделе»,
        стиль: descTextStyle),
      новый контейнер (
        высота: 2,0,
        ширина: 150,0,
        цвет: Colors.redAccent,
      ),
      новый текст ("30 МЕСТ",
        style: footerTextStyle),
      // новый контейнер ()
    ],
  ),
);

Теперь не удивляйтесь стилям, которые я использовал. Это не значения по умолчанию Flutter, я знаю, у вас есть ошибки. Все стили для карты zomato определены здесь.

Вы даже можете найти весь репозиторий GitHub для этих макетов здесь.

В будущем я буду исследовать более сложные макеты, которые можно разбить на корневой уровень. Конечно, вам понадобится больше виджетов для более сложных макетов, но строки и столбцы всегда будут играть какую-то роль, поэтому важно, чтобы вы это понимали.

Читайте мои другие статьи на флаттер

Флаттер свеж, и я сейчас открываю для себя. Если вы обнаружите что-то не так с моим кодом или подходом, упомяните об этом в комментариях, я бы хотел улучшить.
Если вы узнали хотя бы одну вещь или две, хлопайте в ладоши столько раз, сколько вы можете, чтобы показать свою поддержку!
Привет мир, я Пуджа Bhaumik. Креативный разработчик и логичный дизайнер. Вы можете найти меня на Linkedin или выследить меня на GitHub или подписаться на меня в Twitter? Если это слишком для вас, просто напишите письмо на pbhaumik26@gmail.com, если вы хотите поговорить со мной о технологиях.