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

Question

我在一个由行包裹的列中有三个图像 (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,
     ),
 ),