Flutter StatefulWidget #

一、StatefulWidget基础 #

1.1 定义 #

dart

class MyWidget extends StatefulWidget {
  final String title;
  
  const MyWidget({super.key, required this.title});
  
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _count = 0;
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('${widget.title}: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: Text('Increment'),
        ),
      ],
    );
  }
}

1.2 State类 #

dart

class _MyWidgetState extends State<MyWidget> {
  late TextEditingController _controller;
  late FocusNode _focusNode;
  
  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    _focusNode = FocusNode();
  }
  
  @override
  void dispose() {
    _controller.dispose();
    _focusNode.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return TextField(controller: _controller);
  }
}

二、生命周期 #

2.1 生命周期图 #

text

createState()
      │
      ▼
initState()
      │
      ▼
didChangeDependencies()
      │
      ▼
build() ◄──────────────────┐
      │                     │
      ▼                     │
didUpdateWidget()           │ setState()
      │                     │
      ▼                     │
setState() ─────────────────┘
      │
      ▼
deactivate()
      │
      ▼
dispose()

2.2 生命周期方法 #

dart

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() {
    super.initState();
    print('initState');
  }
  
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print('didChangeDependencies');
  }
  
  @override
  void didUpdateWidget(MyWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    print('didUpdateWidget');
  }
  
  @override
  void deactivate() {
    super.deactivate();
    print('deactivate');
  }
  
  @override
  void dispose() {
    print('dispose');
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

三、setState #

3.1 基本用法 #

dart

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

3.2 异步更新 #

dart

Future<void> _loadData() async {
  final data = await fetchData();
  setState(() {
    _data = data;
  });
}

3.3 注意事项 #

dart

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

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

四、总结 #

4.1 核心要点 #

要点	说明
StatefulWidget	有状态Widget
State	状态管理类
setState	触发UI更新
生命周期	initState → build → dispose

4.2 下一步 #

让我们学习 InheritedWidget！