Эта статья представляет собой краткое руководство для студентов, изучающих нативную разработку iOS/Android, которые плохо знакомы с флаттером.
Учеников с естественным развитием больше будет интересовать флаттер.Они могут получить какие-то учебные ресурсы из Интернета, но они разбросаны и не составляют пути обучения.Они также могут наступить на какие-то ямы.Чтобы избежать обходных путей и быстро приступайте к работе с Flutter, я поделюсь частью своего личного практического опыта, чтобы все могли покритиковать, исправить и дополнить.
1. Установите флаттер
1.1 Сначала загрузите редактор флаттераandroid studio, последняя версия, разархивировать, установить. . . (далее АС)
1.2 Установите флаттер Возьмите iOS в качестве примера
- адрес загрузки версии для Macflutter.Dev/docs/индивидуальное тело…
- распаковать
cd ~/development
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.2-stable.zip
- Установите переменную среды PATH
Сначала отредактируйте файл bash_profile (по умолчанию macOS Mojave (и более ранние версии) использует оболочку Bash, поэтому отредактируйте $HOME/.bashrc)
$vim ~/.bash_profile
Добавьте следующий путь
export PATH="$PATH:`pwd`/flutter/bin"
Заполните следующим образом
export PATH="/bin:/usr/bin:/usr/local/bin:$PATH"
export PATH="/Users/boob/Documents/flutter/bin:$PATH"
export PATH="/usr/local/opt/openssl/bin:$PATH"
export PATH="/Users/boob/Documents/depot_tools:$PATH"
export PATH="/Users/boob/Library/Android/sdk/platform-tools:$PATH"
export PATH
После редактирования используйте wq для выхода, и вы можете выполнить команду флаттера
- Готово, можно попробовать выполнить в терминале
flutter --versionпосмотрите на номер версии,which flutterВы можете просмотреть путь, по которому установлен флаттер
2. Создайте проект и запустите его
Студенты IOS установили xcode по умолчанию.Если нет, установите его.Студентам Android необходимо скачать android studio, а для последующей разработки необходимо использовать как для разработки, так и для отладки. Чтобы запустить флаттер напрямую в первый раз, мы сначала открыли эмулятор и удалили другие реальные устройства, чтобы последующие операции не смогли найти работающую цель или не знали, как выбрать устройство.
Предварительное действие открыть команду эмулятора
open -a Simulator
Проверьте, не превышает ли номер версии модуля1.6.0
pod --version
Минимальная поддерживаемая версия флаттера по умолчанию — 1.6.0.Если плагин используется, он сообщит, что версия слишком низкая, что приведет к сбою модуля.
команда для создания проекта
flutter create testflutter
Обратите внимание, что имя проекта должно быть в нижнем регистре, иначе вам будет предложено назвать ошибку.
бегать
$ cd myapp
$ flutter run
В этот момент флаттер скомпилирует код дротика, и подпись запустится.
3. Представление продукта Flutter
Входим в исходный каталог флаттера
В каталоге ios хранятся проекты ios, а в каталоге android хранятся проекты android. Для ios скомпилированный продукт находится в папке ios/Flutter содержит
-
App.framework Это продукт iOS, скомпилированный проектом флаттера. Для отладочной компиляции flutter_assets содержит все исполняемые продукты и ресурсы. Для компиляции релиза исполняемая часть находится в файле APP, а ресурсы хранятся в flutter_assets.
-
флаттер.фреймворк Обычно известная как флаттер-движок/флаттер-движок, базовая библиотека, которая поддерживает работу флаттера верхнего уровня.
-
Конфигурация проекта xxx.xcconfig, автоматически сгенерированная командой флаттера, для настройки пути флаттера, пути флаттерфреймворка
-
flutter_export_environment.sh 1.9 Добавлен скрипт для настройки переменных среды, обычно используемых флаттером.
4. горячая перезагрузка
Это одна из хвастливых особенностей флаттера, кроссплатформенная согласованность, горячая перезагрузка. . . То есть код можно выполнить сразу после написания. Для написания кода флаттера мы используем Android Studio, официальная рекомендуемая версия 3.0 или выше.developer.android.com/studio
Мы можем использовать последнюю версию, потому что были использованы последние функции плагина флаттера, включая отладку точки останова, присоединение, анализ просмотра производительности и т. д.
Откройте проект testflutter с помощью AS.
Теперь вы можете нажать кнопку запуска▶️, запустите флаттер напрямую, это то же самое, что запустить его в терминале.
Измените исходный код и измените заголовок на我的第一个flutter项目,следующим образом
Затем нажмите cmd + s, чтобы сохранить, вы можете увидеть результаты работы на симуляторе.
5. Библиотека пользовательского интерфейса Flutter по умолчанию
По умолчанию предоставляются два набора библиотек пользовательского интерфейса, один из которых выполнен в стиле Android.Material Designи стиль iOScupertino(ссылка на портал)
Почувствуйте разницу ниже
Попробуем с кнопкой Добавьте код в скаффолд в main.dart
CupertinoButton(
child: Text('CLICK ME'),
color: Theme.of(context).accentColor,
onPressed: (){
print("点击了按钮");
},
disabledColor: Theme.of(context).disabledColor,
)
6. Изменения в мышлении о развитии
На уровне исходного кода идеи нативного программирования должны начать меняться, потому что нативная разработка — это императивное программирование, а интерфейс и флаттер — декларативное программирование.
Для императива это означает, что если мы хотим изменить текстовое содержимое и цвет текста, мы получаем текст и цвет текста, а затем присваиваем значения тексту и цвету текста.
Однако для декларативного типа, чтобы изменить текстовое содержимое, необходимо сначала отдельно объявить текст текстового содержимого и элемент управления текстом.
Все элементы управления макетом записываются вWidget build(BuildContext context) { ... }метод, но
Но элемент управления должен использовать содержимое и может измениться, используйте переменную, чтобы записать его.
- Написание заявления
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
final String title;Это строка, которая объявляет заголовок.
или
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
...
}
- Контролируйте написание и использование
AppBar(
title: Text(widget.title),
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
- изменить текстовое содержимое setState
Это самое большое отличие от нативного.Если вам нужно изменить содержимое текста, вам нужно использовать setState, чтобы он вступил в силу, сообщая флаттеру, что состояние изменилось в это время и его нужно обновить.
пример клик+Номер +1, видно что номера на интерфейсе сразу обновляются
void _incrementCounter() {
setState(() {
_counter++;
});
}
Стоит отметить, что частые обновления состояния также приведут к проблемам с производительностью, и ими не следует злоупотреблять.
Вы можете изучить другие коды самостоятельно.声明式编程использовать.
7. Все является виджетом
Виджет эквивалентен собственному uiview на уровне пользовательского интерфейса, но он не только ограничен отображением UIView, но также используется для макета.
- Основные виджеты
Контейнер, Кнопка, Строка и столбец, Текст, Каркас, Значок, Изображение, Стек, TabBar+TabBarView, Виджет-поле ввода TextField
- Виджеты для верстки
Выровнять, Центрировать, Растянуть, LayoutBuilder, Заполнение, Обтекание
- Прокручиваемые виджеты
CustomScrollView, GridView, ListView, PageView, SingleChildScrollView
- Украсить виджеты
BoxDecoration, Clip Series, Opacity, SafeArea, Gaussian Blur BackdropFilter
Ссылаться на:GitHub.com/Чен Бин X/C…
8. Гибкая раскладка
Мы знаем, что в горизонтальном макете используется виджет Row, а в вертикальном макете — Column Wiget. Макет делится на главную ось и поперечную ось.Если это макет строки, главная ось mainAxisAlignment — это горизонтальная ось, а ее поперечная ось — вертикальная ось. Существует 6 вариантов расположения шпинделей: начало, конец, центр, пространство вокруг, пространство между, пространство равномерно
- spaceМежду левым и правым элементами рядом, на равном расстоянии посередине
Padding(
padding: const EdgeInsets.all(0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,),
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,)
],
),
)
Эффект следующий
- spaceEvenly означает, что все элементы расположены на одинаковом расстоянии друг от друга, включая левую и правую границы расстояния между элементами.
Padding(
padding: const EdgeInsets.all(0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,),
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,)
],
),
Схема эффекта выглядит следующим образом
- spaceAround означает равномерное размещение доступного пространства между дочерними элементами, а половина из них — пространство до и после первого и последнего дочерних элементов.
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,),
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,)
],
),
Схема эффекта выглядит следующим образом
start означает размещение потомка как можно ближе к началу главной оси. Если это значение используется в горизонтальном направлении, [TextDirection] должен быть доступен, чтобы определить, находится ли исходная точка слева или справа. Если это значение используется в вертикальном направлении, [VerticalDirection] должен быть доступен, чтобы определить, является ли начальная точка верхом или низом.
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,),
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,)
],
),
Схема эффекта выглядит следующим образом:
- центр
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,),
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,)
],
),
Эффект следующий
- end Горизонтальное расположение означает конечную точку рядом с главной осью, а вертикальное расположение означает конечную точку рядом с вертикальной осью.
Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,),
Container(color: Colors.red, width: 50, height: 50,),
Container(color: Colors.blue, width: 50, height: 50,)
],
),
9 Как нативная инженерия поддерживает флаттер
В интернете много гибридных инженерных решений, но есть только одно реальное ядро, которое заключается в добавлении продуктов сборки флаттер-проекта в нативный проект.
Мы уже знаем, что продукт сборки флаттера имеет App.framework. Другие — это Flutter.framework и сторонние библиотеки, от которых зависит dart, которые могут быть плагинами или библиотеками dart, которые можно найти в папке .symbol (файлы, начинающиеся с .xxx, по умолчанию скрыты, используйте shift+cmd+. покажите это)
Если вы хотите присоединиться к основному проекту, вы не можете просто сделать три вещи в виде модулей и добавить их во время установки/обновления модуля. Таким образом, нативные разработчики могут использовать флаттер-проекты без восприятия.
В отрасли существует основное направление, которое заключается в разделении продуктов для локальной и удаленной установки, метода локальной зависимости и метода удаленной зависимости. Это все еще вопрос, куда положить продукт.
Возможно, было бы лучше представить другой взгляд на гибридную инженерию. Делим гибридную схему по ролям, до трех ролей
- 1. Нативная разработка
- 2. Развитие флаттера
- 3. Гибридная разработка
Требования к этим трем ролям таковы:
Нативной разработке не нужно устанавливать флаттер, но будут использоваться продукты флаттера.
Другим людям нужно установить флаттер, поэтому требования аналогичны. А. Учащиеся, установившие флаттер, могут не захотеть компилировать продукты флаттера, а использовать их напрямую. Б. Учащиеся, разрабатывающие флаттер, могут захотеть только компилировать продукты отладки, но не хотят загружать их. Они хотят отлаживать сборки и прикреплять к c Требования к сборке Это пакет, который необходимо собрать с последним кодом для выпуска.
Использование официального гибридного подхода не может удовлетворить все вышеперечисленные потребности. Чтобы самостоятельно разработать сценарий гибридного проекта, необходимо учитывать вышеперечисленные аспекты.
Однако, как его использовать, это всего лишь простое предложение
flutter_application_path = 'xxxflutter'
load File.join(flutter_application_path, 'IOSFlutterConfig', 'start.rb')
def GirFlutter
puts "自动检测flutter是否存在,自动执行不同的脚本"
install_flutter_engine_pod
end
Позжеpod updateВот и все!
10 Гибридная инженерия и родная инженерная коммуникация
Разделенный на две части, флаттер вызывает нативный код, нативная функция вызывает флаттер. Официальный предоставляет два метода: methodchannel и eventchannel.
Блок-схема выглядит следующим образом:
method channel
Кроме того, плагин — лучший пример связи между нативом и флаттером, мы можем непосредственно посмотреть на пример, который он привел.
терминальное исполнение
flutter create --org com.example --template=plugin myplugin
Войдите в каталог myplugin/iOS/classes
Мы виделиSwiftMypluginPlugin.swift
import Flutter
import UIKit
public class SwiftMypluginPlugin: NSObject, FlutterPlugin {
public static func register(with registrar: FlutterPluginRegistrar) {
let channel = FlutterMethodChannel(name: "myplugin", binaryMessenger: registrar.messenger())
let instance = SwiftMypluginPlugin()
registrar.addMethodCallDelegate(instance, channel: channel)
}
public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
result("iOS " + UIDevice.current.systemVersion)
}
}
Вы можете видеть, что этот плагин создает FlutterMethodChannel с именем myplugin и регистрирует его с помощью метода callldelegate через registar.
Этот метод может быть вызван на стороне дротика.
class Myplugin {
static const MethodChannel _channel =
const MethodChannel('myplugin');
static Future<String> get platformVersion async {
final String version = await _channel.invokeMethod('getPlatformVersion');
return version;
}
}
Итак, как нативный код вызывает флаттер?
На примере methodchannel мы видим, что результат был передан, и мы можем получить результатresult: @escaping FlutterResult, если есть новое событие, которое вы хотите отправить, вы можете непрерывно вызывать результат.
self.result("第二次回调给flutter")
eventchannel
Процесс использования аналогичен, сначала зарегистрируйтесь -> отправьте события
FlutterEventChannel *evenChannal = [FlutterEventChannel eventChannelWithName:@"flutter_hummer_event" binaryMessenger:[registrar messenger]];
FlutterEventChannelHandel *handle = [FlutterEventChannelHandel new];
instance.eventHandel = handle;
[evenChannal setStreamHandler:handle];
。。。
self.eventHandel.eventsBlock(dic);
Как использовать слой с дротиками
Сначала зарегистрируйте уведомление --> слушайте обратные вызовы
// 注册一个通知
static const EventChannel eventChannel =
const EventChannel('flutter_hummer_event');
eventChannel
.receiveBroadcastStream(12345)
.listen(_onEvent, onError: _onError);
// 回调事件
void _onEvent(Object event) {
...
}
// 错误返回
void _onError(Object error) {}
! ! Совет: по умолчанию плагин генерирует быструю версию плагина.Если вы хотите выбрать ios, вы можете использовать параметр -i objc, а другие параметры конфигурации можно запросить с помощью -h
flutter create --org com.example --template=plugin -i objc myplugin22
исходное заявление
Приглашаем всех критиковать, исправлять и дополнять, стремиться быть лучшим и самым совершенным вводным руководством и продолжать обновлять...
Нелегко быть оригинальным, если вам нужно перепечатать, пожалуйста, укажите источник.共田君