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

简介: Flutter 中 stateless 和 stateful widget 的区别介绍要在 Flutter 中构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序的构建块。Flutter 使用小部件来创建现代移动应用程序。

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()


无状态和有状态的区别

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

image.png

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


结论

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


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


相关文章
|
11天前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
3月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
163 0
|
4月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
40 0
|
5月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
5月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
71 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
5月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
73 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
5月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
5月前
|
前端开发 开发者 UED
Flutter的自定义Painter:深入探索自定义绘制Widget的技术实现
【4月更文挑战第26天】Flutter的自定义Painter允许开发者根据需求绘制独特UI,通过继承`CustomPaint`类和重写`paint`方法实现。在`paint`中使用`Canvas`绘制图形、路径等。创建自定义Painter类后,将其作为`CustomPaint` Widget的`painter`属性使用。此技术可实现自定义形状、渐变、动画等复杂效果,提升应用视觉体验。随着Flutter的进化,自定义Painter将提供更丰富的功能。
|
5月前
|
开发框架 搜索推荐 Android开发
Flutter的Widget基础:概念、分类与深入探索
【4月更文挑战第26天】Flutter Widget详解:基础、分类与工作原理。Widget是Flutter UI的核心,描述界面外观而非直接渲染。分为基础、布局、可滚动及状态管理四大类。基于响应式编程,状态变化时自动更新UI。了解其概念、分类和原理,能助开发者高效构建精美应用。随着Flutter生态发展,Widget系统潜力无限。
|
Dart 前端开发 JavaScript
掌握这个关键技术,让你的APP开发事半功倍!——Flutter与其他方案的区别
掌握这个关键技术,让你的APP开发事半功倍!——Flutter与其他方案的区别
78 0