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

【问题标题】：How do I clip clickable area of my container?如何剪辑容器的可点击区域？
【发布时间】：2022-01-18 14:35:53
【问题描述】：

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

我正在将我的容器塑造成圆形。

我想做的事

这是我的代码

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

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

您需要通过提供CircleBorder() 来使用customBorder。

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.

【讨论】：

谢谢。它正在工作。但是用形状为 CircleBorder 的材料包裹我的墨水瓶就足够了，为什么需要墨水和自定义边框？？
谢谢，我在追随旧时尚。还修复了启动颜色的问题。

【解决方案2】：

您可以用堆栈包裹容器的子容器，然后给 2 个子容器：一个方形容器和一个圆形容器，两者颜色相同，然后用手势检测器或墨水瓶包裹圆形容器。如果仅通过文字难以理解，请告诉我，我将为您编写代码 sn-p。如果有帮助，请点赞。

【讨论】：

【解决方案3】：

使用这个

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,
                    ),
                  ),
                ),
              ),

【讨论】：

【解决方案4】：

您可以像这样填充 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,
    ),
  ),
)

【讨论】：

【解决方案5】：

这会解决你的问题；

InkWell(
  customBorder: const CircleBorder(),

但如果您还想在红色容器上产生材料波纹效果，您可以使用此代码；

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

【讨论】：