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。


相关文章
|
29天前
深入理解Flutter鸿蒙next版本 中的Widget继承:使用extends获取数据与父类约束
本文详细介绍了Flutter中如何通过继承其他Widget来创建自定义组件。首先解释了Widget继承的基本概念,包括StatelessWidget和StatefulWidget的区别。接着通过具体示例展示了如何继承StatelessWidget和StatefulWidget,并在子类中访问父类的build方法和状态。最后,结合多个自定义Widget展示了如何在实际应用中灵活使用继承和组合来构建复杂的UI。
74 8
|
27天前
|
容器
flutter&鸿蒙next 使用 InheritedWidget 实现跨 Widget 传递状态
在 Flutter 中,状态管理至关重要。本文详细介绍了如何使用 InheritedWidget 实现跨 Widget 的状态传递。InheritedWidget 允许数据在 Widget 树中向下传递,适用于多层嵌套的场景。通过一个简单的计数器示例,展示了如何创建和使用 InheritedWidget,包括其基础概念、工作原理及代码实现。虽然 InheritedWidget 较底层,但它是许多高级状态管理解决方案的基础。
96 2
|
2月前
|
容器
flutter:第一个flutter&Widget的使用 (二)
本文介绍了Flutter框架下的基本组件及其用法,包括简单的 Stateless Widget 如文本和按钮,以及更复杂的 StatefulWidget 示例。详细解释了如何使用 `context` 获取祖先小部件的信息,并展示了 `MaterialApp` 的属性及用途。此外,还探讨了 `StatefulWidget` 与 `StatelessWidget` 的区别,以及 `AppBar` 的常见属性配置方法。适合Flutter初学者参考学习。
|
27天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
74 0
|
5月前
Flutter-底部弹出框(Widget层级)
文章描述了如何在Flutter中使用DraggableScrollableSheet创建一个底部弹出框,同时保持其可手势滑动关闭。作者遇到问题并提出对原控件进行扩展,以支持头部和列表布局的滑动关闭功能。
189 0
|
6月前
Flutter StreamBuilder 实现局部刷新 Widget
Flutter StreamBuilder 实现局部刷新 Widget
47 0
|
7月前
|
Android开发
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
Flutter完整开发实战详解(六、 深入Widget原理),2024百度Android岗面试真题收录解析
|
7月前
|
开发框架 前端开发 搜索推荐
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
【4月更文挑战第30天】探索Flutter的自定义Widget与渲染流程。自定义Widget是实现复杂UI设计的关键,优点在于个性化设计、功能扩展和代码复用,但也面临性能优化和复杂性管理的挑战。创建步骤包括设计结构、定义Widget类、实现构建逻辑和处理交互。Flutter渲染流程涉及渲染对象树、布局、绘制和合成阶段。实践案例展示如何创建带渐变背景和阴影的自定义按钮。了解这些知识能提升应用体验并应对开发挑战。查阅官方文档以深入学习。
84 0
【Flutter前端技术开发专栏】Flutter中的自定义Widget与渲染流程
|
7月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
96 0
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
7月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。