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();
  }
}
相关推荐
maaath10 分钟前
【maaath】Flutter for OpenHarmony 闹钟时钟应用开发实战
flutter·华为·harmonyos
maaath27 分钟前
【maaath】Flutter for OpenHarmony 短信管理应用实战
flutter·华为·harmonyos
maaath1 小时前
【maaath】Flutter for OpenHarmony打造跨平台便签备忘录应用
flutter·华为·harmonyos
千码君20161 小时前
flutter:与Android Studio模拟器的调试分享
android·flutter
xmdy58662 小时前
Flutter+开源鸿蒙实战|智联邻里Day8 Lottie动画集成+url_launcher跳转拨号+个人中心完善+全局UI统一
flutter·开源·harmonyos
liulian091610 小时前
Flutter for OpenHarmony 跨平台开发:颜色选择器功能实战指南
flutter
liulian091615 小时前
Flutter for OpenHarmony 跨平台开发:BMI计算器功能实战指南
flutter·华为
xmdy586618 小时前
Flutter+开源鸿蒙实战|智安盾电商溯源平台Day1 项目搭建与整体方案拆解
flutter·开源·harmonyos
小白64021 天前
AI辅助设计Flutter蓝牙自动连接系统
人工智能·flutter
xmdy58661 天前
Flutter+开源鸿蒙实战|智联邻里Day6 引入GetX全局架构+升级版下拉刷新+Toast弹窗+网络状态监听
flutter·开源·harmonyos