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
  @factory
  Element createElement();

  @override
  String 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});

  @override
  Widget 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;

  @override
  Widget 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  {
  @override
  Widget 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);
    
  @override
  StatefulElement createElement() => StatefulElement(this); 

  @protected
  State 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;

  @override
  void initState() {
    super.initState();
    _counter = widget.initValue;
    print("initState");
  }

  @override
  Widget build(BuildContext context) {
    print("build");
    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('$_counter'),
          onPressed: () => setState(() => ++_counter),
        ),
      ),
    );
  }

  @override
  void 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{
  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderCustomObject();
  }
}

class RenderCustomObject extends RenderBox{
  @override
  void performLayout() {
    // 实现布局逻辑
  }

  @override
  void 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);

  @override
  Widget 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上传等工作，大大提高了开发效率。