Flutter 中的无边框选择高亮效果

Posted 2023-02-22

【中文标题】Flutter 中的无边框选择高亮效果

【英文标题】：Borderless selection highlight effect in Flutter

【发布时间】：2019-11-13 03:52:26

【问题描述】：

上下文：我正在用 Flutter 重写我的 android 应用程序。在 Android 上，将可点击的View 的background 属性设置为?android:selectableItemBackgroundBorderless 时，出现了这种有趣的触摸反馈效果：

请注意，红色边框不在真实 UI 中，它只是为了显示 View 的边框。如您所见，墨迹在矩形视图周围形成了一个圆圈，即circumscribed。

我希望我的 Flutter 应用程序中的墨迹也被限制在视图周围，即 选择区域需要是圆形并包含视图。我试图通过使用来实现这一点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,
      ),
    ),
  ),
),

如果我使InkResponse 的radius 属性足够大，它可以超出视图的范围，如果我的视图具有静态大小，我可以调整属性以达到预期的效果，但在我的真实应用它是动态的。

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

【问题讨论】：

您找到解决方案了吗？有什么方法可以让涟漪效果超出小部件渲染框？

【参考方案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,
              ),
            ),
          ),
        ),

【讨论】：

感谢您的回答，但我特别感兴趣的是有一个圆形突出显示区域完全包含视图。对不起，如果我没有在我的问题中说清楚。

【参考方案2】：

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

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

Working Example