Question

环境

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移到外面。如果我误会了一些，请纠正我。

Answer 1

要获得涟漪效应，Material小部件必须是InkWell的直接祖先，并且放置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'),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),

如何使InkWell的飞溅可见？

1 个答案: