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();
  }
}
相关推荐
张风捷特烈3 分钟前
每日一题 Flutter#2 | 如何理解 Widget 的不可变性
android·flutter·面试
李新_12 小时前
我们使用了哪些Flutter 三方库(二)
android·flutter·ios
getapi15 小时前
flutter开发安卓APP适配不同尺寸的手机屏幕
android·flutter·智能手机
倾云鹤15 小时前
Flutter实现不规则瀑布流布局拖拽重排序
flutter
恋猫de小郭16 小时前
腾讯 ovCompose 开源,Kuikly 鸿蒙和 Compose DSL 开源,腾讯的“双”鸿蒙方案发布
android·前端·flutter
zcychong20 小时前
FlutterPlugin支持鸿蒙Next
flutter·harmonyos
newki21 小时前
【Flutter】FCM与Notifications集成流程
flutter·app
张风捷特烈1 天前
每日一题 Flutter#1 | 说说你对声明式 UI 的理解
android·flutter
恋猫de小郭1 天前
Flutter 官方多窗口体验 ,为什么 Flutter 推进那么慢,而 CMP 却支持那么快
android·前端·flutter
小蜜蜂嗡嗡1 天前
flutter项目迁移空安全
javascript·安全·flutter