Image.asset 中图像的圆角抖动？

Question

我在 Row 包裹的列中有三个图像（images.asset），我想让图像的角变圆。我使用了形状，但似乎那个形状不起作用。

我怎样才能做到这一点？

Row(
      children: [
        Expanded(
          child: Column(
            children: <Widget>[

              Image.asset(
                'assets/cat.jpg',width: 110.0, height: 110.0,
              ),
              shape:Rec
              Text(
                'Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Image.asset('assets/cat.jpg',width: 110.0, height: 110.0,),
              Text(
                'Buy Tickets',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
        Expanded(
          child: Column(
            children: <Widget>[
              Image.asset('assets/cat.jpg',width: 110.0, height: 110.0,),
              Text(
                'Prizes',
                style:
                    TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
      ],
    ),

预期结果

1. 使图像具有圆角。
2. 处理点击事件。

Answer 1

像这样覆盖您的图像小部件。

使用ClipRRect小部件和包含，fit:BoxFit.fill以便您的图像可以扩展到您通过的高度和宽度。

它将为您提供所需的输出，如图所示。

 ClipRRect(
     borderRadius: BorderRadius.circular(8.0),
     child: Image.asset(
       'assets/cat.jpg',
        width: 110.0,
        height: 110.0,
        fit: BoxFit.fill,
     ),
 ),

Answer 2

有很多方法可以做到。

（一世）。使用CircleAvatar（推荐）

CircleAvatar(
  backgroundImage: AssetImage('assets/cat.jpg'),
  radius: 50,
)

（二）。用ClipOval

ClipOval(
  child: Image.asset(
    'assets/cat.jpg',
    fit: BoxFit.cover,
  ),
)

(iii) 使用 ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(50),
  child: Image.asset(
    'assets/cat.jpg',
    fit: BoxFit.cover,
  ),
)

回答您的第二个问题，如果您需要处理对任何图像的点击，您可以将上述任何内容包装起来GestureDetector并使用onTap属性。

GestureDetector(
  onTap: () {},
  child: AnyAboveWidget()
)