Question

上下文：我正在用Flutter重写我的Android应用。在Android上，将可点击的View的{{1}}属性设置为background时，会产生有趣的触摸反馈效果：

请注意，红色边框不在实际的UI中，它只是用来显示?android:selectableItemBackgroundBorderless的边框。如您所见，墨水在矩形视图周围形成一个circumscribed的圆圈。

我希望Flutter应用程序中的墨水也围绕视图外接，即选择区域必须为圆形并包含视图。我正在尝试通过使用View组件，但结果看起来很惨：

示例中使用的InkResponse的正文：

Scaffold

如果我将body: Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: Material( color: Color(0xff008080), child: Center( child: InkResponse( onTap: () { /* ... */ }, child: Container( child: Center( child: Text('BUTTON'), ), decoration: BoxDecoration( border: Border.all(color: Colors.red), ), width: 200.0, height: 200.0, ), highlightColor: Colors.transparent, ), ), ), ),的{{1}}属性做得足够大，它可能会超出视图的范围，并且如果我的视图具有静态大小，则可以调整该属性以实现所需的效果，但在我的真实应用中，它是动态的。

是否可以在不创建自定义组件的情况下做到这一点？

Answer 1

您已尝试过此操作，其单击被绑定到红色区域。

Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: Material(
            color: Color(0xff008080),
            child: Center(
              child: InkWell(
                onTap: () {
                  /* ... */
                },
                child: Container(
                  child: Center(
                    child: Text('BUTTON'),
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.red),
                  ),
                ),
                highlightColor: Colors.transparent,
              ),
            ),
          ),
        ),

Answer 2

出于这些目的，我认为应该使用 InkResponse：

Container(
  width: 80,
  height: 80,
  child: InkResponse(radius: 110, onTap: () {}, child: Text("text")));

Working Example

Flutter中的无边界选择突出显示效果

2 个答案: