Flutter如何通过按钮修改另一Widget组件内的图片资源

解决方案 #

核心逻辑是状态提升：将控制车轮显示的索引状态放在父组件MyApp中维护，点击按钮更新状态后通过参数传递给子组件Car，触发子组件自动重绘即可完成图片切换。

第一步：修改 main.dart #

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

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

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

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  // 维护当前选中的车轮索引
  int _currentWheelIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            const SizedBox(height: 50),
            // 将当前选中的索引传递给子组件
            Car(wheelIndex: _currentWheelIndex),
            const SizedBox(height: 50),
            ElevatedButton(
                // 点击切换为车轮1
                onPressed: () => setState(() => _currentWheelIndex = 0),
                child: const Text('Wheel 1')),
            ElevatedButton(
                // 点击切换为车轮2
                onPressed: () => setState(() => _currentWheelIndex = 1),
                child: const Text('Wheel 2')),
          ],
        ),
      ),
    );
  }
}

第二步：修改 car.dart #

注意Dart规范中类名需使用大驼峰，因此将原car类调整为Car：

import 'package:flutter/material.dart';

class Car extends StatefulWidget {
  // 接收父组件传递的车轮索引
  final int wheelIndex;
  const Car({super.key, required this.wheelIndex});

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

class CarState extends State<Car> {
  // 车轮资源列表提前抽出，不要放在build方法中重复创建
  final List<Image> wheelImage = [
    Image.asset('assets/wheel1.png'),
    Image.asset('assets/wheel2.png'),
  ];

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Image.asset('assets/golf.png'), // 车身
        wheelImage[widget.wheelIndex], // 根据父组件传的索引显示对应车轮
      ],
    );
  }
}

后续优化建议 #

如果后续可选车轮数量较多，可将车轮资源列表统一放到父组件或者单独的配置文件中维护，新增车轮时只需修改资源列表即可，无需调整逻辑代码。

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