Flutter学习四：Flutter开发基础（一）Widget

Widget 简介

0 引言

本文是对 Flutter Widget 相关知识的学习和总结。

1 Widget 概念

1.1 Widget 基础

• Widget 字面意思：控件、组件、部件、微件、插件、小工具
• widget 的功能是"描述一个UI元素的配置信息"，所谓的配置信息就是 Widget 接收的参数
• Widget 只是描述一个UI元素的配置信息，并不是表示最终绘制在设备屏幕上的显示元素

1.2 Widget 接口

• @immutable 代表 Widget 是不可变的，即Widget 中定义的属性必须是 final。
• widget类继承自DiagnosticableTree，即"诊断树"，主要作用是提供调试信息。
• Key属性类似于 React/Vue 中的key，主要的作用是决定是否在下一次build时复用旧的 widget
• createElement():一个 widget 可以对应多个Element,Flutter框架在构建UI树时，会先调用此方法生成对应节点的Element对象。

@immutable
abstract class Widget extends DiagnosticableTree {const Widget({ this.key });final Key? key;@protected@factoryElement createElement();@overrideString toStringShort() {final String type = objectRuntimeType(this, 'Widget');return key == null ? type : '$type-$key';}static bool canUpdate(Widget oldWidget, Widget newWidget) {return oldWidget.runtimeType == newWidget.runtimeType&& oldWidget.key == newWidget.key;}...
}

1.3 Flutter中的四棵树

Flutter 框架的处理流程：（真正的布局、绘制是由谁来完成的）

1. 根据 Widget 树生成一个 Element 树，Element 树中的节点都继承自 Element 类。
2. 根据 Element 树生成 Render 树（渲染树），渲染树中的节点都继承自RenderObject 类。
3. 根据渲染树生成 Layer 树，然后上屏显示，Layer 树中的节点都继承自 Layer 类。

• Flutter 真正的布局和渲染逻辑在 Render 树中
• Element 是 Widget 和 RenderObject 的粘合剂，可以理解为一个中间代理。

1.4 StatelessWidget

1.4.1 简介

• 无状态的组件，用于不需要维护状态的场景
• 继承自widget类，重写了createElement()方法
• 通常在build方法中通过嵌套其他 widget 来构建UI

class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return Echo(text: "hello world");}
}class Echo extends StatelessWidget  {const Echo({Key? key,required this.text,this.backgroundColor = Colors.grey,}):super(key:key);final String text;final Color backgroundColor;@overrideWidget build(BuildContext context) {return Center(child: Container(color: backgroundColor,child: Text(text),),);}
}

1.4.2 Context上下文

• build方法有一个context参数
• 它是BuildContext类的一个实例，表示当前 widget 在 widget 树中的上下文
• 每一个 widget 都会对应一个 context 对象
• 它提供了从当前 widget 开始向上遍历 widget 树的方法

class ContextRoute extends StatelessWidget  {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("Context测试"),),body: Container(child: Builder(builder: (context) {Scaffold scaffold = context.findAncestorWidgetOfExactType<Scaffold>();return (scaffold.appBar as AppBar).title;}),),);}
}

1.5 StatefulWidget

• 有状态的组件，用于需要维护状态的场景
• 继承自widget类，重写了createElement()方法
• 添加了一个新的接口createState()
• State 对象和StatefulElement具有一一对应的关系

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

1.6 State

1.6.1 简介

一个 StatefulWidget 类会对应一个 State 类 ，State表示与其对应的 StatefulWidget要维护的状态，State 中保存的状态信息可以：

1. 在 widget 构建时可以被同步读取。
2. 在 widget 生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知Flutter框架状态发生改变。

1.6.2 State生命周期

• **initState：**当 widget 第一次插入到 widget 树时会被调用
• **didChangeDependencies()：**当State对象的依赖发生变化时会被调用
• **build()：**用于构建 widget 子树
• **reassemble()：**专门为了开发调试而提供的，在热重载(hot reload)时会被调用
• **didUpdateWidget()：**在 widget 重新构建时调用
• **deactivate()：**当 State 对象从树中被移除时调用
• **dispose()：**当 State 对象从树中被永久移除时调用

class CounterWidget extends StatefulWidget {const CounterWidget({Key? key, this.initValue = 0});final int initValue;@override_CounterWidgetState createState() => _CounterWidgetState();
}class _CounterWidgetState extends State<CounterWidget> {int _counter = 0;@overridevoid initState() {super.initState();_counter = widget.initValue;print("initState");}@overrideWidget build(BuildContext context) {print("build");return Scaffold(body: Center(child: TextButton(child: Text('$_counter'),onPressed: () => setState(() => ++_counter),),),);}@overridevoid dispose() {super.dispose();print("dispose");}
}

1.7 在 widget 树中获取State对象

在子 widget 树中获取父级 StatefulWidget 的State 对象的两种方法：

1. 通过Context获取
2. 通过GlobalKey获取

1.7.1 通过Context获取

// 通过context.findAncestorStateOfType获取ScaffoldState
ScaffoldState _state = context.findAncestorStateOfType<ScaffoldState>()!;
_state.openDrawer();// 通过of静态方法来获取ScaffoldState
ScaffoldState _state=Scaffold.of(context);
_state.openDrawer();

1.7.2 通过GlobalKey获取

// 1.给目标StatefulWidget添加GlobalKey
static GlobalKey<ScaffoldState> _globalKey= GlobalKey();
...
Scaffold(key: _globalKey,...  
)// 2.通过GlobalKey来获取State对象
_globalKey.currentState.openDrawer()

1.8 通过 RenderObject 自定义 Widget

• Flutter 最原始的定义组件的方式是通过定义RenderObject 来实现的。
• StatelessWidget 和 StatefulWidget 本身没有对应的RenderObject

class CustomWidget extends LeafRenderObjectWidget{@overrideRenderObject createRenderObject(BuildContext context) {return RenderCustomObject();}
}class RenderCustomObject extends RenderBox{@overridevoid performLayout() {// 实现布局逻辑}@overridevoid paint(PaintingContext context, Offset offset) {// 实现绘制}
}

1.9 Flutter SDK内置组件库介绍

Flutter 提供了一套丰富、强大的基础组件库，在基础组件库之上 Flutter 又提供了：

• 一套 Material 风格（ Android 默认的视觉风格）的组件库
• 一套 Cupertino 风格（iOS视觉风格）的组件库

1.9.1 基础组件

常用基础组件：

• Text：创建带格式的文本
• Row、Column：在水平和垂直方向上创建灵活的布局
• Stack：允许子 widget 堆叠
• Container：创建矩形视觉元素

1.9.2 Material组件

import 'package:flutter/material.dart';

• 帮助构建遵循 Material Design 设计规范的应用程序
• Material 应用程序以MaterialApp 组件开始

1.9.3 Cupertino组件

import 'package:flutter/cupertino.dart';

• 提供了一套丰富的 Cupertino 风格的组件
• 仍在不断的完善中

class CupertinoTestRoute extends StatelessWidget  {const CupertinoTestRoute({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return CupertinoPageScaffold(navigationBar: const CupertinoNavigationBar(middle: Text("Cupertino Demo"),),child: Center(child: CupertinoButton(color: CupertinoColors.activeBlue,child: const Text("Press"),onPressed: () {}),),);}
}

1.10 总结

• Flutter 的 widget 类型分为StatefulWidget 和 StatelessWidget 两种
• Flutter 提供了丰富的组件，dart 在编译时只会编译你使用了的代码
• 由于 Material 和 Cupertino 都是在基础组件库之上的，所以如果我们的应用中引入了这两者之一，则不需要再引入flutter/widgets.dart了

对于iOS开发者来说，在开发Flutter应用时，可以使用appuploader工具来简化应用的上传和发布流程。appuploader是一款专业的iOS开发助手，可以帮助开发者快速完成应用打包、证书管理和App Store上传等工作，大大提高了开发效率。