Flutter - Введение в виджеты

Как мы узнали в предыдущей главе, виджеты - это все во фреймворке Flutter. Мы уже узнали, как создавать новые виджеты в предыдущих главах.

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

Давайте проверим виджет MyHomePage приложения Hello World . Код для этой цели приведен ниже -

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

Здесь мы создали новый виджет, расширив StatelessWidget .

Обратите внимание, что StatelessWidget требует реализации только одной сборки метода в производном классе. Метод сборки получает контекстную среду, необходимую для создания виджетов, через параметр BuildContext и возвращает создаваемый виджет.

В коде мы использовали title как один из аргументов конструктора, а также использовали Key как другой аргумент. Название используется для отображения названия и ключ используется для идентификации виджета в среде сборки.

Здесь сборки метод вызывает сборки метод строительных лесов , который , в свою очередь , называют сборки метода AppBar и Центра , чтобы построить свой пользовательский интерфейс.

Наконец, метод сборки Center вызывает метод сборки Text .

Для лучшего понимания ниже приведено визуальное представление того же самого -

Визуализация сборки виджета

Во Flutter виджеты могут быть сгруппированы в несколько категорий в зависимости от их функций, как указано ниже:

Виджеты для конкретных платформ
Виджеты макета
Виджеты обслуживания состояния
Независимые от платформы / базовые виджеты

Обсудим теперь подробно каждую из них.

Виджеты для конкретных платформ

У Flutter есть виджеты, специфичные для конкретной платформы - Android или iOS.

Виджеты для Android разработаны в соответствии с рекомендациями по дизайну материалов для ОС Android. Виджеты, специфичные для Android, называются виджетами материалов .

Специфичные для iOS виджеты разработаны в соответствии с Руководством Apple по человеческому интерфейсу и называются виджетами Купертино .

Вот некоторые из наиболее часто используемых виджетов материалов:

Scaffold
AppBar
BottomNavigationBar
TabBar
TabBarView
ListTile
RaisedButton
FloatingActionButton
FlatButton
IconButton
DropdownButton
PopupMenuButton
ButtonBar
TextField
Checkbox
Radio
Switch
Slider
Выбор даты и времени
SimpleDialog
AlertDialog

Вот некоторые из наиболее часто используемых виджетов Купертино :

CupertinoButton
CupertinoPicker
CupertinoDatePicker
CupertinoTimerPicker
CupertinoNavigationBar
CupertinoTabBar
CupertinoTabScaffold
CupertinoTabView
CupertinoTextField
CupertinoDialog
CupertinoDialogAction
CupertinoFullscreenDialogTransition
CupertinoPageScaffold
CupertinoPageTransition
CupertinoActionSheet
CupertinoActivityIndicator
CupertinoAlertDialog
CupertinoPopupSurface
CupertinoSlider

Виджеты макета

Во Flutter виджет можно создать, составив один или несколько виджетов. Чтобы объединить несколько виджетов в один виджет, Flutter предоставляет большое количество виджетов с функцией компоновки. Например, дочерний виджет можно центрировать с помощью виджета « Центр» .

Вот некоторые из популярных виджетов макета:

Container- Прямоугольная рамка, украшенная виджетами BoxDecoration с фоном, рамкой и тенью.
Center - Центрируйте его дочерний виджет.
Row - Расположите его детей по горизонтали.
Column - Расположите его дочерние элементы в вертикальном направлении.
Stack - Расположите одно над другим.

Мы подробно проверим виджеты макета в следующей главе « Введение в виджеты макета» .

Виджеты обслуживания состояния

Во Flutter все виджеты являются производными от StatelessWidget или StatefulWidget .

Виджет, производный от StatelessWidget , не имеет никакой информации о состоянии, но может содержать виджет, производный от StatefulWidget . Динамический характер приложения обусловлен интерактивным поведением виджетов и изменением состояния во время взаимодействия. Например, нажатие кнопки счетчика увеличит / уменьшит внутреннее состояние счетчика на единицу, а реактивный характер виджета Flutter автоматически повторно отобразит виджет с использованием новой информации о состоянии.

Мы подробно изучим концепцию виджетов StatefulWidget в следующей главе «Управление состоянием» .

Независимые от платформы / базовые виджеты

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

Text

Текстовый виджет используется для отображения отрезка строки. Стиль строки может быть установлен с помощью свойства стиля и класса TextStyle . Пример кода для этой цели выглядит следующим образом:

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

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

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

Наиболее важные свойства текстового виджета следующие:

maxLines, int - Максимальное количество строк для отображения
overflow, TextOverFlow- Укажите, как обрабатывается визуальное переполнение с помощью класса TextOverFlow
style, TextStyle- Укажите стиль строки с помощью класса TextStyle
textAlign, TextAlign- Выравнивание текста по правому, левому краю , по ширине и т. Д. С использованием класса TextAlign
textDirection, TextDirection - Направление текста слева направо или справа налево.

Image

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

Image- Универсальный загрузчик изображений с использованием ImageProvider
Image.asset - Загрузить изображение из ресурсов проекта flutter
Image.file - Загрузить изображение из системной папки
Image.memory - Загрузить изображение из памяти
Image.Network - Загрузить изображение из сети

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

Создайте папку с активами в папке проекта и разместите необходимые изображения.
Укажите активы в pubspec.yaml, как показано ниже -

flutter: 
   assets: 
      - assets/smiley.png

Теперь загрузите и отобразите изображение в приложении.

Image.asset('assets/smiley.png')

Полный исходный код виджета MyHomePage приложения hello world и результат показаны ниже -.

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

Загруженное изображение показано ниже -

Наиболее важные свойства виджета Image следующие:

image, ImageProvider - Фактическое изображение для загрузки
width, double - Ширина изображения
height, double - Высота изображения
alignment, AlignmentGeometry - Как выровнять изображение в пределах его границ

Icon

Виджет « Значок» используется для отображения глифа из шрифта, описанного в классе IconData . Код для загрузки простого значка электронной почты выглядит следующим образом:

Icon(Icons.email)

Полный исходный код для его применения в приложении hello world выглядит следующим образом:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

Значок загружен, как показано ниже -