flutter入门序章

本系列文章共有三篇，计划分别从Flutter、Dart、工具三个方面介绍，快速形成对Flutter开发的一个综合概念。

本文主要介绍Flutter相关知识。

Flutter语言使用 Dart，开发IDE使用VSCode、Android Studio 或 IntelliJ IDEA，个人推荐使用VSCode。

Flutter概览

Flutter是由Google开发的开源移动应用开发框架，用于快速构建高性能、高保真度的跨平台移动应用。Flutter支持同一套代码在 iOS、Android、Web、桌面应用等多个平台上运行，使用自带的 Skia 图形引擎，可以直接绘制 UI 组件，这使得 Flutter 应用在性能方面表现出色，滚动流畅，响应迅速（目前正在使用 Impeller 替换 Skia）。

看一眼有个印象即可。

参考资料

• flutter架构f
• lutter简介

三棵树

Flutter的渲染机制由三棵树组成：Widget Tree、Element Tree、Render Tree（渲染树）。

所有Widget组成Widget Tree。

通过调用Widget的createElement()方法，创建Element Tree，Wdiget Tree与Element Tree是一一对应的。

每个Element调用 createRenderObject()形成Render Tree，Render Tree负责渲染，注意Render Tree与Elemeng Tree并不是一一对应的，而是为最后渲染做准备。

StatelessWidget

// StatelessWidget 定义
abstract class StatelessWidget extends Widget {
  const StatelessWidget({ super.key });

  @override
  StatelessElement createElement() => StatelessElement(this);
  
  // 核心是 build 方法
  @protected
  Widget build(BuildContext context);
}

// 示例，Echo widget，核心是build方法构建UI
class Echo extends StatelessWidget  {
  const Echo({
    Key? key,  
    required this.text,
    this.backgroundColor = Colors.grey, //默认为灰色
  }):super(key:key);
    
  final String text;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: backgroundColor,
        child: Text(text),
      ),
    );
  }
}



// 在子树中获取父级widget的一个示例：
class ContextRoute extends StatelessWidget  {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Context测试"),
      ),
      body: Container(
        child: Builder(builder: (context) {
          // 在 widget 树中向上查找最近的父级`Scaffold`  widget
          Scaffold scaffold = context.findAncestorWidgetOfExactType<Scaffold>();
          // 直接返回 AppBar的title， 此处实际上是Text("Context测试")
          return (scaffold.appBar as AppBar).title;
        }),
      ),
    );
  }
}

StatefulWidget

StatefulWidget的核心就是有状态，可以修改重绘UI。

StatefulWidget重写了createElement方法，返回的是StatefulElement，StatefulElement可能会多次调用createState()来创建对象。

createState()，创建状态，修改UI必须通过修改状态来实现，一个StatefulElement对应一个State实例。

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
    
  @override
  StatefulElement createElement() => StatefulElement(this);
    
  @protected
  State createState();
}