Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]

Posted 2021-12-21 早起的年轻人-坚果の博客

Flutter 中 stateless 和 stateful widget 的区别

介绍

要在 Flutter 中构建任何应用程序，我们必须创建一个小部件类，它是 Flutter 应用程序的构建块。Flutter 使用小部件来创建现代移动应用程序。

Flutter 中的 Widget 分为两类：无状态 Widget 和有状态 Widget。考虑到这一点，我们将研究 Flutter 中的无状态和有状态小部件，并解释它们的区别。

让我们从这个问题开始：Flutter 中一个小部件的状态是什么？

小部件的状态

状态是在构建期间同步读取小部件类的信息 - 也就是说，当小部件显示在屏幕上并且如果信息在其生命周期内发生更改时可能会发生变化。

Flutter 内置了几个小部件，它们都分为有状态和无状态小部件。

无状态小部件

在 Flutter 应用程序运行期间，无状态小部件无法更改其状态。这意味着在应用程序运行时无法重绘无状态小部件。出于这个原因，外观和属性在小部件的整个生命周期中保持不变。

当我们描述的 UI 部分不依赖于任何其他小部件时，无状态小部件会很有用。无状态小部件的示例是文本、图标、图标按钮和凸起按钮。

这是一个无状态小部件的示例：

class StatelessScreen extends StatelessWidget 
 @override
 Widget build(BuildContext context) 
   return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('坚果前端'),
          backgroundColor: Colors.blueGrey[600],
        ),
        backgroundColor: Colors.white,
        body: Container(),
      ),
    );
  

我们可以看到，在代码中，无状态小部件的名称是StatelessScreen并且它正在覆盖该build方法。该build方法将BuildContext用作参数并返回一个小部件。

当我们创建不需要一次又一次重绘小部件的应用程序时，我们使用无状态小部件。例如，当我们创建一个AppBar](，无状态小部件可以是不需要更改的脚手架或图标。

无状态小部件类仅在初始化时调用一次。即使有外力作用在它上面，它也不会更新。

每当StatelessScreen小部件初始化时，build就会调用该方法。之后，小部件将打印在屏幕上。

但是如果我们希望它在有动作时更新，我们必须制作一个有状态的小部件。

有状态的小部件

当 UI 的某些部分必须在运行时动态更改时，使用有状态小部件。有状态的小部件可以在应用程序运行时多次重绘自己。

当我们描述的 UI 部分动态变化时，有状态小部件很有用。如果我们创建一个按钮小部件，每次用户单击该按钮时都会更新自身，这就是一个有状态小部件。

这是您可以使用有状态小部件的方式：

class StatefulScreen extends StatefulWidget 
  @override
  _StatefulScreenState createState() => _StatefulScreenState();

class _StatefulScreenState extends State<StatefulScreen> 
  String title = 'Original title';
  @override
  Widget build(BuildContext context) 
    return Column(children: [
      Text(title),
      RaisedButton(
          child: Text('Click'),
          onPressed: () 
            setState(() 
              title = 'Changed title';
            );
          )
    ]);
  

我们创建了一个文本字段和一个按钮小部件。

一旦我们调用这个小部件并按下按钮，我们就会让文本字段的值自动改变。

在这种类型的应用程序中，我们可以通过实现. 是一种在有状态小部件类中调用的方法。每次调用时，此方法都会更改有状态小部件的值。setState()``setState()

无状态和有状态的区别

回顾一下我们在上面的例子中所展示的内容，下表描述了无状态和有状态小部件之间的区别：

无状态小部件	有状态的小部件
仅在初始化时更新	动态变化
文本、图标和 RaisedButtons	复选框、单选按钮和sliders
没有. 它将被渲染一次并且不会自行更新setState()	有一个内部并且可以在输入数据更改时重新渲染setState()
静态小部件	动态小部件
除非发生外部事件，否则无法在运行时更新	可以在运行时根据用户操作或数据更改进行更新

请注意，对于要创建的两个小部件，它们都需要BuildContext作为返回小部件的参数。

结论

我们已经介绍了有状态和无状态小部件之间的差异，以帮助您构建更好的 Flutter 应用程序。从示例中，我们了解了无状态和有状态小部件的作用以及如何知道您的用例需要哪个类。

现在，您可以使用针对不同用例的小部件创建更好的 UI。