Flutter ElevatedButton上的水波纹效果控制

Question

问题

如何更改 ElevatedButton 上的点击波纹效果的持续时间和颜色？可参考DartPad链接中的工作示例。

工作中的 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

这是DartPad的链接，可以用于编辑和运行Dart代码。

- Adam Griffiths

---

你可以在Flutter中尝试使用InkWell，这可能会有所帮助。https://dev59.com/oVUK5IYBdhLWcg3w6zU8 - vIvId_gOat

请问你能展示一下带有ElevatedButton的墨水池的工作示例吗？ - Adam Griffiths

Answer 1

很简单。只需确保在当前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创建自己的自定义按钮，但那将不是一个凸起的按钮。

- Wilson Wilson

---

这篇文章包含两个问题，难点在于如何改变涟漪的持续时间？ - iDecode

这能成为你的答案吗？https://dev59.com/oVUK5IYBdhLWcg3w6zU8 - Jim

@JimChiu 我已经链接了。这是不可能的，因为SplashFactory在ElevatedButton中是硬编码的。 - Wilson Wilson

Answer 2

使用 Flutter 2.0，试试这个

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

- Heshan Sandeepa

---

非常好，简明扼要。 - Michał Dobi Dobrzański

Answer 3

您可以使用animationDuration来设置动画持续时间，使用onPrimary来更改启动屏幕颜色。

return ElevatedButton(
      onPressed: action,
      child:
          Text(text, style: Theme.of(context).textTheme.subtitle1),
      style: ElevatedButton.styleFrom(
        onPrimary: Colors.black,
        animationDuration: Duration(milliseconds: 1000),
        primary: Colors.red,
        shadowColor: Colors.redAccent,
        elevation: 10,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
      ),
    );

- Mohamed Slama