Серия Flutter: основные виджеты и макет

Полная серия Flutter - это серия статей, посвященных разработке кроссплатформенных приложений на платформе Flutter для всех, от новичков до опытных мобильных разработчиков.

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

Примечание. Весь код для макета добавляется в метод «build» на странице вашего приложения.

Макеты во Flutter

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

new Center(
  child: new Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      new Text(
        'You have pushed the button this many times:',
      ),
      new Text(
        '$_counter',
        style: Theme.of(context).textTheme.display1,
      ),
    ],
  ),
),

В этом примере есть три виджета: Центр, Столбец и Текст.

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

У виджета обычно есть свойства для изменения выравнивания, стилей и атрибутов.

Давайте теперь погрузимся в отдельные виджеты и посмотрим, что они делают.

Мы разделим виджеты на две приблизительные категории:

1. Виджеты видимых элементов
2. Виджеты структурирования и выравнивания

Виджеты видимых элементов

Это несколько часто используемых виджетов.

1. Текст

Виджет «Текст» просто содержит текст.

new Text(   
'Hello, World!',   
textAlign: TextAlign.center,     
style: new TextStyle(fontWeight: FontWeight.bold), 
)

Текст можно выровнять с помощью свойства textAlign. Свойство стиля позволяет настраивать текст, включая шрифт, размер шрифта, толщину шрифта, цвет, межбуквенный интервал и многое другое.

2. Кнопка

Виджет «Кнопка» позволяет пользователю выполнять некоторые действия при нажатии. У Flutter нет прямого виджета «Кнопка», вместо этого у него есть такие типы кнопок, как FlatButton и RaisedButton.

new FlatButton(
  child: Text("Click here"),
  onPressed: () {
    // Do something here
  },
),

Свойство onPressed позволяет выполнять некоторые действия при нажатии кнопки.

new RaisedButton(
  child: Text("Click here"),
  elevation: 5.0,
  onPressed: () {
    // Do something here
  },
),

Изменение высоты RaisedButton влияет на то, насколько он выделяется.

3. Изображение

Виджет Image содержит изображение и может получать его из нескольких источников, таких как ресурсы, или даже напрямую из URL-адреса. В обычном родном Android для этого потребовалась бы дополнительная библиотека, такая как Picasso.

4. Значок

Виджет значка - это контейнер для значка во Flutter.

new Icon(
  Icons.add,
  size: 36.0,
)

Он также содержит атрибут размера для увеличения значка.

Виджеты структурирования и выравнивания

1. Столбец

Столбец - это виджет, который упорядочивает все свои дочерние виджеты в вертикальном стеке. Он может размещать виджеты в соответствии со свойством mainAxisAlignment и crossAxisAlignment. Здесь «главная ось» - это вертикальная ось, а «поперечная ось» - это горизонтальная ось.

Давайте построим столбец из 3 текстовых виджетов.

new Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    new Text(
      "Element 1",
    ),
    new Text(
      "Element 2"
    ),
    new Text(
      "Element 3"
    ),
  ],
),

В столбце есть 3 текстовых виджета, а для параметра mainAxisAlignment установлено значение «center».

Вот как это выглядит:

Поскольку mainAxisAlignment находится в центре, он центрирует все виджеты. Давай попробуем что-нибудь еще. Давайте установим mainAxisAlignment в spaceBetween.

Теперь они слишком далеко друг от друга, давайте попробуем spaceEvenly.

Чтобы разместить его между левой и правой сторонами экрана, вы должны использовать crossAxisAlignment.

2. Ряд

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    new Text(
      "Element 1",
    ),
    new Text(
      "Element 2"
    ),
    new Text(
      "Element 3"
    ),
  ],
),

Строка аналогична столбцу, но создает горизонтальную строку виджетов, а не столбец. Основное отличие здесь в том, что главная ось - это горизонтальная ось, а не вертикальная. Поперечная ось - это вертикальная ось.

3. Центр

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

Center(
  child: new Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      new Text(
        "Element 1",
      ),
      new Text(
        "Element 2"
      ),
      new Text(
        "Element 3"
      ),
    ],
  ),
),

Центральный виджет просто берет дочерний элемент и центрирует его в доступном пространстве, в котором он находится.

4. Прокладка

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

Это дает текстовому виджету отступ 8.0 во всех направлениях.

Padding(
  padding: const EdgeInsets.all(8.0),
  child: new Text(
    "Element 1",
  ),
),

Допускается также заполнение в определенных направлениях.

Padding(
  padding: EdgeInsets.fromLTRB(8.0, 0.0, 0.0, 0.0),
  child: new Text(
    "Element 1",
  ),
),

5. Строительные леса

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

new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: Center(
  ),
  floatingActionButton: FloatingActionButton(
      child:Icon(Icons.add),
      onPressed: () {
      }
  ),
)

6. Стек

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

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

Чтобы увидеть полный список виджетов Flutter, посетите эту ссылку.