Введение и бой Flutter (1): Мое первое путешествие с приложением Flutter

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

Создайте проект на флаттере

Для создания нового проекта рекомендуется использовать метод командной строки (процесс использования IDE будет медленнее), команда выглядит следующим образом:

flutter create hello_world

Flutter создаст пример проекта по умолчанию, а затем использует команду для открытия проекта (команда кода является псевдонимом vscode, вам нужно настроить псевдоним в .zshrc:alias code='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code'

code hello_word

Структура каталогов проекта показана на следующем рисунке:Каждый каталог или файл описывается следующим образом:

Android: файлы, связанные с нативной конфигурацией проекта Android, включая значки приложений, собственные ресурсы, конфигурацию разрешений и т. д., вы можете обратиться к предыдущим статьям об упаковке и выпуске Android:Как Flutter публикует приложения для Android?
ios: файлы, связанные с собственной конфигурацией проекта iOS, те, кто знаком с разработкой iOS, знают конкретное использование, наиболее важный из них находится в Runner, настроен на собственную конфигурацию, такую как наиболее важный файл InfoPlist, и конфигурация, связанная с разрешениями, эти конфигурации рекомендуются в Конфигурация в Xcode более интуитивно понятна.
build: упаковка выходных файлов, в основном файлов упаковки Android, упаковка iOS должна быть завершена через Xcode.
lib: Самый важный каталог, весь исходный код находится в этом каталоге, где main.dart — это файл входа, а метод main — метод входа.
test: тестировать связанные файлы
Интернет: представленный во Flutter 2.0, он поддерживает унифицированные веб-файлы с тремя терминалами.
pubspec.yaml: этот файл очень важен. Все сторонние зависимости и зависимости файлов управляются через этот файл, подобно подфайлу Apple и файлу gradle в Android.

запустить приложение

Если вы хотите запустить его на эмуляторе Android, вам необходимо установить Android Studio и настроить эмулятор.Что касается отладки реального Android-устройства, то она аналогична разработке приложений для Android. То же самое касается Apple, необходимо установить Xcode и запустить симулятор. Отладка Apple на реальном устройстве относительно проблематична.Вам нужна учетная запись разработчика, и добавьте идентификатор реального устройства (уникальный идентификатор устройства) в устройство разработки соответствующего приложения.Это можно настроить с помощью поиска Baidu.

После завершения настройки выберите устройство или симулятор для запуска (текущее выбранное устройство будет отображаться в правом нижнем углу, если оно не выбрано, оно будет No Device, как показано на рисунке ниже), и запустите командную строку.flutter runВсе могут завершить компиляцию и войти в отладку кода.Приложения Flutter поддерживают горячую перезагрузку во время отладки (паб-зависимости нужно перекомпилировать, если они были изменены), поэтому старайтесь максимально использовать горячую перезагрузку, ведь один раз компилируется долго.

Конфигурация устройства разработки

Если вы хотите запустить эмулятор, требования к оборудованию для разработки все еще достаточно высоки.Рекомендуется использовать Mac Pro (память 16 ГБ) для разработки. Компьютеру с Windows также требуется не менее 16 ГБ памяти.После запуска симулятора «шепчущий» звук вентилятора заставляет людей чувствовать, что компьютер очень утомляет работу!

небольшая модификация

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

Чтобы использовать ресурсы изображения, нужно выполнить два шага: первый — создать папку изображения для хранения ресурсов изображения, второй — указать каталог зависимых ресурсов в файле pubspec. Создайте новую папку с изображениями для хранения файлов изображений и поместите файлы изображений (avatar.jpg и qrcode.jpg) в каталог изображений. Задайте свойство assets в файле pubspec.yaml:

	flutter:

		uses-material-design: true
		assets:
    	- images/avatar.jpg
    	- images/qrcode.jpg
    
    # 其他配置

Будьте внимательны, не поместите его не туда, в pubspec.yaml есть соответствующие комментарии. После завершения настройки необходимо запуститьflutter pub getкоманда для обновления зависимых ресурсов.

Основной код выглядит так:

class _MyHomePageState extends State<MyHomePage> {
  List _imageNames = [
    {'image': 'images/avatar.jpg', 'text': '岛上码农'},
    {'image': 'images/qrcode.jpg', 'text': '扫码关注'}
  ];
  int _index = 0;

  void _onSiwtch() {
    setState(() {
      _index = (++_index) % _imageNames.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          child: Column(
            children: [
              Container(
                width: 128,
                height: 128,
                margin: EdgeInsets.only(top: 10, bottom: 10),
                child: Image.asset(
                  _imageNames[_index]['image'],
                  fit: BoxFit.cover,
                ),
              ),
              Text(
                _imageNames[_index]['text'],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onSiwtch,
        tooltip: '切换',
        child: Icon(Icons.swap_horizontal_circle_outlined),
      ), 
    );
  }
}

Логика кода следующая: Класс _MyHomePageState — это компонент MyHomePage с состоянием. Компоненты Flutter аналогичны компонентам React. Они делятся на компоненты без состояния и с состоянием. Компоненты без состояния не могут обновлять данные. Компоненты с состоянием имеют свое собственное состояние данных, и интерфейс обновляется в соответствии с состоянием данных. .

Знак подчеркивания _ указывает, что класс, метод или переменная-член являются закрытыми и не могут быть доступны вне класса. Массив типа Map (List) _imageNames и нижний индекс элемента управления массивом переменных состояния _index определены в _MyHomePageState. При нажатии на кнопку переключения значение переменной состояния _index будет изменено через setState в методе _onSwitch, что приведет к автоматическому обновлению интерфейса.

Элементы и иерархия компонентов страницы следующие:

appBar: панель навигации
тело: основной интерфейс
- Центр: Центрировать компонент
  - Контейнер: Контейнер элемента страницы, аналогичный div в html, с помощью которого задаются размер и поля в интерфейсе.
    - Столбец: вертикальное расположение, то есть элементы располагаются вертикально один раз.
      - Контейнер изображения: используется для ограничения размера дисплея, полей и т. д. изображения.
        
        Изображение: отображение изображений с использованием локальных ресурсов.
      - Текст: Отображает текст под изображением
floatActionButton: плавающая кнопка

Вы можете видеть, что иерархия всей страницы очень похожа на HTML, на самом деле Dart изначально был разработан для замены Javascript, а сам Flutter имеет много концепций, имитируемых React. Из кода также видно, что существует много уровней вложенности интерфейса, на что многие жалуются, На самом деле, пока мы извлекаем компоненты, мы можем эффективно уменьшить уровень вложенности (интерфейс также написан на немного похож на JSX, но во Flutter много встроенных компоновочных компонентов, упрощающих разработку).

окончательный эффект

Нажмите кнопку переключения, изображение и текст изменятся соответствующим образом.