flutter学习第 7 节：StatefulWidget 与状态管理基础

叽哥
143 阅读7分钟

在 Flutter 开发中，状态管理是构建动态交互界面的核心。应用程序的状态决定了界面的呈现方式，而状态的变化会导致界面的重新渲染。本节课将深入探讨 StatefulWidget 的工作原理、状态管理的基本概念以及实践方法，帮助你掌握 Flutter 中动态界面的构建技巧。

一、StatelessWidget 与 StatefulWidget 的区别

Flutter 中的 Widget 分为两大类：无状态组件（StatelessWidget）和有状态组件（StatefulWidget），它们的核心区别在于是否能管理和维护自身状态。

1. StatelessWidget（无状态组件）

StatelessWidget 是不可变的（immutable），一旦创建就无法更改其属性。它的构建完全依赖于初始参数，不包含任何可变状态。

import 'package:flutter/material.dart';

class StatelessExample extends StatelessWidget {
  final String message;

  // 构造函数参数必须为 final
  const StatelessExample({
    super.key,
    required this.message,
  });

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

适用场景：

  • 静态内容展示（如标题、标签）
  • 仅依赖父组件传递的参数构建的 UI
  • 不需要响应用户交互或数据变化的组件

2. StatefulWidget（有状态组件）

StatefulWidget 是可变的，它本身是不可变的，但关联了一个可变的 State 对象，用于存储和管理组件的状态。

import 'package:flutter/material.dart';

class CounterExample extends StatefulWidget {
  // Widget 本身仍然是不可变的
  const CounterExample({super.key});

  // 创建关联的 State 对象
  @override
  State<CounterExample> createState() => _CounterExampleState();
}

// 状态类，存储和管理组件的可变状态
class _CounterExampleState extends State<CounterExample> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Text("Count: $_count");
  }
}

适用场景：

  • 需要响应用户交互的组件（如按钮、开关）
  • 数据会动态变化的 UI（如计数器、进度条）
  • 需要展示异步加载数据的组件（如网络请求结果）

3. 核心区别对比

特性StatelessWidgetStatefulWidget
可变性不可变，属性为 final本身不可变，但关联的 State 可变
状态管理无内部状态有内部状态，由 State 对象管理
重建触发仅当父组件重建且参数变化时调用 setState () 或父组件重建时
生命周期无特殊生命周期方法有完整的生命周期方法（initState、dispose 等）
性能影响重建成本低重建成本相对较高，需合理管理

二、setState () 方法与状态更新原理

setState() 是 State 类提供的核心方法，用于通知 Flutter 框架状态已发生变化，需要重新构建组件。

1. setState () 的基本用法

import 'package:flutter/material.dart';

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  // 定义更新状态的方法
  void _increment() {
    // 调用 setState() 通知框架状态变化
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Count: $_count"),
        ElevatedButton(
          onPressed: _increment,
          child: const Text("Increment"),
        ),
      ],
    );
  }
}

在 setState() 的回调函数中修改状态变量，Flutter 框架会：

  1. 执行回调函数中的状态更新逻辑
  2. 标记当前组件为 "脏" 状态（需要重建）
  3. 触发组件的 build() 方法重新执行，生成新的 Widget 树
  4. 对比新旧 Widget 树的差异，只更新变化的部分（diffing 过程）
  5. 将变化渲染到屏幕上

状态更新的注意事项

  • 必须在 setState () 回调中修改状态：直接修改状态变量不会触发 UI 更新
// 错误方式 - 不会触发 UI 更新
void _badUpdate() {
  _count++;
}

// 正确方式 - 会触发 UI 更新
void _goodUpdate() {
  setState(() {
    _count++;
  });
}

避免在 build () 方法中调用 setState () ：这会导致无限重建循环

@override
Widget build(BuildContext context) {
  // 错误做法 - 会导致无限循环
  setState(() {
    _count++;
  });
  return Text("Count: $_count");
}

setState () 是异步的：如果需要在状态更新后执行操作，应放在回调中

setState(() {
  _count++;
}, () {
  // 状态更新完成后执行
  print("Count updated to: $_count");
});
  • 保持状态更新的原子性：一次 setState () 应包含所有相关的状态变化

3. 状态更新的性能考量

频繁调用 setState() 可能影响性能，优化建议：

  • 避免不必要的状态更新
  • 将大组件拆分为小组件，使状态更新只影响必要的部分
  • 使用 const 构造函数创建不需要重建的子组件
  • 复杂场景下考虑使用更高效的状态管理方案（如 Provider、Bloc 等）

三、状态提升（State Lifting）

在实际开发中，多个组件可能需要共享同一状态，或者子组件的状态需要影响父组件。这时可以使用 "状态提升" 技术，将状态从子组件移动到共同的父组件中管理。

1. 状态提升的基本原理

状态提升遵循以下原则：

  1. 将共享状态从子组件移至它们的共同父组件
  2. 父组件通过参数将状态传递给子组件
  3. 父组件提供回调函数给子组件，用于更新状态
  4. 子组件通过调用这些回调函数来间接修改状态

这种模式使状态在组件树中单向流动，便于追踪和调试。

2. 状态提升实例：温度转换器

下面实现一个温度转换器，包含两个输入框（摄氏度和华氏度），修改其中一个会自动更新另一个：

// 父组件 - 管理共享状态
import 'package:flutter/material.dart';

class TemperatureConverter extends StatefulWidget {
  const TemperatureConverter({super.key});

  @override
  State<TemperatureConverter> createState() => _TemperatureConverterState();
}

class _TemperatureConverterState extends State<TemperatureConverter> {
  // 共享状态 - 存储摄氏度
  double? _celsius;

  // 摄氏度转华氏度
  double _celsiusToFahrenheit(double celsius) {
    return celsius * 9 / 5 + 32;
  }

  // 华氏度转摄氏度
  double _fahrenheitToCelsius(double fahrenheit) {
    return (fahrenheit - 32) * 5 / 9;
  }

  // 处理摄氏度变化
  void _handleCelsiusChange(String value) {
    final celsius = double.tryParse(value);
    setState(() {
      _celsius = celsius;
    });
  }

  // 处理华氏度变化
  void _handleFahrenheitChange(String value) {
    final fahrenheit = double.tryParse(value);
    if (fahrenheit != null) {
      setState(() {
        _celsius = _fahrenheitToCelsius(fahrenheit);
      });
    } else {
      setState(() {
        _celsius = null;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final fahrenheit = _celsius != null
        ? _celsiusToFahrenheit(_celsius!)
        : null;

    return Column(
      children: [
        // 子组件 - 摄氏度输入框
        TemperatureInput(
          label: "Celsius (°C)",
          value: _celsius?.toString() ?? "",
          onChanged: _handleCelsiusChange,
        ),
        const SizedBox(height: 16),
        // 子组件 - 华氏度输入框
        TemperatureInput(
          label: "Fahrenheit (°F)",
          value: fahrenheit?.toStringAsFixed(1) ?? "",
          onChanged: _handleFahrenheitChange,
        ),
      ],
    );
  }
}

// 子组件 - 无状态的温度输入框（已修复 TextField 错误）
class TemperatureInput extends StatelessWidget {
  final String label;
  final String value;
  final ValueChanged<String> onChanged;

  const TemperatureInput({
    super.key,
    required this.label,
    required this.value,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    // 使用 TextEditingController 管理输入值
    final controller = TextEditingController(text: value);

    // 监听文本变化并触发回调
    controller.addListener(() {
      onChanged(controller.text);
    });

    return TextField(
      controller: controller,
      decoration: InputDecoration(
        labelText: label,
        border: const OutlineInputBorder(),
      ),
      keyboardType: TextInputType.number,
    );
  }
}

在这个例子中：

  • 状态（摄氏度值）被提升到了父组件 TemperatureConverter 中
  • 两个子组件 TemperatureInput 都是无状态的，仅负责展示和用户输入
  • 子组件通过 onChanged 回调通知父组件状态变化
  • 父组件更新状态后，通过 value 参数将最新值传递给子组件

3. 状态提升的优缺点

优点：

  • 使状态管理集中，便于维护和调试
  • 遵循单一数据源原则，避免状态不一致
  • 组件职责清晰，子组件专注于展示和交互

缺点：

  • 当组件层次较深时，状态传递会变得繁琐（"props drilling" 问题）
  • 频繁的状态更新可能导致不必要的组件重建

对于复杂应用，通常会结合专门的状态管理库（如 Provider、Riverpod、Bloc 等）来解决这些问题。


四、实例：实现常用交互组件

1. 高级计数器组件

实现一个功能完整的计数器，包含增减按钮、重置功能和当前计数显示：

import 'package:flutter/material.dart';

class AdvancedCounter extends StatefulWidget {
  // 允许父组件指定初始值
  final int initialValue;
  // 允许父组件获取当前值
  final ValueChanged<int>? onCountChanged;

  const AdvancedCounter({
    super.key,
    this.initialValue = 0,
    this.onCountChanged,
  });

  @override
  State<AdvancedCounter> createState() => _AdvancedCounterState();
}

class _AdvancedCounterState extends State<AdvancedCounter> {
  late int _count;

  // 初始化状态
  @override
  void initState() {
    super.initState();
    _count = widget.initialValue;
  }

  // 当父组件传递的参数变化时更新状态
  @override
  void didUpdateWidget(covariant AdvancedCounter oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.initialValue != oldWidget.initialValue) {
      _count = widget.initialValue;
    }
  }

  void _increment() {
    setState(() {
      _count++;
    });
    // 通知父组件状态变化
    widget.onCountChanged?.call(_count);
  }

  void _decrement() {
    setState(() {
      _count--;
    });
    widget.onCountChanged?.call(_count);
  }

  void _reset() {
    setState(() {
      _count = 0;
    });
    widget.onCountChanged?.call(_count);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Current Count: $_count", style: const TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: _decrement, child: const Text("-")),
            const SizedBox(width: 16),
            ElevatedButton(onPressed: _increment, child: const Text("+")),
          ],
        ),
        const SizedBox(height: 8),
        TextButton(onPressed: _reset, child: const Text("Reset")),
      ],
    );
  }
}

使用这个计数器组件：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Advanced Counter")),
      body: const Center(
        child: AdvancedCounter(
          initialValue: 5,
          onCountChanged: (count) {
            print("Count changed to: $count");
          },
        ),
      ),
    );
  }
}

2. 多选项开关组件

实现一个可以切换多个选项状态的组件：

import 'package:flutter/material.dart';

class FeatureToggles extends StatefulWidget {
  const FeatureToggles({super.key});

  @override
  State<FeatureToggles> createState() => _FeatureTogglesState();
}

class _FeatureTogglesState extends State<FeatureToggles> {
  // 管理多个选项的状态
  final Map<String, bool> _features = {
    "Dark Mode": false,
    "Notifications": true,
    "Auto Sync": true,
    "Privacy Mode": false,
  };

  // 切换选项状态
  void _toggleFeature(String feature) {
    setState(() {
      _features[feature] = !(_features[feature] ?? false);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: _features.entries.map((entry) {
        final feature = entry.key;
        final enabled = entry.value;

        return SwitchListTile(
          title: Text(feature),
          value: enabled,
          onChanged: (value) => _toggleFeature(feature),
          secondary: Icon(
            enabled ? Icons.check_circle : Icons.circle_outlined,
            color: enabled ? Colors.green : null,
          ),
        );
      }).toList(),
    );
  }
}

五、StatefulWidget 的生命周期

StatefulWidget 的 State 对象具有完整的生命周期，理解这些生命周期方法有助于更好地管理资源和状态。

1. 生命周期方法详解

  1. 初始化阶段

    • initState(): 当 State 对象被创建时调用，只执行一次
@override
void initState() {
  super.initState();
  // 初始化操作：数据初始化、订阅事件、启动定时器等
  _loadData();
}
  1. 构建阶段
  • build(): 构建 Widget 树，每次状态变化都会调用
  • didUpdateWidget(): 当父组件重建导致 Widget 属性变化时调用
@override
void didUpdateWidget(covariant MyWidget oldWidget) {
  super.didUpdateWidget(oldWidget);
  // 处理 Widget 属性变化
  if (widget.data != oldWidget.data) {
    _updateData(widget.data);
  }
}

  1. 激活与失活阶段

    • deactivate(): 当 State 对象暂时从树中移除时调用
    • activate(): 当 State 对象重新插入树中时调用

  2. 销毁阶段

    • dispose(): 当 State 对象永久从树中移除时调用，只执行一次
@override
void dispose() {
  // 清理资源：取消订阅、停止定时器、释放资源等
  _timer.cancel();
  _streamSubscription.cancel();
  super.dispose();
}

2. 生命周期流程图

创建 State → initState() → didChangeDependencies() → build()
      ↑                                                    ↓
      └─────────────────── dispose() ←────────────────────┘
                                ↑
                            组件被销毁时
avatar
文章
阅读
粉丝