Flutter开发进阶之瞧瞧Widget

本文主要是介绍Flutter开发进阶之瞧瞧Widget，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Flutter开发进阶之瞧瞧Widget

在Flutter开发中，WIdget是构建界面的基本单元；Widget是不可变的，意味着一旦创建如果需要改变UI就需要重新创建一个新的Widget；在实际开发中，Widget通常由一个个Widget组合而成，从而形成嵌套的树形结构，复杂的UI就是由这一个个Widget构建而成；Widget分为有状态和无状态，无状态Stateless根据输入参数渲染UI，有状态Stateful可以管理自己的状态并重建UI。
这篇文章将通过解析Widget的构成去理解Widget。
Flutter开发进阶之瞧瞧Widget

Widget

@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';}@overridevoid debugFillProperties(DiagnosticPropertiesBuilder properties) {super.debugFillProperties(properties);properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.dense;}@override@nonVirtualbool operator ==(Object other) => super == other;@override@nonVirtualint get hashCode => super.hashCode;static bool canUpdate(Widget oldWidget, Widget newWidget) {return oldWidget.runtimeType == newWidget.runtimeType&& oldWidget.key == newWidget.key;}static int _debugConcreteSubtype(Widget widget) {return widget is StatefulWidget ? 1 :widget is StatelessWidget ? 2 :0;}
}

以上是系统源码，可以看到Widget本身是@immutable，意思是不可变的，这与我们的猜想一致。
Widget继承自DiagnosticableTree说明Widget允许以树形组织呈现诊断信息，DiagnosticableTree混合了Diagnosticable的抽象类，它是Flutter框架用于调试和诊断的工具之一，通过DiagnosticableTree可以方便查看和理解应用内部状态以及问题的根源。
Widget默认带有属性key，通过查看Key的源码，以下。

@immutable
abstract class Key {const factory Key(String value) = ValueKey<String>;@protectedconst Key.empty();
}

同上，Key也是不可变的，默认的Key为ValueKey ，通过查看ValueKey的源码，以下。

class ValueKey<T> extends LocalKey {const ValueKey(this.value);final T value;@overridebool operator ==(Object other) {if (other.runtimeType != runtimeType) {return false;}return other is ValueKey<T>&& other.value == value;}@overrideint get hashCode => Object.hash(runtimeType, value);@overrideString toString() {final String valueString = T == String ? "<'$value'>" : '<$value>';if (runtimeType == _TypeLiteral<ValueKey<T>>().type) {return '[$valueString]';}return '[$T $valueString