标签：Widget 入门渲染 Element Dart dart Flutter 进阶

Flutter从入门到高级进阶

https://www.bilibili.com/video/BV19x4y1R7LE

P1 环境搭建
P2创建Flutter工程&Flutter优势

flutter 2.5.3

app dart代码

module 混合开发

plugin 第三包原生和dart

package 第三包 dart

name 下划线

Flutter：效率高！！不依赖UI！！高度统一！！
渲染引擎—》Dart 一》界面
集成渲染引擎 体积大
    
RN 依赖原生各个平台的UI

P3 hello_flutter

核心渲染：增量渲染！！！

万物widget

有状态 stateful
无状态 stateless

as 闪电热重载

树逻辑相当 vue虚拟dom

P4 自定义Widget
P5 文字样式

P6 MaterialApp

Materialapp 魔退里app

P7初探ListView

as 快捷键 stl stf

_的内部是指，文件内部！！！;

 Text(data[index].name!);
!强制转换
?可选;

ListView;
核心渲染：增量渲染！！！
树。
模型对象！！
新的界面对象！！！
组件的排列只有三种 1、横着2、竖着3、叠着
    
    SizeBox()
    Container()
    没有变化加const 
    
    return MaterialApp(
      debugShowCheckedModeBanner: false,// 右上角那个debug
    
    中文网 flutterchina.club/docs/
    dart包  pub.dev

P8 环境变量配置补充

哪些shell？？？
bash 早期的
zsh 更加强大！！

001--快速开始Flutter环境搭建
Linux环境变量的配置问题。
你要让shell能够找到你的工具！各种shell的配置文件的配置。
根据文章完成环境配置
开始Flutter开发
万物皆Widget。
Flutter的Widget分两类自定义一个Widget要能够被渲染：需要实现？
Flutter的特点：
MaterialApp（App素材）
初探ListView
    
    
开始Flutter开发
万物皆Widget。
Flutter的Widget分两类
有状态：StatefulWidget无状态：StatelessWidget自定义一个Widget要能够被渲染：需要实现？
build方法！返回一个Widget（会被渲染出来！）Flutter的特点：
不依赖原生UI拥有独立的渲染引擎
界面更新逻辑和原生不一样（增量渲染）
重新创建一个新的Widget。
为什么Flutter中大量final修饰的威性，const修饰的构造方法（常量对象）。
因为Flutter的渲染逻辑，是增量渲染。Widget结构是树状结构。
想改变屏幕内容就直接改变Widget对象。
常量对象的创建效率更高！;

P9 上节课回顾
P10抽取Widget

alt + 回车

Text;
RichText;
TextSpan;

P12 Flutter布局Row&Column

弹性盒子布局！！
横向 Row
纵向Column
多层。Stack

Row
    textdirection:textdirection.rtl;//在row布局中改变主轴方向！
    crossaxisalignment.baseline
    textbaseline:Textbaseline.alphabetic
        
 expanded 自适应;
Container中相对位置属性Alignment。参数：x 和 y原点在中间位置
/spaceBetween：剩下的空间平均分布到小部件之间！！
/spaceAround：剩下的空间平均分布到小部件周围！！/spaceEvenly：剩下的空间和小部件一起平均分！！
/Expanded：在主轴方向不会剩下间隙。将被Expanded拉伸。

P13 上节课回顾

P14 Stack

positioned widget wi局

    AspectRatio 改父widget 父一个width或height

Flutter 增量渲染 →>原来的替换掉新的。
没有必要 拥有状态！！
数据，保留？？？？
有状态管理
渲染逻辑和数据逻辑分开管理！！

    print('hello world');
唯一定位的！！！每个类 构造方法 key
    
    '/渲染逻辑，任然是不可变的！！
    /状态管理者
    UIKit 这个库 UIApplicationMain

P16搭建项目
P17 本地资源文件

P18 上节课回顾

P19 自定义cell

P20发现页面完善

SizeBox 空白间隙 ===Container也行

P21 cell点击切换界面

GestureDetector 加手势 点击事件
    相当 RN-touch*
    
    AssetImage()

P22 有状态的Cell

P23 我页面的布局

MediaQuery.removePadding

P24 我页面的头部

P25 通讯录导航栏
P26 通讯录列表
P27 显示分组cell的头

P28显示索引条
P29 抽取索引条

P30选中索引条

位置

P31 DartSDK向下兼容问题

pubspec.yaml
environment:
  sdk修改兼容版本

更新点击 Pub get

2.12.0以上空安全问题

P32滚动ListView
P33 显示指示器

P34 聊天页面导航条

PopupMenuButton-PopupMenuItem

P35 准备网络数据

P36 发送网络请求

假数据 mock rap2.taobao.org/repository/editor?id=256798

仓库 rap2.taobao.org/repository/joined

mockjs.com/examples.html#String 看参数代踢初始值

randomuser.me 假用户信息

请求库 dio http0.13.4

pub.dev/packages?q=dio

引用库

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.6
  http: ^1.2.2

再点 Pub get

异步==多线程

import 'package:flutter/material.dart';
import 'draggable_widget.dart';
import 'package:http/http.dart' as http;

class DraggableDemo extends StatefulWidget {
  const DraggableDemo({super.key});

  @override
  State<DraggableDemo> createState() => _DraggableDemoState();
}

class _DraggableDemoState extends State<DraggableDemo> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getDate();
  }
  void getDate() async{
    final url=Uri.parse('http://geek.itheima.net/v1_0/channels');
    final response=await http.get(url);
    print(response.statusCode);
    print(response.body);
  }
}

P37 Jason转模型

final chat={
      'name':'koo',
      'age':28
    };
    // Map to json
    // final chatJson=jsonEncode(chat);
    final chatJson=json.encode(chat);
    // print(chatJson); 新版api
    print(chatJson);
    final newChat=json.decode(chatJson);
    print(newChat['name']);
print(newChat is Map);
导入 包 import 'dart:convert';

P38 初识Future

Future 未来数据
    Future方法
    调用用 a.then 来使用

P39利用FutureBuilder来渲染页面

FutureBuilder weiget
加载数据 俩次 第一次页面空 loading

P40 网络请求处理

P41 保持小部件的状态

Mixins 混入目的：给一个类增加功能。是多继承。

with AutomaticKeepAliveClientMixin
    保持数据  相当vue

P42 Dart中的异步编程

Future异步主要可以then相当promise  async

P43 Future的错误和状态

Futrue future=Futurn((){})
    future.then().catchError().whenComplete()

P44 多个异步处理

Future.wait   === Promise.all

P45 Dart事件循环

scheduleMicrotask() 微任务高 Future低-到.then连续(微任务)
    sleep(Duration(seconds:2)) 先卡2s 才继续 同步 再微任务 再future()/then

Dart中的异步编程--Future、async和await https://ost.51cto.com/posts/2336

在Dart中，实际上有两种队列：
1.事件队列（event queue），包含所有的外来事件：I/0、mouse events、drawing events、timers、isolate之间的信息传递。
2.微任务队列（microtask queue），表示一个短时间内就会完成的异步任务。它的优先级最高，高于event queue，只要队列中还有任务，就可以一直霸占着事件循环。microtask queue添加的任务主要是由 Dart内部产生。

P46 Dart中的多线程Isolate

异步 https://mp.weixin.qq.com/s/Tb0yyT2xPXizDUu1KjsiOA

Isolate.spawn(fn,10);多线程
    更像一个进程 有独立的内存空间
    想改数据
    ReceivePost()
    
    compute(fn,10) 一样 但是可以接受返回数据

P47 pubspec.yaml文件管理

dio 国人开发的

关于import
1、as关键字--给库起别名！目的：防止类名方法名冲突！
2、导入库，默认是整个文件中的都会导入
★ hide：需要隐藏的内容。*show：执行需要导入的内容

P48 异步多线程结合

箭头函数包含return

Timer.run 开启异步任务 不卡主线程 compute
    
    
生命周期 dispose() 销毁时执行 
    
    Future卡主线程

P49 三方库dio下载

alt+回车先创建name 后快捷键创建fn

Directory.systemTemp.path  手机临时路径

P50封装网路请求&切换项目请求库

import 'package:dio/dio.dart';
import 'package:http/http.dart' as http;

enum HttpMethod{
  GET,
  POST
}

class HttpManager{
  static Dio _dioInstance=Dio();
  static Dio getDioInstance(){
    if(_dioInstance==null){
      _dioInstance=Dio();
    }
    return _dioInstance;
  }

  static Future<Response> get(String url, {Map<String, dynamic>? queryParameters}){
    return getDioInstance().get(url);
  }
  fn(){
    try{

    }on Exception catch (e){
      
    }
  }
}

P51 自定义searchCell

as 快捷键

P52定义SearchPage

MediaQuery.removePadding

P53布局SearchBar

SizedBox

decoration BoxDecoration borderRadius做圆角

TextField() 相当input输入框
    textData.contains()

P54 SearchBar响应事件

P55 SearchPage显示

在线dart dartpad.dev/?null_safety=true

https://dartpad.cn/

P56 关于多线程及异步的总结

看视频

stless 无状态
    构造方法执行
    build方法执行
    
stful 有状态
    widget构造方法
    createState
    state构造方法
    state的init方法
    didChangeDependencies（改变依赖关系）
    	依赖的InheritedWidiget发生变化之后，didChangeDependencies才会调用。1
    state的build方法
    	当调用setState方法。会重新调用Build进行渲染。
		setState方法内部主要是利用_element（本质是就是context对象）调用markNeedsBuild

P58 数据共享InheritedWidget

InheritedWidget继承
    相当react useContext

渲染原理
Widget RenderObjd树

P60 Element树

生命周期的基本概念
Widget的生命周期
Flutter渲染原理 继承RenderObjd 都会创建
	Widget树-所有的Widget都会-> Element
	Element树-mount-RenderObjectElement会调用CreateRenderObject-> 创建RenderObject
	Render树（渲染引擎去渲染Render树）

stless 直接 widget 创建createElemnt

P61 StatelessW的Element

StatelessWidget的Element
1、StatelessWidget会创建Element
2、然后Element创建就会调用mount方法
3、mount里面会调用Widget的build方法进行渲染，并且将Element自己传出去

P62 StatefulW的Element

Widget树、Element树、Render树
	每一个Widget创建出来都会创建一个Element对象
		调用createElement方法。Element加入Element树中，都会调用mount方法
		RanderElement 主要是创建RenderObject
			通过mount方法创建RenderObject对象.
		StatefulElement 继承 ComponentElement
			调用creatState方法，创建state
			将Widget赋值给State对象
			调用state的build方法，并且将自己（Element）传出去
		StatelessElement 继承 ComponentElement
			主要调用build方法，并且将自己（Element）传递出去

P63 Key的作用

定位到那个widget

stless 自带

stful 加key ValueKey

stful 在state里面有bug 在widget没有

canUpdate 更新

widget树
    widget111
     widget222
elemnet树  state保存在element
    elemnet1111
    elemnet222

P64 GlobalKey的使用

Key的原理
Key本身是一个抽象类。有一个工厂构造方法。创建ValueKey
直接子类主要有：LocalKey和GlobalKey 
GlobalKey：帮助我们访问某个Widget的信息。I 
LocalKey：它用来区别那个Element要保留，那个Element要删除！
	ValueKey：以值作为参数（数字、字符串
	ObjectKey：以对象作为参数
	UniqueKey（创建唯一标识）

P65 Flutter调用原生页面

1、Flutter项目调用原生的功能I
2、原生项目嵌入Flutter（比较重！！）

MethodChannel

用第三方包快捷键修改 ios android

不用自己修改ios androd

P66 image_picker

pub.dev/packages?q=image_picker

用第三方包快捷键修改 ios android

配置权限

pop 包含原生代码

混合开发
插件、包的开发
热重载原理—引擎源码分析
混合工程自动化。

调试、缓存。

P67原生嵌入Flutter

Flutter Module

P68 显示对应的Flutter页面
P69 退回原生页面

P70 Flutter和原生通信

MethodChannel 传递方法调用。
BasicMessageChannel：持续通讯，收到消息之后还可以恢复消息
EventChannel 数据流

P71 下载引擎源码

flutter doctor -v

1、路径不要有中文。
2、工具所在的目录需要有可执行权限。

flutter channel 查看版本

github.com/flutter/engine

cat $FLUTTER/bin/internal/engine.version 完整版本号 /Users/hank/flutter/bin/internal

flutter channel master 切换版本

下载引擎代码
工具准备
Chromium提供的部署工具depot_tools

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

chromium.googlesource.com/chromium/tools/depot_tools.git

brew install ant 安装这个

engine_download 15G 编译26G

断点下

P72 编译引擎源码
P73 配置项目代码关联引擎源码

P74检查二进制文件中是否包含调试信息
P75 调试引擎源码Channel底层实现
P76 codec编解码器

codec
自动释放池 OC对象。
C++\C

P77 package开发

04--开发Packages和插件常
用命令
Flutter三方的工具有两种。一种是插件（Plugin），一种是包（Package）。这两种差别在于Plugin不仅包含了Dart代码，迷包含了iOS以及安卓的原生代码，比如常用的image_picker。那么Package就仅仅是Dart代码库。

P78 优化package
P79 Plugin开发

P80 热重載挂載

Flutter 热重载原理
1.热重载初探
Flutter是一套全新的跨平台方案，Flutter并不像React Native那样，依赖原生应用的渲染，而是自己有自己的渲染引擎，并使用 Dart 当做Flutter 的开发语言。Flutter 整体框架分为两层，底层是通过 C++ 实现的引擎部分，Skia是Flutter的渲染引擎，负责跨平台的图形渲染。Dart作为 Flutter 的开发语言，在C++ 引擎上层是Dart的 Framework

P81 热重载工具的启动流程
P82 热重載底层找到增量文件

Flutter.framework-dart虚拟机-dart server-dart代码

P83 增量文件传输
P84 热重载和引擎的联调
P85 混合开发
P86 Flutter混合工程构建
P87 CocoaPods
P88 混合工程自动化

深入flutter android ios 鸿蒙...

异步 38-48 80-82热重载源码

GetWidget

github

github.com/SweetDaddy2015

标签：Widget,入门,渲染,Element,Dart,dart,Flutter,进阶
From： https://www.cnblogs.com/KooTeam/p/18606827

Flutter从入门到高级进阶

Flutter从入门到高级进阶

P3 hello_flutter

P6 MaterialApp

P7初探ListView

P8 环境变量配置补充

P11 常用Widget

P12 Flutter布局Row&Column

P14 Stack

P15 Flutter的Widget状态管理

P20发现页面完善

P21 cell点击切换界面

P23 我页面的布局

P30选中索引条

P31 DartSDK向下兼容问题

P34 聊天页面导航条

P36 发送网络请求

P38 初识Future

P39利用FutureBuilder来渲染页面

P41 保持小部件的状态

P42 Dart中的异步编程

P43 Future的错误和状态

P44 多个异步处理

P45 Dart事件循环

P46 Dart中的多线程Isolate

P47 pubspec.yaml文件管理

P48 异步多线程结合

P50封装网路请求&切换项目请求库

P51 自定义searchCell

P52定义SearchPage

P53布局SearchBar

P55 SearchPage显示

P56 关于多线程及异步的总结

P57 Widget生命周期

P58 数据共享InheritedWidget

P59 Widget树&Render树

P60 Element树

P61 StatelessW的Element

P62 StatefulW的Element

P63 Key的作用

P64 GlobalKey的使用

P65 Flutter调用原生页面

P66 image_picker

P67原生嵌入Flutter

P70 Flutter和原生通信

P71 下载引擎源码

P77 package开发

P80 热重載挂載

异步 38-48 80-82热重载 源码

github

相关文章

赞助商

阅读排行

异步 38-48 80-82热重载源码