面试题：Flutter 中 StatefulWidget 与 Provider 在游戏状态管理中的基础应用

使用 StatefulWidget 实现点击计数功能：
- 首先，创建一个 StatefulWidget，例如命名为 ClickCounterApp：

import 'package:flutter/material.dart';

class ClickCounterApp extends StatefulWidget {
  @override
  _ClickCounterAppState createState() => _ClickCounterAppState();
}

class _ClickCounterAppState extends State<ClickCounterApp> {
  int _count = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Click Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have clicked the button this many times:',
            ),
            Text(
              '$_count',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在上述代码中，_ClickCounterAppState 继承自 State，_count 变量用于存储点击次数。_incrementCounter 方法通过 setState 来通知 Flutter 框架状态发生了改变，从而重新构建 UI 显示新的计数。

引入 Provider 管理计数状态并在不同组件间共享和更新：
- 第一步，添加 provider 依赖到 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.4

然后，创建一个用于管理计数状态的模型类，例如 CounterModel：

import 'package:flutter/material.dart';

class CounterModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void incrementCounter() {
    _count++;
    notifyListeners();
  }
}

接着，在应用的顶层使用 ChangeNotifierProvider 来提供 CounterModel：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MaterialApp(
        home: ClickCounterApp(),
      ),
    );
  }
}

class ClickCounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = context.watch<CounterModel>();
    return Scaffold(
      appBar: AppBar(
        title: Text('Click Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have clicked the button this many times:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<CounterModel>().incrementCounter();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在上述代码中，CounterModel 继承自 ChangeNotifier，当 incrementCounter 方法调用 notifyListeners 时，依赖该模型的所有组件（通过 context.watch 或 Consumer）会收到通知并重新构建。ChangeNotifierProvider 将 CounterModel 提供给整个应用，ClickCounterApp 现在是一个 StatelessWidget，通过 context.watch 来监听 CounterModel 的变化，通过 context.read 来获取模型并调用其方法更新状态。这样，不同组件都可以轻松地共享和更新这个计数状态。

星途面试题库

面试题：Flutter 中 StatefulWidget 与 Provider 在游戏状态管理中的基础应用

知识考点

面试题答案