Flutter状态管理与Provider使用：如何通过Provider控制车轮列表索引切换

你编写的WheelCounter逻辑是对的，仅需要补充状态变更通知，再按以下步骤接入组件树即可：

1. 补全WheelCounter状态类 #

在状态修改方法末尾添加notifyListeners()，通知所有监听该状态的组件更新：

import 'package:flutter/material.dart';

class WheelCounter with ChangeNotifier {
  int _count = 0;
  // 暴露当前索引给组件读取
  int get count => _count;
  
  void wheel1Choose() {
    _count = 0;
    notifyListeners();
  }
  void wheel2Choose() {
    _count = 1;
    notifyListeners();
  }
}

2. 在根组件注入Provider实例 #

修改main.dart，将WheelCounter实例注入到组件树顶层，让所有子组件都能访问到状态：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './car.dart';
import './buttons.dart';
import './wheel_counter.dart'; // 引入你写的WheelCounter文件

void main() => runApp(
  ChangeNotifierProvider(
    create: (context) => WheelCounter(),
    child: MyApp(),
  )
);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(height: 50),
            Car(),
            SizedBox(height: 50),
            Buttons(),
          ],
        ),
      ),
    );
  }
}

3. Car组件读取状态控制车轮显示 #

修改car.dart，移除硬编码的索引0，从Provider中读取当前选中的索引：

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

class Car extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CarState();
  }
}

class CarState extends State<Car> {
  final wheelImage = [
    Image.asset('assets/wheel1.png'),
    Image.asset('assets/wheel2.png'),
  ];

  @override
  Widget build(BuildContext context) {
    // 监听状态变化
    final wheelCounter = Provider.of<WheelCounter>(context);
    return Stack(
      children: [
        Image.asset('assets/golf.png'), // 车身
        wheelImage[wheelCounter.count], // 动态切换车轮
      ],
    );
  }
}

4. Buttons组件绑定点击事件修改状态 #

修改buttons.dart，点击按钮时调用WheelCounter的方法修改状态：

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

class Buttons extends StatelessWidget {
  const Buttons({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          // 修改状态时不需要监听状态变化，listen设为false
          onPressed: () => Provider.of<WheelCounter>(context, listen: false).wheel1Choose(),
          child: Text('Wheel 1')
        ),
        SizedBox(width: 20),
        ElevatedButton(
          onPressed: () => Provider.of<WheelCounter>(context, listen: false).wheel2Choose(),
          child: Text('Wheel 2')
        ),
      ],
    );
  }
}

注意：Dart语法规范要求类名使用大驼峰命名，原代码中的小写car类名建议修改为Car，避免后续出现语法识别问题。

内容的提问来源于stack exchange，提问作者Corden