Q ***

与Flutter工程师沟通入口

入门

Q 跨平台的动态化框架

Cordova Ionic 小程序
RN Weex
Flutter

Q 原生浏览器内核

WebView
WKWebView

Q 通信

JsBridge
WKWebViewJavascriptBridge

Q Diff 算法

React会在 DOM 树的基础上建立一个抽象层，即虚拟DOM树，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM ，最后再批量同步到真实 DOM 中。

Q JavaScript Dart

JIT 执行时实时生成机器码
AOT 代码执行前已经将源码进行了预处理

进阶

Q Skia

github.com/shiyulong-i…

Q 程序

静态编译
动态解释

Q Flutter框架结构

Framework Dart

Material Cupertine
Widgets
Rendering
Animation Painting Gestures
Foundation

Engine C/C++

Service Protocol Composition Platform Channels
Dart Isolate Setup Rendering System Events
Dart Runtime Mgmt Frame Scheduling Asset Resolution
Frame Pipelining

Embedder Platform-specific

Render Surface Setup Native Plugins App Packaging
Threed Setup Event Loop Interop

Q Dart

var
dynamic Object
final const
null-safety
函数作为变量 var say = (str){ print(str); }; say("Hello,World!");
函数作为参数 void login(var callback) { callback(); } login(() => print("success login"));
mixin *
Future *
Stream *

Q 包管理

Gradle jcenter
Cocoapods Carthage
npm
Pub

Q Pub

pubspec.yaml
Pub get
Pub upgrade

实例

Q Widget

渲染引擎 Widget
GestureDetector
Theme
StatefulWidget createState()
StatelessWidget 无状态

Q State

widget
context

Q State生命周期

initState()
build(BuildContext context)
didUpdateWidget(Demo oldwidget)
deactivate()
dispose()
reassemble()
didChangeDependencies()

Q 组件

Row Column
Wrap Flow
Stack Positioned
Expanded
Padding
Scaffold
ListView

Q 控件库（Widgets）

class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding,PaintingBinding, RendererBinding, WidgetsBinding { ... }
abstract class Widget extends DiagnosticableTree { ... }
abstract class StatelessWidget extends Widget { ... }
abstract class StatefulWidget extends Widget { ... }
abstract class RenderObjectWidget extends Widget { ... }
abstract class Element extends DiagnosticableTree implements BuildContext { ... }
class StatelessElement extends ComponentElement { ... }
class StatefulElement extends ComponentElement { ... }
abstract class RenderObjectElement extends Element { ... }

Q path: ^1.8.2

With Dart dart pub add path
With Flutter flutter pub add path

dependencies:
  path: ^1.8.2

Flutter 配置环境OK

截屏2022-05-30 上午11.31.23.png

运行在iOS模拟器OK

截屏2022-05-30 下午12.28.36.png

control + c

Q ✗ Android Studio not found at /path/to/android/studio/Contents

cd Android sdk 路径下,输入以下命令：

flutter config --android-studio-dir=""

如果找不到 Android sdk ，也是 cd Android sdk 路径下,输入以下命令：

flutter config --android-sdk="这里是你的 Android sdk 路径地址"

Q 修改国内源

build.gradle

buildscript {

ext.kotlin_version = '1.6.10'

repositories {

//google()

//mavenCentral()

maven { url 'https://maven.aliyun.com/repository/google' }

maven { url 'https://maven.aliyun.com/repository/jcenter' }

maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }

}

\


dependencies {

classpath 'com.android.tools.build:gradle:4.1.0'

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

}

}

\


allprojects {

repositories {

//google()

//mavenCentral()

\


maven { url 'https://maven.aliyun.com/repository/google' }

maven { url 'https://maven.aliyun.com/repository/jcenter' }

maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }

}

}

\


rootProject.buildDir = '../build'

subprojects {

project.buildDir = "${rootProject.buildDir}/${project.name}"

}

subprojects {

project.evaluationDependsOn(':app')

}

\


task clean(type: Delete) {

delete rootProject.buildDir

}

\


\

flutter.gradle

buildscript {

repositories {

//google()

//mavenCentral()

maven { url 'https://maven.aliyun.com/repository/google' }

maven { url 'https://maven.aliyun.com/repository/jcenter' }

maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }

}

dependencies {

classpath 'com.android.tools.build:gradle:4.1.0'

}

}

Q 安卓真机运行异常

gradle-wrapper.properties distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip

Q pub.dev

Provider

Q Networking

Q Widget 树

截屏2022-06-05 下午1.37.59.png 图一

截屏2022-06-05 下午1.38.19.png 图二

Q 学习平台

Q 设计模型

// 不写继承什么，默认继承Object
class Friends {
  // 设计模型，通讯录3个必要字段：头像，昵称，索引
  final String imageUrl;
  final String name;
  final String? indexLetter;
  final String? message;
  final String? time;

  Friends(
      {required this.imageUrl, required this.name, this.indexLetter, this.message, this.time});
}

Q version

截屏2022-06-06 下午1.20.33.png

Q Dart 类型强转 as

ImageProvider? _image = (imageUrl != null ? NetworkImage(imageUrl!) : AssetImage(imageAssets!)) as ImageProvider<Object>?;

Q 模型转换

// 转换模型数组
List<Chat> chatList = responseBody['chat_list'].map<Chat>(
    (item) => Chat.fromJson(item),
).toList();

截屏2022-06-08 上午11.46.48.png

Q TextField 文字无法居中

decoration: InputDecoration(
  // border: InputBorder.none, //没有边框
  border: OutlineInputBorder(borderSide: BorderSide.none),
  contentPadding: EdgeInsets.only(left: 5,), //内容的边距
  hintText: '搜索', //占位文字
),

Q onNotification

typedef NotificationListenerCallback<T extends Notification> = bool Function(T notification);

Q cocoaPods

Mac 不允许写入 /usr/bin

sudo gem install cocoapods -v 1.5.3 -n /usr/local/bin
sudo gem install cocoapods -n /usr/local/bin

Q Runner.xcworkspace

//在Runner target Build Settings > Other Linker Flags(OTHER_LDFLAGS) 添加
 $(inherited) -framework Flutter

Flutter 技术原理