简介

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

Flutter中的部件被分为两种类型：无状态部件和有状态部件。考虑到这一点，我们将看看Flutter中的无状态和有状态部件是什么，并解释它们的区别。

让我们从这个问题开始。在Flutter中，widget的状态是什么？

小组件的状态

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

Flutter有几个内置的小组件，它们都被分为有状态和无状态小组件。

无状态小组件

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

当我们所描述的用户界面的一部分不依赖于任何其他部件时，无状态部件就很有用。无状态部件的例子是文本、图标、图标按钮和凸起按钮。

这是一个无状态部件的例子。

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

我们可以看到，在代码中，无状态小组件的名字是StatelessScreen ，它覆盖了build 方法。build 方法接受BuildContext 作为参数，并返回一个 widget。

当我们创建一个不需要反复重绘部件的应用程序时，我们会使用一个无状态的部件。例如，当我们创建一个AppBar ，一个无状态的widget可以是不需要改变的脚手架或图标。

一个无状态的widget类被调用一次，只在它被初始化的时候。即使有外部力量作用于它，它也不会被更新。

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

但是，如果我们想让它在有动作时被更新，我们必须做一个有状态的部件。

有状态的部件

当用户界面的某些部分必须在运行时动态变化时，就会使用一个有状态的部件。有状态的部件可以在应用程序运行时多次重绘自己。

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

这就是你如何使用一个有状态的部件。

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 复选框、单选按钮和滑块
没有一个setState() 。它将被渲染一次，不会自我更新。 有一个内部的setState() ，如果输入数据发生变化，可以重新渲染。
静态小组件 动态小组件
在运行期间不能更新，除非有外部事件发生 可以在运行期间根据用户行动或数据变化进行更新

请注意，对于这两个小组件的创建，他们需要BuildContext ，作为返回小组件的一个参数。

总结

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

现在，你可以用小部件为不同的用例创建一个更好的用户界面。

The post Thedifference between stateless and stateful widgets in Flutterappeared first onLogRocket Blog.