1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/CarGuo-GSYFlutterBook

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Flutter-Interact-2019.md 21 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 10.03.2025 00:06 5767d61

Вчера Google представила нам Flutter 1.12 на конференции Flutter Interact. Это большой стабильный выпуск после шести исправлений в версиях 1.9.x. В этом выпуске были решены 4,571 ошибки, объединено 1,905 pull requests, а также это пятый стабильный выпуск за год.

Основные ключевые слова, которые можно выделить из этого события: Platform, DartPad, Supernova, Adobe XD, Hot UI и Layout Explorer.

1. Больше платформ

На конференции Flutter Interact было заявлено, что цель — сделать разработчиков более сосредоточенными на создании красивых приложений, переходя от подхода "центрирование на устройстве" к подходу "центрирование на приложении". Flutter поможет разработчикам игнорировать различия между платформами, такими как Android, iOS, Web и PC. На следующей картинке показана демонстрация одновременного тестирования семи устройств.

Сейчас Flutter уже начал выполнять свое первоначальное обещание — поддержка Web была выпущена в Beta ветке, а поддержка MacOS доступна в Master ветке. Несмотря на то, что прогресс не слишком быстрый, для нас, бесплатных пользователей, видеть реальные достижения очень приятно.

Чтобы использовать Flutter Web и Flutter MacOS, вам нужно будет выполнить команды в командной строке для активации соответствующих конфигураций и затем выполнить flutter create xxxx для создания проекта, который поддерживает Web и MacOS (если у вас уже есть проект, вы можете выполнить flutter create для его завершения). Обратите внимание, что при отладке приложения для MacOS ваш локальный Flutter SDK должен находиться в ветке master; если вы хотите протестировать только Web функциональность, вы можете использовать ветку beta.

flutter config --enable-macos-desktop
flutter config --enable-web
```##### Поддержка других платформ
```markdown
flutter config --enable-linux-desktop
flutter config --enable-windows-desktop

После этого можно использовать команды run или build, чтобы запустить и скомпилировать приложение. Важно отметить, что платформы linux и windows ещё не были объединены в основной проект. Для тестирования этих платформ следует посетить страницу Desktop-shells и найти соответствующий проект: flutter-desktop-embedding.

# Запуск в режиме отладки
flutter run -d chrome
flutter run -d macOS

# Создание пакета
flutter build web 
flutter build macos

Два. Более мощные средства разработки

1. DartPad

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

Официальный сайт DartPad: dartpad.dev и китайская зеркальная версия: dartpad.cn.

2. Supernova

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

Обратите внимание, этот продукт не принадлежит команде Google Flutter, а представляет собой коммерческий проект другой компании.

Для использования Supernova, вы можете скачать Supernova Studio с сайта https://supernova.io. После регистрации аккаунта (возможно, потребуется доступ через прокси), вы сможете использовать программу и увидеть следующий интерфейс.

При импорте файла Sketch можно увидеть дизайн, созданный дизайнером. Нажав кнопку "</>", вы получите соответствующий Flutter-код справа, а слева — структуру дизайна. В данный момент код кажется простым и громоздким, и пока не имеет возможностей для взаимодействия.

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

Конечно, Supernova не является бесплатной общественной организацией. Поддержка Flutter предоставляется бесплатно, но для других проектов требуется оплата.

![](http://img.cdn.guoshuyu.cn/20191224_Flutter-Interact-2019/image8)Аналогичной функциональностью обладает AdobeXD, поскольку компания Adobe добавила поддержку Flutter в свою платформу Creative Cloud. Для этого достаточно установить одно расширение, которое позволяет пользователям экспортировать проекты из AdobeXD в Flutter. В настоящее время эта возможность находится на этапе предварительного доступа.

3. Живой интерфейс

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

Похожие инструкции можно найти в официальной документации живого интерфейса: Эта функция находится на экспериментальном этапе. Чтобы активировать её, перейдите в настройках -> Языки и фреймворки -> Flutter, затем отметьте галочкой "Enable Hot UI" в разделе "Experiments".

На текущий момент функция живого интерфейса находится на стадии экспериментального использования. Активация возможна через настройки Android Studio, как показано ниже.

Однако, после активации вы можете заметить, что реальное поведение отличается от заявленного? Это связано с тем, что функция предварительного просмотра Screen mirror пока находится в стадии разработки и будет доступна позже.

На данный момент Hot UI работает таким образом, как показано на следующем GIF, позволяя пользователям динамически тестировать и конфигурировать свойства компонентов. Разработчики ожидают завершения работы над этой функцией.

4. Инструмент исследования макета

Инструмент исследования макета представляет собой экспериментальный режим отладки макетов, который помогает разработчикам более наглядно адаптироваться к экранам и решать проблемы, такие как переполнение (overflowed) контента.

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

Запуск Инструмента исследования макета также требует, чтобы Flutter SDK находился в ветке master. После запуска программы нажмите DevTools, чтобы открыть её в Chrome, затем нажмите кнопку справа, чтобы войти в режим отладки Flutter.

Как показано на следующем GIF, когда выбранный компонент поддерживает Flex, вы видите панель Layout Explorer, где можно динамически изменять логику отображения и расположение компонента.

Например, если компонент имеет состояние overflowed, вы можете легко увидеть причину проблемы и скорректировать её.

Кроме того, вы можете динамически изменять параметры flex и другие данные компонента в Layout Explorer, а изменения будут сразу видны.

3. Улучшения Flutter SDK

Обновление Flutter SDK в этом выпуске решило 4 571 ошибку, объединив 1 905 pull requests, а также добавило множество новых возможностей.

  • Во-первых, рекомендация Flutter 1.12 заключается в миграции проектов Android на AndroidX, сокращении размера SDK и добавлением поддержки шрифтов из google_fonts.

  • Улучшение плагинов Android API плагинов Android, которое делает работу более простой и понятной, разделением FlutterPlugin и MethodCallHandler, а также предоставлением поддержки через ActivityAware и ServiceAware.

  • Поддержка темы iOS 13 Dark Mode, возможность использования darkTheme, а также добавление таких компонентов iOS стиля как CupertinoContextMenu, CupertinoSlidingSegmentedControl, CupertinoAlertDialog, CupertinoDatePicker.

new MaterialApp(
    title: '',
    navigatorKey: navigatorKey,
    theme: model.themeData,
    darkTheme: model.darkthemeData,
    locale: model.locale,
)
```- Дальнейшие улучшения режима [Add-to-App](https://flutter.dev/docs/development/add-to-app) гибридной интеграции. - Внесены обратные совместимости изменения `breaking changes`, такие как: [Активация RenderSliverFillViewport в PageView](https://github.com/flutter/flutter/pull/37024), [Замена attachRootWidget на scheduleAttachRootWidget в WidgetsBinding](https://github.com/flutter/flutter/pull/39079/files), [Решение проблем пропусков в начальном маршруте](https://github.com/flutter/flutter/pull/39440/files), [Увеличение минимальной высоты TextField с 40 до 48](https://github.com/flutter/flutter/pull/42449) и другие изменения, требующие внимания разработчиков для повторной адаптации. Дополнительную информацию можно найти в [release-notes-1.12.13](https://flutter.dev/docs/development/tools/sdk/release-notes/release-notes-1.12.13). - Добавлена поддержка системных жестов навигации в MediaQuery.systemGestureInsets для Android Q ([PR #37416](https://github.com/flutter/flutter/pull/37416)); добавлены компоненты SliverIgnorePointer, SliverOpacity, SliverAnimatedList и т.д.; добавлена поддержка fullscreenDialog в PageRouteBuilder.- [Релиз Dart 2.7 с поддержкой расширенных методов](https://medium.com/dartlang/dart-2-7-a3710ec54e97).

```dart
extension ExtendsFun on String {
  int parseInt() {
    return int.parse(this);
  }

  double parseDouble() {
    return double.parse(this);
  }
}

main() {
  int i = '42'.parseInt();
  print(i);
}

Полные release notes доступны по адресу release-notes-1.12.13

Четвертое

На конференции Flutter Interact были рекомендованы следующие красивые открытые проекты: flutter-d-art и gskinner. В то же время Flutter объявил, что будет работать над улучшением модели разработки кода в будущем. Несмотря на постоянное открытие новых возможностей, Flutter также сталкивается с необходимостью решения возникающих проблем.

Изображение 19

Изображение 20

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

Однако, поскольку это открытый проект, важно помнить, что "белое пиратство" должно сочетаться со самостоятельностью. После исследования было выявлено, что проблема заключается в том, что изображения не могут быть успешно загружены в пользовательском ImageProvider. Для решения этой проблемы можно очистить PendingImage из ImageCache. Кроме того, из-за различий между декорациями DecorationImage и Image, требуется дополнительная обработка didUpdateWidget для Image.Разговор о данной проблеме направлен на демонстрацию значения открытых проектов. Использование одного фреймворка не должно ограничиваться лишь использованием его возможностей. Цель открытости — это общение. Никакой фреймворк не может быть совершенным, поэтому мы можем использовать более открытый подход к попыткам и "критике". А наша работа состоит именно в решении этих проблем.

Ссылки на статьи о Flutter:

Комплексный учебник по Flutter

Специальные статьи о мире Flutter

Рекомендованные ресурсы

image

Опубликовать ( 0 )

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

1
https://api.gitlife.ru/oschina-mirror/CarGuo-GSYFlutterBook.git
git@api.gitlife.ru:oschina-mirror/CarGuo-GSYFlutterBook.git
oschina-mirror
CarGuo-GSYFlutterBook
CarGuo-GSYFlutterBook
master