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();
  }
}
相关推荐
又菜又爱coding15 小时前
Android + Flutter打包出来的APK体积太大
android·flutter
QuantumLeap丶16 小时前
《Flutter全栈开发实战指南:从零到高级》- 10 -状态管理setState与InheritedWidget
flutter·前端框架·dart
Pedro17 小时前
Flutter - 日志不再裸奔:pd_log 让打印有型、写盘有序
前端·flutter
QuantumLeap丶17 小时前
《Flutter全栈开发实战指南:从零到高级》- 09 -常用UI组件库实战
flutter·ios·dart
火柴就是我1 天前
Element的属性 _inheritedElements 的含义以及创建时机
flutter
鹏多多1 天前
解锁flutter弹窗新姿势:dialog-flutter_smart_dialog插件解读+案例
前端·flutter·客户端
西西学代码1 天前
Flutter---个人信息(5)---持久化存储
java·javascript·flutter
芝麻开门-新起点2 天前
Flutter 存储管理:从基础到进阶的完整指南
flutter
星释2 天前
鸿蒙Flutter三方库适配指南:10.插件测试
flutter·华为·harmonyos
Bryce李小白2 天前
Flutter boost权威指南
flutter