Flutter：StatelessWidget vs StatefulWidget 深度解析

[1. 引言](#1. 引言)

[2. StatelessWidget（无状态组件）](#2. StatelessWidget（无状态组件）)

[2.1 定义与特点](#2.1 定义与特点)

[2.2 代码示例](#2.2 代码示例)

[3. StatefulWidget（有状态组件）](#3. StatefulWidget（有状态组件）)

[3.1 定义与特点](#3.1 定义与特点)

[3.2 代码示例](#3.2 代码示例)

[4. StatelessWidget vs StatefulWidget 对比](#4. StatelessWidget vs StatefulWidget 对比)

[5. StatefulWidget 生命周期](#5. StatefulWidget 生命周期)

[5.1 生命周期示例](#5.1 生命周期示例)

[6. 何时选择 StatelessWidget 或 StatefulWidget？](#6. 何时选择 StatelessWidget 或 StatefulWidget？)

[6.1 选择 StatelessWidget](#6.1 选择 StatelessWidget)

[6.2 选择 StatefulWidget](#6.2 选择 StatefulWidget)

[7. 总结](#7. 总结)

1. 引言

Flutter 是 Google 开发的跨平台 UI 框架，所有界面元素都是由 Widget 组成。Flutter 中的 Widget 分为 StatelessWidget（无状态组件） 和 StatefulWidget（有状态组件），它们在开发过程中扮演着不同的角色。本文将深入解析这两类组件的特点、适用场景及生命周期，并通过示例代码帮助开发者理解如何正确选择和使用它们。

2. StatelessWidget（无状态组件）

2.1 定义与特点

StatelessWidget 是指不可变的组件，它的 UI 由 build() 方法描述，并且不会因用户交互或数据变化而发生更新。

主要特点：

组件状态不可变（immutable）。
仅依赖输入数据（final 变量）。
build() 方法只会被调用一次，除非父组件触发更新。
适用于静态 UI（如文本、按钮、图标）。

2.2 代码示例

Dart 复制代码

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String text;

  const MyStatelessWidget({super.key, required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: MyStatelessWidget(text: 'Hello, Flutter!'),
      ),
    ),
  ));
}

示例解析：

MyStatelessWidget 组件接收 text 作为参数，无法在运行时改变。
组件不会因外部状态变化而重新构建，适用于静态文本。

3. StatefulWidget（有状态组件）

3.1 定义与特点

StatefulWidget 适用于 UI 需要动态变化的场景。它由 两部分 组成：

StatefulWidget 类（负责创建 State）。
State 类（持有可变状态，并控制 UI 更新）。

主要特点：

UI 组件可变（mutable）。
通过 setState() 触发 UI 更新。
适用于用户交互、动画、异步数据加载等场景。

3.2 代码示例

Dart 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child:  Column(
          children: [
            Text('Count: $_counter'),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Increment'),
            ),
          ],
        )
      ),
    );
  }
}

示例解析：

_incrementCounter 通过 setState() 更新 _counter 变量。
每次按钮点击时，setState() 触发 build() 方法重新执行，刷新 UI。

4. StatelessWidget vs StatefulWidget 对比

特性	StatelessWidget	StatefulWidget
是否可变	不可变	可变
状态管理	依赖父组件传递数据	组件内部维护状态
适用场景	静态 UI（如文本、按钮、图标）	交互组件（如计数器、表单）
性能	性能较优	需要手动管理状态，可能影响性能
快捷创建	stless	stful

例如创建 StatefulWidget，我们输入stful 回车，会自动出现下方代码，而不需要我们自己编写这种格式，自己仅需要修改 build 中的 UI 内容即可。

5. StatefulWidget 生命周期

StatefulWidget 的生命周期由多个回调方法组成，理解这些方法有助于优化组件的性能。

生命周期方法	说明
initState`()`	组件创建时调用，仅执行一次，适用于初始化数据。
`didChangeDependencies()`	依赖发生变化时调用，如 `InheritedWidget` 更新。
build`()`	组件渲染 UI，可能多次调用。
setState`()`	触发状态更新并重新构建 UI。
`didUpdateWidget()`	父组件更新时调用，可用于响应外部数据变化。
`dispose()`	组件销毁时调用，释放资源（如取消网络请求、关闭流）。

5.1 生命周期示例

Dart 复制代码

class LifecycleDemo extends StatefulWidget {
  @override
  _LifecycleDemoState createState() => _LifecycleDemoState();
}

class _LifecycleDemoState extends State<LifecycleDemo> {
  @override
  void initState() {
    super.initState();
    print('initState called');
  }

  @override
  Widget build(BuildContext context) {
    print('build called');
    return Text('Lifecycle Demo');
  }

  @override
  void dispose() {
    print('dispose called');
    super.dispose();
  }
}

6. 何时选择 StatelessWidget 或 StatefulWidget？

6.1 选择 StatelessWidget

UI 仅依赖父组件的参数。
组件不需要持有内部状态。
适用于简单的文本、图标、按钮等静态内容。

6.2 选择 StatefulWidget

组件的 UI 需要根据用户交互或数据变化而更新。
组件需要维护内部状态，例如计数器、动画、表单输入等。
涉及异步数据加载（如网络请求）。

7. 总结

Flutter 中 Widget 分为 StatelessWidget （无状态组件）和 StatefulWidget（有状态组件）。
StatelessWidget 适用于静态 UI，而 StatefulWidget 适用于需要动态更新的 UI。
StatefulWidget 依赖 setState() 进行状态更新，并具有完整的生命周期管理。
选择合适的 Widget 类型可以提高应用性能，并优化用户体验。

Flutter：StatelessWidget vs StatefulWidget 深度解析

1. 引言

2. StatelessWidget（无状态组件）

2.1 定义与特点

2.2 代码示例

3. StatefulWidget（有状态组件）

3.1 定义与特点

3.2 代码示例

4. StatelessWidget vs StatefulWidget 对比

5. StatefulWidget 生命周期

5.1 生命周期示例

6. 何时选择 StatelessWidget 或 StatefulWidget？

6.1 选择 StatelessWidget

6.2 选择 StatefulWidget

7. 总结

相关推荐