Question

我正在尝试创建一个登录按钮，按下该按钮将使其具有动画效果。但是，当单击按钮（在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,
            ),
)

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

Answer 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:

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

Answer 3

Adding Material Touch Ripples

Flutter提供了InkWell小部件以实现此效果。

定义：

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

也：InkWell小部件必须具有“材料”小部件作为祖先。材料小部件是实际绘制墨水反应的位置。这符合材料设计的前提，其中材料是通过散布墨水对触摸做出实际反应的材料。

方向

创建我们要点击的小部件

将其包装在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,
          ),
        )),

如何在颤动中向PhysicalModel添加波纹效果

3 个答案: