Android Studio 效率开发Flutter技巧(不定期更新)

3,276 阅读4分钟

1.Android Studio开发Flutetr快捷键

  • option(alt) + enter:选中StatelessWidget转换为StatefulWidget
  • option(alt) + enter:选中Widget外层包裹上某Widget
  • option(alt) + enter:将选中的Widget移除不影响内部。(这个组合快捷键可以做很多事情)。
  • AS右侧的FlutterLine选中控件选择extract xxx:将相关的代码提取成一个方法或者build内部出来的Widget抽取到一个单独的Widget
  • AS右侧的FlutterLine,选中children点击^V调整:上下移动调整children的顺序。
  • commond + option(alt) + b:查看抽象类的所有实现类。
  • command+n:快速生成getter,setter,toString,construtor等方法。

2.Flutter图像是怎样渲染出来的

不需要经过中间状态,跳过了原生框架,直接通过skia引擎给GPUCPU提供数据。skia(c++库)谷歌官方图形渲染引擎。

3.StatelessWidgetStatefulWidget的区别

通过观察Widget的源码可以发现

@immutable
abstract class Widget extends DiagnosticableTree {
	// ...省略代码
}

@immutable注解标明的类或者子类都必须是不可变的,所以开发中定义到Widget中的数据是不可变的,需要用final来修饰。

3.1 StatelessWidget:没有状态需要维护的widget

  • 它们的数据通常是直接写死;从parent widget中传入的而且一旦传入就不可以修改;从InheritedWidget获取来使用的数据。
  • 执行build方法时机:
    当我们的StatelessWidget第一次被插入到Widget树中时(也就是第一次被创建时);当我们的父Widget(parent widget)发生改变时,子Widget会被重新构建;如果我们的Widget依赖InheritedWidget的一些数据,InheritedWidget数据发生改变时;

3.2 StatefulWidget:有状态的widget

既然Widget是不可变,那么StatefulWidget如何来存储可变的状态呢?

  • FlutterStatefulWidget设计成了两个类:一个类继承自StatefulWidget,作为Widget树的一部分;一个类继承自State,用于记录StatefulWidget会变化的状态,并且根据状态的变化,构建出新的Widget
  • Flutter在构建Widget Tree时,会获取State的实例,并且它调用build方法去获取StatefulWidget希望构建的Widget;将需要保存的状态保存在State中。
  • StatefulWidget的生命周期:从创建~销毁的过程
    首先,执行StatefulWidget中相关的方法:
    • 执行StatefulWidget的构造函数(Constructor)来创建出StatefulWidget
    • 执行StatefulWidgetcreateState方法,来创建一个维护StatefulWidgetState对象;
      其次,调用createState创建State对象时,执行State类的相关方法:
    • 执行State类的构造方法(Constructor)来创建State对象;
    • 执行initState,我们通常会在这个方法中执行一些数据初始化的操作,或者也可能会发送网络请求;
    • 执行didChangeDependencies方法,这个方法在两种情况下会调用:调用initState会调用;从其他对象中依赖一些数据发生改变时,比如前面我们提到的InheritedWidget.
    • Flutter执行build方法,来看一下我们当前的Widget需要渲染哪些Widget;
    • 当前的Widget不再使用时,会调用dispose进行销毁;
    • 手动调用setState方法,会根据最新的状态(数据)来重新调用build方法,构建对应的Widgets
    • 执行didUpdateWidget方法是在当父Widget触发重建(rebuild)时,系统会调用didUpdateWidget方法;
    • 复杂版标记(具体看源码去吧):mountedState内部设置的一个属性;dirty stateelement的一个属性,标记强制调用build来构建widget;clean state当前build出来的Widget,下一次重绘检查时不需要重新build。

4.buildContext是什么

其实buildContext 就是就是一个抽象类,其中有两个方法,一个是返回一个widget,一个是返回buildOwner。一切皆widget,我们通过构建嵌套widget来编写UI界面,但是widget并不是真正显示在屏幕上的东西,他只是配置信息而已。他总是不可变的,并且可在多处复用的。那真正显示在视图上的是什么呢,那就是视图树 element tree

  • 我们在build函数中所使用的context,其实可以理解为当前widget所创建的Element对象。
  • StatelessWidget : 继承 widget, 里面一个重写方法createElement返回 StatelessElement。将这个StatelesseElement对象挂载到element树上。StatelessElement 继承 ComponentElement ,里面有build 方法 , 传入thiselement自身作为BuildContext传入。ComponentElement 继承 Element,BuildContext 接口用于阻止对 Element 对象的直接操作。
  • StatefulWidget:首先同样也是调用StatefulWidgetcreateElement方法,并根据这个widget生成StatefulElement对象,并保留widget引用。将这个StatefulElement挂载到Element树上。根据widget的 createState 方法创建StateStatefulElement对象调用statebuild方法,并将element自身作为BuildContext传入。

5.Flutter三棵树(渲染流程)

5.1 Widget

  • Widget就是一个个描述文件,这些描述文件在我们进行状态改变时会不断的build。框架会和之前的描述进行对比,使用最小的开销来更新渲染界面。

5.2 Element

  • Element是一个Widget的实例在树中详细的位置
  • Widget描述和配置子树的样子,而Element实际去配置在Element树中特定的位置。

5.3 RenderObject

  • 渲染树上的一个对象
  • RenderObject层是渲染库的核心

6.flutter_boost底层原理

7.插件化

8.图片展示优化(外接纹理)