在Flutter的Inkwell小部件中添加边框半径 [英] Add border Radius in the Inkwell widget in flutter

问题描述

我想使用inkwell小部件向容器添加悬停颜色属性，但是容器具有自己的边框半径，当我使用inkwell使用悬停属性时，它将采用自定义形状并使其看起来像矩形悬停在墨水池上之后.

I want to add a hover color property to a container using the inkwell widget but the container has its own border-radius and when I am using the hover property using inkwell it is taking its custom shape and making it look rectangle in shape after hovering on the inkwell.

这是我的代码段:

InkWell(
            
            onTap: () {},
            hoverColor: Colors.red[200],
            child: Container(
              width: 70.w,
              height: 60.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
              ),
              child: Row(
                children: [
                  Image.asset(
                    'images/call.png',
                    height: 30.h,
                  ),
                  Text(
                    'Call',
                    style: white,
                  ),
                ],
              ),
            ),
          ),

希望我能使您很好地理解问题

I hope I made you understand the problem well

请帮助我解决问题或提供替代方案.

Please help me solve the issue or provide an alternate to it.

推荐答案

Inkwell 小部件具有类型为 ShapeBorder 的属性 customBorder .您可以使用它为 Inkwell 提供一个 borderRadius .

The Inkwell widget has a property customBorder of type ShapeBorder. You can use that to provide a borderRadius to your Inkwell.

例如:

customBorder: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
),

这篇关于在Flutter的Inkwell小部件中添加边框半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！