如何使 InkWell 的飞溅可见？

Posted 2023-02-23

【中文标题】如何使 InkWell 的飞溅可见？

【英文标题】：How can I make InkWell's splash visible?

【发布时间】：2020-08-02 09:46:51

【问题描述】：

环境

Flutter 1.12.13+hotfix.9 飞镖 2.7.2

问题

我在下面编写了这样的代码。

我发现当我点击它时，'InkWell.onTap' 会出现在控制台中，但不会出现飞溅动画（= 像波浪一样扩展的动画）。你能帮我理解为什么我看不到启动动画吗？

示例

InkWell(
  splashColor: Colors.blueAccent,
  onTap: () 
    print('$DateTime.now()| InkWell.onTap');
  ,
  child: Container(
    color: Colors.lightBlue[100],
    child: Row(
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.lightBlue[50],
                    border: Border.all(),
                  ),
                  child: Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text('Text1'),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                    left: 16, top: 8, right: 8, bottom: 8),
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Text('Text2'),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
)

其他信息

上面的代码只生成了一个浅蓝色方块，您可以在屏幕截图中找到 5。

有人建议这个问题可能与this 重复。但是，我仍然有一个问题。

我认为答案基本上是说“将color 属性移到InkWell 小部件之外”，但我的情况有多种颜色（Colors.lightBlue[100] 和Colors.lightBlue[50]），所以我不能简单地移动color到外面。如果我误解了什么，请纠正我。

【问题讨论】：

这能回答你的问题吗？ InkWell not showing ripple effect

@chunhunghan 谢谢你的建议。我觉得我还是有问题。如果你能检查这个更新的问题，我将不胜感激。

【参考方案1】：

要获得涟漪效应，Material 小部件必须是 InkWell 的直接祖先，现在您的整个屏幕将具有涟漪效应，我不确定这是否是您的效果想要与否。

 Material(
          color: Colors.lightBlue[100],
          child: InkWell(
            splashColor: Colors.blueAccent,
            onTap: () 
              print('$DateTime.now()| InkWell.onTap');
            ,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.lightBlue[50],
                            border: Border.all(),
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(8.0),
                            child: Align(
                              alignment: Alignment.centerLeft,
                              child: Text('Text1'),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(
                            left: 16, top: 8, right: 8, bottom: 8),
                        child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text('Text2'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),