flutter 开发环境配置和生命周期学习

原创

已于 2024-02-29 14:27:08 修改 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #前端

于 2020-03-24 21:53:11 首次发布

本文深入探讨了Flutter环境配置的细节，包括Gradle、PUB_HOSTED_URL、PUB_CACHE等关键设置，并全面解析了Flutter应用的生命周期，从页面展示、前后台切换到页面销毁的全过程。同时，详细分析了State、Element、BuildOwner等核心组件在生命周期中的作用。

文章目录

配置环境

1. resolve.dependencies.gradle

Flutter安装目录/packages/flutter_tools/gradle/resolve.dependencies.gradle

maven {
url "https://maven.aliyun.com/repository/public/"
}
maven {
url "https://maven.aliyun.com/repository/central"
}
maven {
url "https://maven.aliyun.com/repository/google"
}

2. PUB_HOSTED_URL

https://pub.flutter-io.cn

3. PUB_CACHE 如果项目和flutterSDK不在同一盘符，就需要配置该变量，目录指向项目所在的盘符

D:\src\flutter_pub_cache

4. FLUTTER_STORAGE_BASE_URL

https://storage.flutter-io.cn

5. 终端代理命令

export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:7890

6. 其他

xxx_android.iml 该文件可以让as 提示Open for Editing in Android Studio

settings.gradle 定义了dev.flutter.flutter-gradle-plugin插件

生命周期

WidgetsBindingObserver（AppLifecycleState）
AppLifecycleListener
State

页面展示

构造方法->initState->didChangeDependencies-build(到这一步页面展示出来了)
AppLifecycleState.resumed

前台切回后台

AppLifecycleState.inactive->AppLifecycleState.hidden
->AppLifecycleState.paused
AppLifecycleListener.inactive->AppLifecycleListener.hide
->AppLifecycleListener.pause

后台切回前台

AppLifecycleState.hidden->AppLifecycleState.inactive
->AppLifecycleState.resumed
AppLifecycleListener.restart->AppLifecycleListener.show
->AppLifecycleListener.resume

页面销毁

AppLifecycleState.inactive->AppLifecycleState.hidden->AppLifecycleState.paused->AppLifecycleState.detached->deactivate->dispose
AppLifecycleListener.hide->AppLifecycleListener.pause->AppLifecycleListener.detach

源码分析生命周期

ui的重绘都需要Widget的构建，也是就调用State.build或者StateLessWidget.build方法，
Element->markNeedsBuild-标记_dirty=true

调用Element.markNeedsBuild几个方法

开发者直接调用
State.setState

修改依赖属性，会导致依赖发生变化
InheriteWidget-update-updated-notifyClients-notifyClient-dependent.didChangeDependencies
Eelement.didChangeDependencies

StateFulElement.activate

ComponentElement.mount()->StatefulElement._firstBuild->state.initState()->state.didChangeDependencies()->rebuild()->StatefulElement.performRebuild()->第一次不会调用state.didChangeDependencies()因为_didChangeDependencies=fasle,后面会通过调用activited->state.activate()并且调用StatefulElement.didChangeDependencies()方法_didChangeDependencies = true

update->state.didUpdateWidget->rebuild->…

RenderObjectToWidgetElement->update->…

didUpdateWidget

自身state会导致自身build方法调用

父state会导致非const子组件的didUpdateWidget调用

didChangeDependencies

InheritedWidget共享数据发生变化的时候

获取共享数据用到的context 对应的state的

通过父widget的setstate更新依赖的数据导致子组件的state.didChangeDependencies

BuildOwner通过StatefulElement间接驱动了state各个生命周期的触发

StatefulElement

class StatefulElement extends ComponentElement {
   
   
  StatefulElement(StatefulWidget widget)
      : _state = widget.createState(),
        super(widget) {
   
   
    state._element = this;
    state._widget = widget;
  }

  @override
  Widget build() => state.build(this);
  State<StatefulWidget> get state => _state!;
  State<StatefulWidget>? _state;

  @override
  void reassemble() {
   
   
    if (_debugShouldReassemble(_debugReassembleConfig, _widget)) {
   
   
      state.reassemble();
    }
    super.reassemble();
  }

  @override
  void _firstBuild() {
   
   
    assert(state._debugLifecycleState == _StateLifecycle.created);
    final Object? debugCheckForReturnedFuture = state.initState() as dynamic;
    state.didChangeDependencies();
    super._firstBuild();
  }

  @override
  void performRebuild() {
   
   
    if (_didChangeDependencies) {
   
   
      state.didChangeDependencies();
      _didChangeDependencies = false;
    }
    super.performRebuild();
  }

  @override
  void update(StatefulWidget newWidget) {
   
   
    super.update(newWidget);
    final Object? debugCheckForReturnedFuture = state.didUpdateWidget(oldWidget) as dynamic;
    rebuild(force: true);
  }

  @override
  void activate() {
   
   
    super.activate();
    markNeedsBuild();
  }

  @override
  void deactivate() {
   
   
    state.deactivate();
    super.deactivate();
  }

  @override
  void unmount() {
   
   
    super.unmount();
    state.dispose();
    state._element = null;
    _state = null;
  }

  @override
  InheritedWidget dependOnInheritedElement(Element ancestor, {
   
    Object? aspect }) {
   
   
    return super.dependOnInheritedElement(ancestor as InheritedElement, aspect: aspect);
  }

  bool _didChangeDependencies = false;

  @override
  void didChangeDependencies() {
   
   
    super.didChangeDependencies();
    _didChangeDependencies = true;
  }

}

State

@optionalTypeArgs
class State {
   
   

  T get widget => _widget!;
  T? _widget;

  BuildContext get context {
   
   
    assert(() {
   
   
      if (_element == null) {
   
   
       
      }
      return true;
    }());
    return _element!;
  }
  StatefulElement? _element;

  bool get mounted => _element != null;

  @protected
  @mustCallSuper
  void initState() {
   
   
    assert(_debugLifecycleState == _StateLifecycle.created);
  }
  
  @mustCallSuper
  @protected
  void didUpdateWidget(covariant T oldWidget) {
   
    }

  
  @protected
  @mustCallSuper
  void

最低0.47元/天解锁文章