如何在颤动中为 PhysicalModel 添加波纹效果答案

【问题标题】：How to add ripple effect to PhysicalModel in flutter如何在颤动中为 PhysicalModel 添加波纹效果
【发布时间】：2019-05-14 06:51:07
【问题描述】：

我试图创建一个登录按钮，按下它时会显示动画。但是在单击按钮时（在 PhysicalModel 上），涟漪效应仅显示在 Login 文本上，而不是完全显示在物理模型上。如何在 PhysicalModel 中添加涟漪或从 MaterialButton 中移除涟漪效果？

PhysicalModel(
            color: Colors.teal,
            borderRadius: BorderRadius.circular(50.0),
            child: MaterialButton(
                   key: _globalKey,
                   child: Text("Login"),
                   onPressed: () {
                        setState(() {
                             if (_state == 0) {
                                    animateButton();
                             }
                        });
                   },
                   elevation: 4.0,
                   minWidth: _width,
                   height: 20.0,
            ),
)

【问题讨论】：

标签： dart flutter flutter-animation

【解决方案1】：

如果您想移除 MaterialButton 的初始颜色，只需将这些颜色更改为透明即可。

  MaterialButton(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,

如果你想要PhysicalModel 的涟漪效果：

    PhysicalModel(
                  color: Colors.teal,
                  borderRadius: BorderRadius.circular(50.0),
                  child: RawMaterialButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0)),
                    padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 30.0),
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    child: Text("Login"),
                    onPressed: () {
                      setState(() {});
                    },
                    elevation: 4.0,
                  ),
                )

【讨论】：

完成。这将消除涟漪效应。如果我需要涟漪效果，但对于整个小部件怎么办？有什么办法吗？

【解决方案2】：

这是我的解决方案，您可以简单地将您的 PhysicModel 颜色设置为透明，同时使用 Ink 小部件将颜色设置为您的子小部件所需的颜色：

PhysicalModel(
                        borderRadius: BorderRadius.circular(16),
                        shadowColor: Colors.grey.withAlpha(10),
                        elevation: 16,
                        color: Colors.transparent,
                        child: Ink(
                            color: Theme.of(context).scaffoldBackgroundColor,
                            child:

很简单，然后你可以有墨水瓶效果，同时保持你的颜色。

【讨论】：

【解决方案3】：

Adding Material Touch Ripples

Flutter 提供了InkWell Widget 来实现这个效果。

定义：

响应触摸的材质的矩形区域。

另外：InkWell 小部件必须有一个 Material 小部件作为祖先。 Material 小部件是实际绘制墨水反应的地方。这符合材料设计前提，其中材料实际上是通过涂抹墨水对触摸做出反应。

路线

创建一个我们想要点击的小部件

将其包装在 InkWell 小部件中以管理点击回调和波纹动画

    InkWell(
        // When the user taps the button, show a snackbar
        onTap: () {
          Scaffold.of(context).showSnackBar(SnackBar(
            content: Text('Tap'),
          ));
        },
        child: PhysicalModel(
          color: Colors.teal,
          borderRadius: BorderRadius.circular(50.0),
          child: MaterialButton /*or a FlatButton */(
            key: _globalKey,
            child: Text("Login"),
            onPressed: () {
              setState(() {
                if (_state == 0) {
                  animateButton();
                }
              });
            },
            elevation: 4.0,
            minWidth: _width,
            height: 20.0,
          ),
        )),

【讨论】：