Flutter 2.0 - 按下时如何更改 TextButton 的初始颜色？

Posted 2023-02-23

【中文标题】Flutter 2.0 - 按下时如何更改 TextButton 的初始颜色？

【英文标题】：Flutter 2.0 - How to change TextButton splash color when pressed?

【发布时间】：2021-07-02 00:28:49

【问题描述】：

FlatButton is deprecated and shouldn't be used. Used TextButton instead.

在我之前的FlatButton 小部件上，我可以在按下时更改初始颜色。但是现在我正在使用TextButton 小部件，我怎样才能以有效的方式在MaterialApp ThemeData 或直接在TextButton 小部件上更改其颜色。

目前这是我的 TextButton

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
    textStyle: TextStyle(
      color: Colors.black45,
      fontFamily: "Courier Prime",
    ),
    backgroundColor: Colors.transparent,
  ),
  onPressed: () ,
  child: Text(
    "Student",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
),

overlayColor is used to indicate that the button is focused, hovered, or pressed.

但我找不到这个overlayColor

【问题讨论】：

按下时可以使用setState改变颜色

@AkshayNayka ，我的意思是当你按下按钮时，它的 Splash 颜色会慢慢地填充按钮。它不是按钮颜色。

【参考方案1】：

首先请记住，TextButton 的主要属性设置其文本和图标的颜色。它不会改变波纹颜色。其次在 Textbutton 中没有直接的属性来改变启动颜色。因此，如果您想将初始颜色更改为透明，您可以这样做。

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.________),
  ),
)

【参考方案2】：

TextButton(            
 style: ButtonStyle(
  overlayColor: MaterialStateColor.resolveWith((states) => Colors.red),
  ),
 child: ..., 
)

引用Flutter TextButton splashColor property

【参考方案3】：

您可以使用辅助方法TextButton.styleFrom() 快速设置TextButton 的初始颜色。请注意，这实际上会根据前景色设置前景色和初始色，这在大多数情况下是您想要的：

TextButton(
  style: TextButton.styleFrom(primary: Colors.red),
  child: const Text('Text Button'),
  onPressed: () ,
)

Live Demo

【参考方案4】：

您可以像这样更改 Splash 颜色：

            Theme(
              data: ThemeData(
                splashColor: Colors.red,
                highlightColor: Colors.black.withOpacity(.5),
              ),
              child: ListTile(
                  title: Text(
                    "New theme splash",
                    textAlign: TextAlign.center,
                  ),
                  onTap: () ),
            ),