状态管理

Flutter 教程 · 第 5 章 · 6 次浏览

Flutter 分两种组件：StatelessWidget（静态，不随状态变化）和 StatefulWidget（动态，setState 更新界面）。状态管理就是把"数据变化 → 界面刷新"理顺。

setState 基础

StatefulWidget 里点按钮改数据，调 setState(() { 数据 = 新值; })，界面自动重建。

进阶方案

项目大了用 Provider、Riverpod、Bloc 等状态管理库，把状态提升、逻辑分层。入门先吃透 setState。

代码示例

import 'package:flutter/material.dart';

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("计数器")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("$_count", style: const TextStyle(fontSize: 48)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _increment,
              child: const Text("+1"),
            ),
          ],
        ),
      ),
    );
  }
}