控制 Flutter ElevatedButton 上的点击波纹效果

Question

题

如何更改 上的 on tap 涟漪效应的持续时间和颜色ElevatedButton？有关此涟漪效应的工作示例，请参阅飞镖板链接。

ElevatedButton 的工作代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {},
        child: const Text('Elevated Button', style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

DartPad 链接

https://dartpad.dev/369b01f31b06c18d4f47076319aa4da4

Answer 1

使用 Flutter 2.0，试试这个

ElevatedButton(
    style: ButtonStyle(
      overlayColor: MaterialStateProperty.all<Color>(Colors.black12)),
    onPressed: () {},
    child: Text('Ripple'))

Answer 2

这很简单。只需确保在按下当前 MaterialState 时返回所需的叠加颜色。

    Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {},
            style: ButtonStyle(
              overlayColor: MaterialStateProperty.resolveWith(
                (states) {
                  return states.contains(MaterialState.pressed)
                      ? Colors.red
                      : null;
                },
              ),
            ),
            child: const Text(
              'Elevated Button',
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      ),

更好的是，您可以将其用作 buttonStyle：

ElevatedButton.styleFrom(
    onPrimary: Colors.yellow,
 ),

唯一的问题是它会影响您的前景色，但这还不错。

因此，带有自定义飞溅的按钮应如下所示：

      ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              onPrimary: Colors.yellow,
            ),
            child: const Text(
              'Elevated Button',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),

但是，更改飞溅的持续时间是不可能的，因为从源代码来看，按钮的飞溅工厂是硬编码的，不能进行修改。

...
splashFactory: InkRipple.splashFactory,

正如此答案所示，您需要修改飞溅工厂以更改持续时间。

如果您确实需要该功能，那么最快的方法是从源代码复制代码并自己重新实现。但我不建议这样做。

您可以执行此操作的更合适的方法是使用 Material 和 InkWell 创建您自己的自定义按钮，但这不会是一个提升的按钮