【Flutter】熟悉官方Demo

footPrint
2,130 阅读3分钟

本篇文章针对Flutter官方Demo进行解读,搭建开发环境属于基本技能,网上有数量众多的文章介绍,在此就不再赘述 (本人使用 Android Studio 进行学习与开发) .

一、工程文件/目录分析

使用Android Studio建立Flutter工程,会自动创建一份包含Android与iOS项目的Demo,首先需要了解的是Flutter工程中各个文件/目录的作用.

官方Demo的目录结构

  • ./android与./ios目录:

    Flutter本身就是为了支持跨平台开发,但是不同平台需要最终生成应用程序都需要使用各自的编译工具编译,所以实际上我们在Flutter上开发后会生成各个平台对应的编译资源.这两个目录是为了存放iOS与Android各自的基础代码而存在的;

  • ./lib/main.dart:

    此文件中包含了当前App的主要逻辑,下个小结针对它进行分析;

  • ./pubspec.yaml:

    此文件是以yaml格式编写的工程配置文件,里面包含了工程的基础信息,主要包括:

    标签 说明
    name 工程名称
    description 工程描述
    version 应用版本号
    environment 开发环境版本号
    dependencies 依赖项,包括flutter,也可以添加各种依赖包 ,添加打包资源(Asset)等

二、main.dart代码分析

因为我原本是Android开发,沉醉在Android可视化UI构建的熏陶下,初看到Flutter这种混合着页面UI结构代码和业务逻辑代码的形式一时有点难以接受.不过目前官方貌似不急着提供一套类似于Android这种形式的可视化UI工具,搜索了一下是有一些第三方的工具能直接生成UI结构代码,但是都不怎么样完美.所以还是接受这种形式的开发为好.

以下是在阅读官方Demo的过程后,整理过并添加了注释的代码,已经单独抽取为一个分支

  • 查看代码
  • clone到本地的同学可以切换到"熟悉官方Demo"分支查看

    git -c core.quotepath=false -c log.showSignature=false checkout 熟悉官方Demo --


三、整理疑问(持续完善)

阅读完代码之后,我整理了一些疑问点:

  • StatelessWidget与StatefulWidget有什么区别?
    • StatelessWidget需要重写build()函数,而StatefulWidget需要重写createState()函数;
    • ...

  • StatelessWidget与State实现类的build()函数入参BuildContext是什么?
    Debug模式下通过断点,能够追溯到:
    • MyApp的build()函数传入的是StatelessElement实例;
    • _MyHomePageState的build()函数传入的是StatefulElement实例;

  • 运行App后,点击右下角浮动按钮,并没有直接通知Text实例刷新,为什么文本数值会有变化?
    产生点击事件后,会调用setState()函数,简单查看此函数的实现:
  @protected
  void setState(VoidCallback fn) {
      assert(fn != null);
      assert(...);
      // 1、执行回调
      final dynamic result = fn() as dynamic;
      assert(...);
      // 2、标记element需要构建
      _element.markNeedsBuild();
  }
  // 此函数首先执行了传入的回调函数,对应Demo中的业务函数,
  // 然后调用了_element字段的markNeedsBuild()函数,
  // Debug断点,当前这个_element实例是一个映射着MyHomePage的StatefulElement
  // 由此可以猜测,这个函数执行后会将页面刷新,进一步来说,此页面应该不会整个刷新,
  // 而是会最终定位到具体的文本元素,单独刷新这个元素
  • 目前为止出现了多个类,确定各个类实例的职责是什么?
    • Widget: 持有静态数据,搭建结构框架,形成嵌套关系(树形),构建State或Element;
    • State: 持有动态数据,构造时绑定一个Element实例;
    • Element: 目前了解到的是他能够被标记为需要重建,与视图构建有关系;

GO TO:   index  ·····  < previous  next >

avatar
文章
阅读
粉丝