Flutter/Dart中如何向自定义函数传入TextButton背景色参数

云上老周

2026-10-1

问题修复方案

核心问题原因

参数类型不匹配：你定义buildKey的color参数为MaterialColor类型，但调用时传入的是MaterialStateProperty<Color?>类型，二者类型不兼容，直接导致背景色设置失效。
现有函数仅支持命名参数调用，不符合你需要的位置参数、命名参数两种调用形式的需求。

修复代码

class _MyHomePageState extends State<MyHomePage> {
  void playSound(int noteNumber) {
    AssetsAudioPlayer.newPlayer().open(
      Audio("/assets/note$noteNumber.wav"),
    );
  }

  // 调整参数定义，同时支持位置参数、命名参数两种调用形式
  Expanded buildKey([MaterialColor? color, int? soundNumber, {MaterialColor? colName, int? soundNum}]) {
    // 优先取命名参数的值，没有则取位置参数的值
    final finalColor = colName ?? color!;
    final finalSoundNumber = soundNum ?? soundNumber!;
    return Expanded(
      child: TextButton(
        style: TextButton.styleFrom(
          // 直接传入Color类型值即可，无需套MaterialStateProperty
          backgroundColor: finalColor,
        ),
        onPressed: () {
          playSound(finalSoundNumber);
        },
        child: const Text(''),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // 两种调用方式都可以生效
            buildKey(Colors.red, 1),
            // 或者 buildKey(colName: Colors.red, soundNum: 2)
          ],
        ),
      ),
    );
  }
}