Управляемое чтение: Flutter — это набор инструментов Google с открытым исходным кодом для создания пользовательского интерфейса (UI), помогающий разработчикам эффективно создавать мультиплатформенные приложения с помощью набора кодовых баз, поддерживающих мобильные, веб-, настольные и встроенные платформы. Flutter использует Dart в качестве языка разработки и использует движок рисования Skia для рисования напрямую через ЦП и ГП, не полагаясь на какие-либо собственные элементы управления, и имеет более высокую производительность, чем React Native (который использует посреднический движок JCore).
Полный текст 3560 слов, а время чтения 14 минут.
В настоящее время технология фрезерный гибридный стек созревает, а инфраструктура идеальна. Baidu Tieba, сетевой диск, карта, чтение, метод ввода и т. Д. Все были подключены к флатте, а набор кода выполняется на обоих концах, сохраняя 50% рабочей силы.
1. Конфигурация среды:
1.1 Скачать Flutter SDK
git clone https://github.com/flutter/flutter.git
1.2 Настройка переменных среды
Отредактируйте ~/.bash_profile и добавьте переменные среды в конец. (Если на терминале установлен плагин zsh, добавьте переменные окружения в ~/.zshrc)
# FLUTTER_HOME为下载的Flutter文件夹路径
export FLUTTER_HOME=/Users/.../flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
1.3 Обновить переменные среды
source ~/.bash_profile
source ~/.zshrc（如安装zsh插件）
1.4 Инструменты разработки
1. Xcode + Android Studio (рекомендуется)
2. Visual Studio Code
Возьмем в качестве примера Xcode + Android Studio, настроим плагин Android Studio:
1.4.1 Установите плагин Flutter, Dart
Android Studio - Preferences - Plugins - Marketplace
1.4.2 Установите последнюю версию команды Android SDK
Android Studio - Настройки - Системные настройки - Android SDK - Инструменты SDK - Проверить инструменты командной строки Android SDK
1.4.3 Запуск доктора флаттера
*Ошибка: невозможно найти связанную версию Java на Flutter.
cd /Applications/Android\ Studio.app/Contents/jre
ln -s ../jre jdk
ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk
flutter doctor
2. Создание проекта
2.1 Создайте проект Flutter
flutter create xxx
2.2 Создайте модуль Flutter (для встроенной интеграции Flutter)
create --template module xxx
2.3 Инженерная конструкция
bd_flutter
.dart_tool.............记录依赖库信息
.idea..................当前项目配置
android................Android工程目录
iOS....................iOS工程目录
lib....................Flutter代码目录
test...................单元测试目录
web....................Web工程目录
pubspec.yaml...........Pub第三方依赖配置文件，类似Cocoapods、Gradle
3. Парадигма программирования
Компоновка интерфейса во Flutter использует парадигму декларативного программирования языка Dart, которую легче разрабатывать и читать.
3.1 Императивное программирование
Команда "Машина" Как делать вещи (обратите внимание на то, как).
3.2 Декларативное программирование
Скажите «машине», чего вы хотите (сконцентрируйтесь на чем).
С 2009 года Vue, React, SwiftUI и Flutter в основном основаны на декларативном программировании и постепенно становятся тенденцией программирования в большом интерфейсе.
3.3 Давайте дадим каштан, чтобы помочь мне понять разницу между ними
3.3.1 Нажмите кнопку, чтобы изменить текст (ОС, версия Java)
3.3.2 Нажмите кнопку, чтобы изменить текст (версия Flutter, SwiftUI)
В декларативном программировании, во-первых, код структурирован, во-вторых, разработчику не нужно обращать внимание на обновление элемента управления Label/Text, движок автоматически изменит значение элемента управления, на который ссылаются, в соответствии с изменением значения num.
4. Инфраструктура
Flutter спроектирован как расширяемая многоуровневая система. Его можно рассматривать как набор независимых компонентов, каждый из которых зависит от компонентов более низкого уровня. Компоненты не могут переопределять содержимое более низкого уровня, а части уровня инфраструктуры являются необязательными и заменяемыми. Он разделен на три слоя снизу вверх, за которыми следуют: Embedder, Engine, Framework.
4.1 Embedder
Embedder — это слой адаптации операционной системы, реализующий параметры рендеринга Surface, параметры потоков и т. д.
4.2 Engine
Слой Engine — это ядро Flutter, он в основном написан на C++ и предоставляет примитивы, необходимые приложениям Flutter. Когда необходимо отрисовать содержимое нового кадра, движок позаботится о растеризации сцены, которую необходимо скомпоновать. Он обеспечивает низкоуровневую реализацию основного API Flutter, включая графику (ссылка через Skia:skia.org/), макет текста, документация и веб-сайт…IO, поддержка специальных возможностей, архитектура плагинов и цепочки инструментов для среды выполнения и сборки Dart.
4.3 Framework
Уровень Framework — это SDK пользовательского интерфейса, реализованный в Dart, который включает в себя такие функции, как анимация, рисование графики и распознавание жестов. Разработчики могут взаимодействовать с Flutter через слой инфраструктуры Flutter, который предоставляет современную реактивную среду, написанную на Dart. Он включает в себя богатый набор платформ, макетов и базовых библиотек, состоящих из ряда слоев. Снизу вверх расположены:
1. Базовые классы Foundation и некоторые сервисы стандартных блоков над базовым уровнем, такие как анимация, рисование и жесты, могут предоставлять абстракции, обычно используемые на верхнем уровне.
2. Уровень рендеринга используется для обеспечения абстракции макета операции. С помощью слоев рендеринга вы можете построить дерево визуализируемых объектов. Когда вы динамически обновляете эти объекты, дерево рендеринга также автоматически обновляет макет на основе ваших изменений.
3. Слой виджетов представляет собой составную абстракцию. Каждый объект рендеринга в слое рендеринга имеет соответствующий класс в слое виджетов. Кроме того, слой виджетов позволяет свободно комбинировать различные классы, необходимые для повторного использования. Именно на этом уровне вводится модель реактивного программирования.
4. Библиотеки Material и Cupertino предоставляют исчерпывающий набор примитивов на уровне виджетов, которые реализуют спецификации дизайна Material и iOS соответственно.
5. Просмотр визуализации
5.1 Widget
Во Flutter нет концепции Controller и Activity, есть только один элемент управления Widget (эквивалентный View), и все это виджеты.
Виджет — это абстрактное описание функций Flutter, информация о конфигурации представлений, а также отображение данных — самая основная концепция в среде разработки Flutter.
Еще два важных виджета: StatelessWidget и StatefulWidget.
5.2 Процесс рендеринга
5.2.1Движок Flutter не будет отображать дерево виджетов напрямую, потому что виджеты очень нестабильны и часто вызывают метод сборки, а виджеты зависят друг от друга. много производительности.Вёрстка должна быть пересчитана. Это приводит к концепции Element и RenderObject, Механизм Flutter анализирует дерево RenderObject, а не виджет.
5.2.2Виджеты преобразуются в RenderObjects, но не все виджеты преобразуются в RenderObjects.
Преобразование без RenderObject:
//Text -> StatelessWidget -> Widget
class Text extends StatelessWidget {
}
abstract class StatelessWidget extends Widget {
StatelessElement createElement() => StatelessElement(this);
}
abstract class Widget extends DiagnosticableTree {
Element createElement(); // 创建element抽象方法
}
Преобразование RenderObject:
//Column -> Flex -> MultiChildRenderObjectWidget - > RenderObjectWidget -> Widget
class Column extends Flex {
}
class Flex extends MultiChildRenderObjectWidget {
// ⽅法实现
RenderFlex createRenderObject(BuildContext context) {
//返回RenderFlex
return RenderFlex -> RenderBox -> RenderObject
} }
abstract class MultiChildRenderObjectWidget extends RenderObjectWidget {
}
abstract class RenderObjectWidget extends Widget {
RenderObjectElement createElement();
RenderObject createRenderObject(BuildContext context); // 抽象⽅法-创建RenderObject
void updateRenderObject(BuildContext context, covariant RenderObject renderObject) {
}
void didUnmountRenderObject(covariant RenderObject renderObject) { }
}
abstract class Widget extends DiagnosticableTree {
Element createElement(); // 抽象⽅法-创建element
}
class RenderFlex extends RenderBox with ContainerRenderObjectMixin<RenderBox,
FlexParentData>,
RenderBoxContainerDefaultsMixin<RenderBox,
FlexParentData>,
DebugOverflowIndicatorMixin {
}
abstract class RenderBox extends RenderObject {
}
6. Гибридная разработка
6.1 Flutter вызывает нативные методы
1.Platform channels
2.Pigeon
3.pub.dev/Поиск сторонних пакетов с открытым исходным кодом в
В качестве примера возьмем каналы платформы: Flutter изначально вызывает для получения UDID.
/*
Flutter代码
*/
static const platform = const MethodChannel("leo.com/getudid");
void getUDID() async {
final result = await platform.invokeMethod("nativeGetUDID"); // 要调⽤的⽅法
// final result = await platform.invokeMethod("nativeGetUDID",["flutter参数"]);
setState(() {
_udid = result;
});
}
/*
iOS代码
*/
// 1.获取FlutterViewController
let controller: FlutterViewController = window.rootViewController as!
FlutterViewController;
// 2.创建FlutterMethodChannel，跟controller⼆进制消息通信
let channel = FlutterMethodChannel(name: "leo.com/getudid", binaryMessenger:
controller.binaryMessenger);
// 3.监听channel调⽤⽅法，当flutter调⽤nativeGetUDID的时候调⽤
channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping
FlutterResult) in
// 1.判断当前是否是nativeGetUDID
guard call.method == "nativeGetUDID" else {
result(FlutterMethodNotImplemented); // 报⼀个没有⽅法的错误
return;
}
call.arguments; //传递过来的参数
// 2.获取UDID
let udid = "xxxx-xxxx-xxxx-xxxx"
result(udid) //回调值
}
/*
Android代码
*/
private val CHANNEL = "leo.com/getudid"
override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
GeneratedPluginRegistrant.registerWith(flutterEngine);
// 1.创建MethodChannel对象
val methodChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger,
CHANNEL)
// 2.添加调⽤⽅法的回调
methodChannel.setMethodCallHandler {
// Note: this method is invoked on the main thread.
call, result ->
// 2.1.如果调⽤的⽅法是nativeGetUDID,那么正常执⾏
if (call.method == "nativeGetUDID") {
// 2.1.1.调⽤另外⼀个⾃定义⽅法回去电量信息
val udid = "xxxx-xxxx-xxxx-xxxx";
result.success(udid)
} else {
//⽅法找不到，回调notImplemented
result.notImplemented()
}
}
}
6.2 Встроенная интеграция Flutter для создания модуля Flutter
create --template module native_add_flutter
6.2.1 Интеграция iOS с Flutter
// CocoaPods集成
flutter_application_path = '../native_add_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb’)
// 初始化Flutter引擎 , 为引擎起名为leo
let flutterEngine:FlutterEngine = FlutterEngine(name: "leo");
// 启动flutter引擎，默认函数⼊⼝为main
flutterEngine.run();
let flutterVC = FlutterViewController(engine: engine, nibName: nil, bundle: nil);
flutterVC.modalPresentationStyle = .fullScreen;
self.present(flutterVC, animated: true, completion: nil);
6.2.2 Интеграция Android с Flutter
// 在gradle进⾏配置
// 创建Android项⽬、添加相关的依赖
// 1、修改Android项⽬settings.gradle
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'native_add_flutter/.android/include_flutter.groovy' // new
))
include ':native_add_flutter'
project(':native_add_flutter').projectDir = new File('../native_add_flutter')
// 2、配置Android项⽬的build.gradle
dependencies {
...
implementation project(':flutter') //增加flutter依赖
}
// 3、AndroidManifest.xml配置
<activity android:name="io.flutter.embedding.android.FlutterActivity"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDi
rection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
import io.flutter.embedding.android.FlutterActivity;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
startActivity(
FlutterActivity.createDefaultIntent(this)
);
}
}
Семь, объяснение случая - счетчик
flutter create flutterdemo
main.dart
// 导⼊类
import 'package:flutter/material.dart';
//⼊⼝函数，程序加载时调⽤
void main() {
runApp(MyApp()); //调⽤runApp⽅法，并初始化MyApp
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) { //初始化会调⽤build⽅法
return MaterialApp( //Material为Google的⼀种UI⻛格，MaterialApp可为项⽬配置App标题、主题
等
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'), //设置主⻚为MyHomePage
);
}
}
//由于点击需要更改Text显示,所以此处继承StatefulWidget
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
//下的按钮的点击事件
void _incrementCounter() {
// setState会标记需要刷新UI
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++; //点击按钮时候，counter+1, 并⾃动更新UI显示
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar( //配置导航
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center( //配置布局显示在中⼼
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column( //⼀种竖向布局⽅式，相当于listview
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[ //返回多个widget数组，
Text(
'You have pushed the button this many times:',
),
Text( '$_counter',//显示_counter的值
style: Theme.of(context).textTheme.headline4,//显示样式，使⽤主题的headline4
显示
),
],
),
),
floatingActionButton: FloatingActionButton( //⼀个可点击的按钮，固定在右下⻆
onPressed: _incrementCounter, //点击事件
tooltip: 'Increment',
child: Icon(Icons.add), //按钮显示为内部⾃带的add图⽚
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
8. Приложение: Последние важные обновления
Версия 1.2 2019/02/26
Поддержка Java1.8
Добавлен канал связи между JavaScript и Dart.
Добавлена поддержка Android App Bundle.
Повышение производительности AOT (предварительно скомпилированного) на 10–20 % за счет сокращения вызовов конструкторов и статических методов.
Версия 1.52019/05/07
Добавлены интеграционные тесты
Улучшить производительность горячей перезагрузки
Решил удалить план динамического обновления
Добавлена поддержка среды выполнения Flutter для Linux и Windows.
Версия 1.7 2019/07/09
Оптимизация поддержки инструментов Flutter
Поддерживает 32-битные и 64-битные пакеты Android.
Начата поддержка веб-сайтов и экспериментальная поддержка настольных компьютеров.
Версия 1.9 2019/09/10
Идеальная поддержка веб-платформы
Экспериментальная поддержка настольных платформ
Добавлена поддержка 24 локалей.
Поддерживает macOS Catalina и iOS 13.
Android добавляет поддержку создания AAR
Версия 1.12 2019/12/11
Поддержка Android 10
Поддержка темного режима iOS13.
Модули Flutter можно интегрировать в приложения для Android или iOS.
Веб-поддержка перенесена из стадии разработки в бета-версию; добавлена поддержка MacOS в разработку
Запуск нового инструмента DartPad (DartPad — это онлайн-инструмент, который позволяет вам испытать язык программирования Dart в любом современном браузере)
Версия 1.17 06.05.2020
Уменьшить объем приложений на 18,5%
Улучшена производительность навигации на 20%-37%.
Уменьшено использование ЦП/ГП для анимации iOS на 40%.
Добавлена поддержка Google Fonts: fonts.google.com
Завершите рефакторинг раздела Type Scale в соответствии со спецификацией дизайна материалов 2018 года.
Улучшена скорость рендеринга iOS на 50% (iPhone5s+, iOS10+ поддерживают рендеринг Metal); рендеринг OpenGL поддерживается не полностью
Версия 1.20 05.08.2020
Улучшенное декодирование UTF-8
Плагин pubspec.yaml больше не поддерживает старый формат
Предварительный просмотр встроенных инструментов Dart DevTools в Visual Studio Code
Представить новый плагин для микширования — Pigeon, который может напрямую вызывать методы Java/Objective-C/Kotlin/Swift в методах Dart и передавать непримитивные объекты данных.
Версия 1.22 01.10.2020
Добавлен инструмент анализа объема приложений
Предоставляются инструменты интернационализации и локализации, а также реализована поддержка горячей перезагрузки.
Поддерживает Android 11; поддерживает новые типы экранов (например, экраны с дырочками и экраны-водопады) и синхронизирует анимационные эффекты Android 11.
Поддержка iOS 14, новых значков Xcode 12 и предварительная поддержка новой функции App Clips iOS 14; версия шаблона по умолчанию обновлена с 8.0 до 9.0
Официально доступные плагины Google Maps и WebView, которые содержат собственные компоненты пользовательского интерфейса для Android и iOS в приложениях Flutter.
Версия 2.0 03.03.2021
Веб-поддержка переведена с бета-версии на стабильную версию
В дополнение к рендерингу HTML добавлен рендеринг CanvasKit. Браузер рабочего стола по умолчанию будет вызывать версию CanvasKit, а мобильный браузер будет вызывать версию HTML.
Смешанная разработка экземпляра с несколькими флаттерами (проблема с памятью была проверена на iOS)
Поддержка настольных платформ (бета)
Мобильные объявления Google (бета)
Dart 2.12 добавляет нулевую безопасность
Версия 2.2 2021/05/18
Улучшенная кросс-платформенная поддержка iOS, Android, Web.
Обновление Dart 2.13, в котором представлены псевдонимы Type.
Flutter Web улучшает стабильность
Оптимизировано время кадра анимации рендеринга на стороне iOS, реализована инкрементальная установка iOS и сокращено время установки обновления.
Отложенные компоненты представлены в Android, что позволяет приложениям Flutter загружать модули кода, которые содержат предварительно скомпилированный код, во время выполнения, уменьшая первоначальный размер установки.
Предложения о работе:
Отдел исследований и разработок коротких видеороликов отвечает за инкубацию, исследования и разработку красивых видеороликов, национальных небольших видеороликов и различных инновационных приложений. Это стратегический продукт на уровне компании, который берет на себя задачу предоставления короткого видеоконтента для матрицы продуктов Baidu, уделяя особое внимание поддержке поискового и информационного потока Baidu, а также выполняя миссию Baidu по преобразованию контента в экологическое видео. Всего за два года количество пользователей выросло с нуля до 100 миллионов, с десятками миллионов активных пользователей в день. С десятками миллиардов трафика, миллиардами данных, богатой новизной и всеобъемлющим геймплеем продукта, несколькими типами технических систем и ведущей технической архитектурой.
Добро пожаловать в отдел коротких видео исследований и разработок, требуется социальный набор, стажировка и набор в школу.
Электронная почта для доставки резюме:geektalk@baidu.com(Замечания по доставке [короткое видео])
Рекомендуемое чтение:
｜Анализ архитектуры промежуточной платформы аутентификации репутации Baidu
｜Применение графовой базы данных на китайском языке Baidu
｜Взгляд на фреймворк фронтенд-приложений следующего поколения от lowcode
---------- END ----------
Байду Гик говорит
Официальный технический общедоступный аккаунт Baidu доступен онлайн!
Технические галантереи · Отраслевая информация · Интернет-салон · Отраслевая конференция
Информация о найме · Внутренняя информация · Технические книги · Периферийные устройства Baidu
Приглашаем студентов обратить внимание