Flutter TextButton splashColor 属性

Question

我正在使用 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: ..., 
)

我该怎么做？谢谢

Answer 1

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

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

Answer 2

由于 Flat button 被弃用，您必须使用 TextButton 代替它，但在文本按钮中没有直接属性来更改启动颜色。所以如果你想将启动颜色更改为透明，你可以这样做。

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

Answer 3

你也可以这样使用

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

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

Answer 4

您可以在 constants.dart 中的某处定义您想要的颜色，如下所示：

const kPrimaryColor = Color(0xfffbba3d);

然后你可以使用 ButtonStyle 和 opacity/transparency 使用 .withOpacity() 像这样：

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),
                        ),    
                  ),

Answer 5

对于MaterialStatePropertyTextButton设置不熟悉的人（使用resolveWith自定义按钮效果）：

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateColor.resolveWith((states) {
      if(states.contains(MaterialState.hover){
        return Colors.transparent; // <- hover color
      }else if(states.contains(MaterialState.pressed){
        return Colors.transparent; // <- ripple color
      }
      ...
    },
    backgroundColor: MaterialStateColor.resolveWith((states) {
      if(states.contains(MaterialState.pressed){
        return Colors.transparent; // <- clicked color
      }
      ...
    }),
  )
)

Flutter TextButton splashColor 属性

Flutter TextButton splashColor property

flutter

flutter-layout

flutter-web