Flutter—SomeTips03

1：Dart 的两个队列分别是

• Event queue 事件队列

• MicroTask queue 微任务队列

其 执行顺序是

flutter 任务队列执行顺序

void textFuture2() {

  print('外部代码1');

  Future(() => print('A')).then((value) => print('A结束'));

  Future(() => print('B')).then((value) => print('B结束'));

  //微任务 优先级更高些，加入队列的 任务事件 和 微任务 ，优先处理微任务

  scheduleMicrotask((){

    print('微任务A');

  });

  sleep(Duration(seconds: 1));

  print('外部代码2');

}

2: 多线程 Isolate

//Isolate 看起来更加像进程.因为有独立的内存空间!

//它的好处是:不用担心多线程的资源抢夺问题!不需要锁!

//Isolat 非常底层.

void test0001() async {

  ReceivePort port = ReceivePort();

  Isolate iso = await Isolate.spawn(func1, port.sendPort);

  port.listen((message) {

    a = message;

    print(a);

    // 需要关闭 port close  和 ISO kill

    port.close();

    iso.kill();

  });

}

3: 多线程 compute 异步操作

void computeTest() {

  print('外部代码1');

  compute(func2, 1000).then((value) => print(value));

  print('外部代码2');

//  flutter: 外部代码1

//  flutter: 外部代码2

//  Reloaded 6 of 576 libraries in 303ms.

//  flutter: 2345

}

int func2(int message) {

  sleep(Duration(seconds: 1));

  return 2345;

}

4：Timer 创建 取消

void testTimer() {//创建

  int _count = 0;

  _timer = Timer.periodic(Duration(seconds: 1), (timer){

    print(Isolate.current.debugName);

    print('${_count++}' + 's');

    if(_count == 99){timer.cancel();}

  });

}

@override

void dispose() {// 销毁  

  //取消我们的timer

  if(_timer != null && _timer.isActive){

    _timer.cancel();

  }

  super.dispose();

}

PS：Future 源码就是一个Timer.run()的调用，是异步的。

5：Dio 网络请求库

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等…

Dio:https://github.com/flutterchina/dio/blob/master/README-ZH.md

6: 快捷键 抽出代码 抽出成函数

option + command + m

7：每个page页面，保持state page, keep alive 固有状态，

1. class _FriendPageState extends State<FriendPage> with AutomaticKeepAliveClientMixin {

2. @override //

bool get wantKeepAlive => true;// 重写get方法，置为true

3. Build 方法添加 super.build(context);

4. RootPage 页面设置 PageView（） 来自承载各个pages。

return PageView(

        controller: _pageController,

        children: _pages,

        physics: NeverScrollableScrollPhysics(),//禁止左右滑动

//        onPageChanged: (int index){//页面滚动变化时调用

//          setState(() {

//            _currentIndex = index;

//          });

//        },

      )

_pageController.jumpToPage(index);

8：输入框 widget 用法 TextField TextEditingController

final TextEditingController _controller = TextEditingController();

return TextField(

  controller: _controller,

  onChanged: (value){

    valueOnChange(value);

  },

  autofocus: true,

  cursorColor: Colors.green,

  style: TextStyle(fontSize: 18,color: Colors.black),

  decoration: InputDecoration(

    contentPadding: EdgeInsets.only(left: 5,bottom: 10),

    hintText: '搜索',

    border: InputBorder.none,

  ),

),

9：数据共享， 单例实现，多层widget 数据共享。

class MyData extends InheritedWidget {

  final int data;//需要在子Widget中共享的数据

  const MyData(this.data, {
    Key key,
    @required Widget child,
  })  : assert(child != null),
        super(key: key, child: child);

  //提供一个方法让子Widget访问的共享数据
  static MyData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyData>();
//    return context.inheritFromWidgetOfExactType(MyData) as MyData;
  }

  @override
  bool updateShouldNotify(MyData old) {
    return old.data != data ;
  }
}

在其他Widget中，直接调用MyData.of(context).data 可获取data数据，实现data共享，类似iOS中的单例模式。

10：Widget继承关系

仅仅只有4个，（还有一个抽象类）

Widget继承关系

11：生命周期&渲染原理

Flutter生命周期&渲染原理

11：Widget Tree：有三个，Widget树，Element树（中间者，Flutter是增量渲染，主要在Element树间区分增量，再重新渲染），Render树。**

Widget树

Render树