如何剪辑容器的可点击区域？

Question

整个容器都被点击了，圆圈除外 shouldn't be clicked。

我正在把我的容器做成圆形。

我想做什么

这是我的代码

 InkWell(
  onTap: () {},
  hoverColor: Colors.yellow,
  child: Container(
    width: 300,
    height: 300,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.red,
    ),
  ),
)

Answer 1

你可以把你的容器child用一叠包起来然后给2children：一个方形容器和一个圆形容器，颜色相同，然后把圆形容器用手势检测器或墨水瓶。如果仅通过文本难以理解，请告诉我，我会为您编写代码片段。有帮助就点个赞吧

Answer 2

使用这个

Container(
                width: 300,
                height: 300,
                color: Colors.yellow,
                child: GestureDetector(
                  onTap: () {},
                  child: Container(
                    width: 300,
                    height: 300,
                    decoration: const BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),

Answer 3

您可以像这样填充 InkWell 的 borderRadius 属性：

InkWell(
  borderRadius: BorderRadius.circular('Your customized double value'),
  onTap: () {},
  hoverColor: Colors.yellow,
  child: Container(
    width: 300,
    height: 300,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.red,
    ),
  ),
)

Answer 4

您需要使用 customBorder by providing CircleBorder().

InkWell(
  customBorder: const CircleBorder(),

但是对于这种情况，您需要用 Material 小部件包装 CircleBorder()。

运行在 dartPad

完整的小部件会像

 Material(
  shape: const CircleBorder(),
  color: Colors.red, // container color,to have splash color effect
  child: InkWell(
    customBorder: const CircleBorder(),
    splashColor: Colors.white,
    onTap: () {
      debugPrint("tapped");
    },
    hoverColor: Colors.yellow,
    child: Container(
      width: 300,
      height: 300,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.transparent, // material color will cover this
      ),
    ),
  ),
),

引用

Answer 5

这将解决您的问题；

InkWell(
  customBorder: const CircleBorder(),

但如果您还想 material 对红色容器产生涟漪效应，您可以使用此代码；

 ClipOval(
   child: Container(
     width: 300,
     height: 300,
     color: Colors.red,
     child: TextButton(
       onPressed: () {},
       child: Center(),
     ),
   ),
 ),

如何剪辑容器的可点击区域？

How do I clip clickable area of my container?

flutter

flutter-layout

flutter-web