Flutter TextButton splashColor 属性答案

【问题标题】：Flutter TextButton splashColor propertyFlutter TextButton splashColor 属性
【发布时间】：2021-01-30 11:40:30
【问题描述】：

我使用FlatButton 并传递了属性

FlatButton(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      child: ..., 
)

documentation says that FlatButton will become obsolete，并改为使用TextButton，但它不采用splashColor 或highlightColor 属性

TextButton(                  
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    child: ...,       
)

不起作用。这是不允许的

我也试过这样

TextButton(            
  style: ButtonStyle(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: ..., 
)

我该怎么做？谢谢

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

Colors.transparent 将拒绝任何效果，只是它是透明的，所以它看起来就像什么都没有发生......在 ButtonStyle 中，它与颜色类似。

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

【讨论】：

是的，我想要透明的，这是一个网络项目，我不想要点击时出现的气泡。在这个例子中，我不能用 splashColor 替换 overlayColor，但它似乎消除了效果。为什么我必须在这个 TextButton 上使用 MaterialStateColor 而不仅仅是 Color？这是什么意思？

【解决方案2】：

由于平面按钮已被贬低，您必须使用 TextButton 代替它，但在文本按钮中没有直接属性可以更改初始颜色。因此，如果您想将初始颜色更改为透明，您可以这样做。

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

【讨论】：

【解决方案3】：

你也可以这样使用

 TextButton( onPressed: () {},
                style: TextButton.styleFrom(
                              backgroundColor: AppColors.primaryColor,
                              primary: Colors.black12),//ripple color
                          child:Text(AppLocalizations.of(context).startAdventure,
                          ));

您可以设置primary颜色来创建波纹颜色

【讨论】：

不，TextButton 的主要属性设置其文本的颜色（和图标，如果它的 TextButton.icon）。它不会改变波纹颜色。
我一直在我的项目中使用它，它似乎工作正常！ @Marvioso 你测试过我的代码吗？
嘿，我刚刚重新测试了代码，它确实有效！原色设置文本的颜色，但它也为波纹动画设置了一种非常微弱（低不透明度）的颜色。如果您想要与设置的原色不同的文本颜色，您可以在 textstyle 属性中设置它。好抓巴拉吉

【解决方案4】：

你可以在某个地方定义你想要的颜色，比如在 constants.dart 中，像这样：

const kPrimaryColor = Color(0xfffbba3d);

然后您可以使用 .withOpacity() 将 ButtonStyle 与不透明度/透明度一起使用，如下所示：

TextButton(
     style: ButtonStyle(
          overlayColor: MaterialStateColor.resolveWith(
            (states) => kPrimaryColor.withOpacity(0.3))),
                    onPressed: () => {},
                    child: 
                        Text(
                          'My Button',
                          style: TextStyle(
                              fontSize: 16,
                              color: kPrimaryColor,
                              fontWeight: FontWeight.w400),
                        ),    
                  ),

【讨论】：