如何将 TextButton 背景颜色输入到 Flutter/dart 中的函数

Posted 2023-02-23

【中文标题】如何将 TextButton 背景颜色输入到 Flutter/dart 中的函数

【英文标题】：How do I input a TextButton background color to a function in Flutter/dart

【发布时间】：2021-11-26 00:00:47

【问题描述】：

我正在尝试创建一个函数，在 buildKey 下我可以输入两个元素，即背景颜色和 soundNumber，以便在调用 buildKey 时我可以输入说 buildKey(red, 2) 或 buildKey(colName: red, soundNumber : 2) 等等。

soundNumber 元素有效，但无论我尝试什么，我都无法获得有效的背景颜色输入。

非常感谢任何帮助。

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

  Expanded buildKey(required MaterialColor color, required int soundNumber) 
    return Expanded(
      child: TextButton(
        style: TextButton.styleFrom(
          backgroundColor: color,
        ),
        onPressed: () 
          playSound(soundNumber);
        ,
        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(color: MaterialStateProperty.all(Colors.red), soundNumber: 1),
          ],
        ),
      ),
    );
  

【参考方案1】：

你必须使用MaterialStateProperty 类来应用颜色。这是示例：

TextButton(
    child: Text('Your Text'),
    style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red)),
    onPressed: () ,
),

【讨论】：

您好，谢谢。我已经更新了我的问题以尝试合并您的答案，并更准确地显示我要解决的问题。我需要知道在第一次定义 buildKey 时要输入什么： Expanded buildKey(required MaterialColor color, required int soundNumber) - 我现在有 MaterialColor 颜色，然后还要在函数主体中输入什么来命名那，然后在 BuildKey 函数被调用时放入什么。

【参考方案2】：

得到了修复的帮助。它保留了 TextButton 上的原始 styleFrom，而不是使用 MaterialStateProperty。我输入的参数不正确，所以使用 Color 作为数据类型。

Expanded buildKey(required Color colName, required int soundNumber) 
    return Expanded(
      child: TextButton(
        style: TextButton.styleFrom(
          backgroundColor: colName,
        ),
        onPressed: () 
          playSound(soundNumber);
        ,
        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(colName: Colors.red, soundNumber: 1),
            buildKey(colName: Colors.orange, soundNumber: 2),
            buildKey(colName: Colors.yellow, soundNumber: 3),
            buildKey(colName: Colors.green, soundNumber: 4),
            buildKey(colName: Colors.teal, soundNumber: 5),
            buildKey(colName: Colors.blue, soundNumber: 6),
            buildKey(colName: Colors.purple, soundNumber: 7),
          ],
        ),
      ),
    );