Flutter StatelessWidget 和 StatefulWidget 的区别

Flutter StatelessWidget 和 StatefulWidget 的区别

  • StatelessWidget 和 StatefulWidget 是构建 UI 用户界面的两种基础组件,主要区别在于状态管理(数据变化)、 UI 更新机制和生命周期
  • StatelessWidget 适用于静态 UI,而 StatefulWidget 适用于需要动态更新的 UI

StatelessWidget 无状态组件

  • 是一种无状态的、不可变的组件,一旦构建后属性无法修改,不会随时间变化(在下次构建之前都不会改变)
  • 组件的 UI 外观和行为仅由初始的配置参数(构造函数中的参数)决定
  • 仅包含 build 方法(UI 由 build 方法描述,根据配置参数构建 UI),每次参数变化时重新构建 UI (build 只会被调用一次,除非父组件触发更新)
  • 无状态管理,性能较好,适合静态内容(比如 Text 文本、Icon 图标和 Container 容器等)
dart 复制代码
void main() {
  runApp(const MyText(title: "StatelessWidget 标题文本"));
}
class MyText extends StatelessWidget {
  //配置参数(构造函数中的参数)
  final String title;

  const MyText({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    //配置参数
    //return Text(title, textDirection: TextDirection.ltr);
    return Center(
      child: Text(title, textDirection: TextDirection.ltr),
    );
  }
}

StatefulWidget 有状态组件

  • 是一种有状态的组件(包含一个 State 对象),State 状态可以随时间变化,可以动态修改其状态并触发 UI 重新渲染
  • 包括如 createState、initState、build(UI 由 build 方法描述,根据 State 状态构建 UI)、didUpdateWidget 和 dispose 等方法
  • 适合需要动态更新的场景(如表单输入、列表刷新、计数器和动画等)
dart 复制代码
void main() => runApp(const MyCounter());
class MyCounter extends StatefulWidget {
  const MyCounter({super.key});

  @override
  State<MyCounter> createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
  int _counter = 0;

  void _incrementCounter() {
    //调用 setState 标记 UI 需要重新渲染(触发 UI 更新)
    setState(() {
      _counter++;
    });
    //setState(() => _counter++);
  }

  @override
  Widget build(BuildContext context) {
    //
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("StatefulWidget 标题文本")),
        body: Center(
          child: Column(
            children: [
              Text("MyCounter: $_counter"),
              ElevatedButton(
                onPressed: _incrementCounter, //调用 _incrementCounter 方法
                child: const Text("Increment"),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    //组件初始化时调用
    //进行初始化操作(比如加载数据)
  }

  @override
  void dispose() {
    //组件销毁时调用
    //进行释放资源操作(比如取消订阅)
    super.dispose();
  }
}
相关推荐
牛马1112 小时前
Flutter OverlayEntry
flutter
2603_949462102 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
2601_949975793 小时前
Flutter for OpenHarmony艺考真题题库+帮助中心实现
flutter
子春一6 小时前
Flutter for OpenHarmony:构建一个 Flutter 井字棋游戏,深入解析状态驱动逻辑、胜利判定与极简交互设计
flutter·游戏·交互
雨季6667 小时前
Flutter 三端应用实战:OpenHarmony “极简手势轨迹球”——指尖与屏幕的诗意对话
开发语言·javascript·flutter
ujainu7 小时前
Flutter + OpenHarmony 游戏开发进阶:CustomPainter 手绘游戏世界——从球体到轨道
flutter·游戏·信息可视化·openharmony
雨季6667 小时前
Flutter 三端应用实战:OpenHarmony “专注时光盒”——在碎片洪流中守护心流的数字容器
开发语言·前端·安全·flutter·交互
kirk_wang7 小时前
Flutter艺术探索-Flutter相机与相册:camera库与image_picker集成
flutter·移动开发·flutter教程·移动开发教程
子春一7 小时前
Flutter for OpenHarmony:构建一个 Flutter 贪吃蛇游戏,深入解析状态机、碰撞检测与响应式游戏循环
flutter·游戏
2601_949543017 小时前
Flutter for OpenHarmony垃圾分类指南App实战:主题配置实现
android·flutter