Flutter – 小部件树和元素树

众所周知，在Flutter中设计的应用程序的用户界面包含一组小部件。这意味着整个应用程序都设置为由小部件组成。小部件描述了应用程序视图在给定状态下的外观。

现在，由于用户界面包含多个小部件，因此将这几个小部件组合起来形成一个小部件树。现在，对于用户创建的每个小部件， flutter框架会同时创建一个元素，因此现在将这些元素组合在一起称为元素树。

这意味着小部件树具有所有小部件配置，元素树具有屏幕上所有呈现的小部件。还有一棵名为渲染树的树，但用户不必与它进行交互。渲染树基本上是一个从渲染对象继承的低级布局、绘制系统。您不需要直接继承到渲染树，您将与小部件进行交互。

现在，根据用户为其代码选择的小部件，小部件树也可以分为 2 个小树。

1. 无状态小部件树
2. 有状态的小部件树

无状态小部件和元素树：

无状态小部件是用户用来创建非动态应用程序的小部件。无状态小部件由几个小部件组合而成。此处创建的每个小部件都将具有相应的无状态元素。所以在无状态小部件下组合的几个小部件将被称为无状态小部件树，相应的元素将构成一个元素树。 Flutter使用createElement方法来创建元素。创建的每个元素都有一个由flutter后端分配的唯一 id。

以下是示例代码：

Dart

class TextList extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return Row(
      children: [
        Icon(),
        Text(),
      ],
    );
  }
}

在这段代码中，我们创建了一个名为 TextList 的简单类，它扩展了无状态小部件，其中包含其他几个小部件，如行、图标和文本。对于这个小部件树中的每个小部件，都会创建一个无状态元素，这些元素的组合使其成为一个元素树。

有状态的小部件和元素树：

有状态小部件是用户用来创建动态应用程序的小部件。有状态小部件的工作方式也与无状态小部件类似，但这里当框架调用createElement方法时，会创建一个状态对象。创建状态对象背后的原因是，由于这必须是一个动态应用程序，因此状态会发生变化，同时保持先前状态不受损害并提高性能。

我们使用setState方法来设置新数据值或更新状态对象。

setState ( ( ) {
   name = _newvalue;
});

以下是示例代码：-

Dart

class _TextListState extend State {
  String note = 'Trip A';
  void _onPressed() {
    setState( () {
      note = 'Trip B';
    });
  }
    
  @override
  Widget build (BuildContext xontext){
    return Column(
      children :  [
        Icon();
        Text('$note),
        FlatButton(
         onPressed : _onPressed,
        ),
      ],
    );
  }
}

在此代码中，我们创建了扩展状态TextList 的_TextListState类。我们使用了setState方法，因为即使在更改状态之后，我们也必须保持元素树中的初始状态。