Flutter中的widget（组件）

_XSW

已于 2022-12-31 21:58:24 修改

阅读量412

点赞数

分类专栏： Flutter 文章标签： flutter android

于 2022-12-31 13:01:05 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59056822/article/details/128503987

版权

Flutter 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Flutter应用程序中两种主要的Widget类型：StatelessWidget和StatefulWidget。StatelessWidget适用于不随运行时变化的组件，而StatefulWidget则用于需要在用户交互或网络请求后更新内容的场景。通过创建自定义的StatefulWidget类和State类，可以实现Widget的状态管理，例如在按钮点击后改变页面上的文本内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Flutter开发的应用程序中，页面上显示的所有内容都是Widget;Widget分为无状态Widget (StatelessWidget)和有状态Widget(StatefulWidget)两种。

1. StatelessWidget

StatelessWidget应用于Widget不会在运行时发生变化的场景。
在这里插入图片描述

2. StatefulWidget

StatefulWidget应用于Widget会在运行时发生变化的场景，也就是应用程序根据用户交互或网络请求状态下，页面显示的内容需要发生变化,即需要重新绘制新的Widget。
例如：应用程序的页面上有一个文本摆组件Text和一个按钮组件FloatingActionButton,在点击按钮后Text组件上示的内容发生变化。
第一步： 创建继承自StatefulWidget的自定义类——StatefulWidgetPage
第二步： 创建继承自State的自定义类——StatefulWidgetPageState

class shouyeWidget extends StatefulWidget {
  @override
  State createState() {
    return shouyeState();
  }
}

class shouyeState extends State {
  @override
  void setState(VoidCallback fn) {
    // TODO: implement setState
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    var select = 0;
    return Scaffold(