Flutter 有状态Widget 和 无状态Widget

简介: Flutter 有状态Widget 和 无状态Widget

 

有状态Widget

什么是有状态Widget (StatefulWidget)

官方解释: 如果用户与 widget 交互,widget 会发生变化,那么它就是 有状态的。

有状态的 widget 自身是可动态改变的(基于State)。 例如用户交互而改变 Widget 的 state。

Checkbox、Radio、Slider、 InkWell、Form 和 TextField 都是有状态 widget,它们都是 StatefulWidget 的子类。

Widget 的 状态(state )保存在一个 State 的对象中。 State和Widget 是分离的,当 Widget状态变化时,State 对象调用 setState()  来通知框架去重绘 Widget

如何创建一个有状态Widget

实现一个有状态Widget需要创建两个类:

● 一个 StatefulWidget 的子类,用来定义一个 widget 类。

● 一个 State 的子类,包含该widget状态并定义该 widget 的 build() 方法。

我们可以通过 VSCode Flutter 命令补全来快速场景一个 有状态组件:

fstful

import 'package:flutter/material.dart';

class FulStatePage extends StatefulWidget {

 const FulStatePage({super.key});

 @override

 _FulStatePageState createState() => _FulStatePageState();

}

class _FulStatePageState extends State<FulStatePage> {

 @override

 Widget build(BuildContext context) {

   return Container(

   

   );

 }

}

创建StatefulWidget 子类

上面代码中,我创建了一个  FulStatePage 类 继承了 StatefulWidget ,这时它是一个有状态的Widget

框架在 构建 Widget 时会调用 createState()创建管理state ,上面代码中,我们创建了 _FulStatePageState 实例.

class FulStatePage extends StatefulWidget {

 const FulStatePage({super.key});

 @override

 _FulStatePageState createState() => _FulStatePageState();

}

上面代码详细解释:

1. FulStatePage类继承自StatefulWidget,表示这是一个具有可变状态的小部件。

2. 构造函数const FulStatePage({super.key})接收一个可选参数key,用于在构建小部件时标识它。

3. createState()方法返回一个与FulStatePage关联的状态对象,即_FulStatePageState。

4. _FulStatePageState是FulStatePage对应的状态类,它继承自State类。

5. 在_FulStatePageState中可以定义和管理该小部件的可变状态,并实现相关的业务逻辑。

6. 通过重写build()方法,在其中构建小部件树来描述该小部件的外观和行为。

7. FulStatePage类通常会被作为其他小部件的子部件使用,以提供动态交互和数据驱动的功能。

需要注意的是:

● FulStatePage类的构造函数使用了const关键字,表示该小部件是不可变的,即其属性在构建后不能更改。

● key参数用于在小部件树中唯一标识该小部件,以便在进行更新、重建等操作时进行准确定位。

● createState()方法必须被重写,用于创建与该小部件关联的状态对象。

● 状态对象State负责管理和更新小部件的可变状态,并通过setState()方法通知Flutter框架进行重建。

创建State的子类

_FulStatePageState 类存储可不的信息。  

class _FulStatePageState extends State<FulStatePage> {

int num = 0;  

 void setNum(){

   setState(() {

     ++num

   })

 }

 

 @override

 Widget build(BuildContext context) {

   return Container(

   

   );

 }

}

上面代码详细解释:

1. _FulStatePageState类继承自State<FulStatePage>,表示它是FulStatePage小部件的状态类。

2. 在build()方法中,可以构建并返回描述该小部件外观和行为的小部件树。

3. 当状态发生变化时,build()方法会被调用,以重新构建小部件树来反映新的状态。

需要注意的是:

● BuildContext context参数提供了与当前小部件相关的上下文信息,可以用于获取主题、媒体查询等。

● 在build()方法中,可以使用各种小部件来构建界面,例如Container、Text、Image等。

● 返回的小部件树描述了该小部件的外观和行为,可以包含其他小部件作为子部件。

● 可以在build()方法中使用状态对象的属性来动态生成小部件,实现根据状态变化而改变界面的效果。

● 避免在build()方法中进行耗时操作,以保持应用程序的响应性能。

● 如果需要更新状态并触发重建,应使用setState()方法。这将通知Flutter框架重新调用build()方法。

无状态Widget StatelessWidget

在Flutter中,无状态小部件(Stateless Widget)是一种不包含可变状态的小部件。它们是不可变的,意味着一旦构建完成,它们的内容就不能再改变。

无状态小部件通过继承StatelessWidget类来创建,并重写build方法来描述其UI。build方法接收一个BuildContext参数,并返回一个小部件树,用于构建界面。

import 'package:flutter/material.dart';

class CollectPage extends StatelessWidget {

const CollectPage({super.key,});

 @override

 Widget build(BuildContext context){

   return Container();

 }

}

什么时候使用无状态Widget

1. 当小部件的内容是静态的,不需要根据外部事件或数据进行更新时,可以使用无状态小部件。例如,一个简单的文本展示小部件或一个静态的图标按钮。

2. 当小部件的状态由父级管理时,可以使用无状态小部件。父级可以通过传递参数来控制子部件的外观和行为。

3. 当小部件不需要响应用户交互时,可以使用无状态小部件。无状态小部件主要用于展示静态内容,而不涉及与用户的交互。

4. 当性能要求较高时,无状态小部件比有状态小部件具有更轻量级的性能开销,因为它们不需要维护状态对象。所以,在性能要求较高的场景下,可以考虑使用无状态小部件。

例如一些纯静态展示内容 [文章列表,listview 显示的内容(不需要交互改变weidget), 一些按钮等]

总之,无状态小部件适用于静态内容、由父级管理状态、不需要响应用户交互或对性能要求较高的情况。

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

热门文章

最新文章

  • 1
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 2
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 3
    flutter开发-figma交互设计图可以转换为flutter源代码-如何将设计图转换为flutter源代码-优雅草央千澈
  • 4
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 5
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 6
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex