2

我试图创建一个登录按钮，按下它时会显示动画。但是在单击按钮时（在 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,
            ),
)
4

3 回答 3

4

如果你想去除飞溅的颜色，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,
                  ),
                )
于 2018-12-13T05:29:23.447 回答
1

这是我的解决方案，您可以简单地将您的 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:

很简单，然后您就可以拥有 Inkwell 效果并保持您的颜色。

于 2021-03-11T13:41:34.447 回答
-1

添加材质触摸波纹

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

定义：

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

墨水瓶图像

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

方向

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

  2. 将其包装在 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,
          ),
        )),
于 2018-12-13T05:44:03.283 回答