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

预期结果

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

Answer 1

使用ClipRRect

ClipRRect(
      borderRadius: BorderRadius.circular(16),
      child:  Image.asset(
        'assets/cat.jpg',width: 110.0, height: 110.0,
      ),
    );

Answer 2

有很多方法可以做到这一点。

（i）。使用CircleAvatar（推荐）

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

（ii）。使用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()
)

Answer 3

您可以使用ClipRRect enter link to more detail

new ClipRRect(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(4.0),
                  topLeft: Radius.circular(4.0)),
              child: Image.asset(
                "images/filter_white.png",
                color: AppColor.appColor,
                height: 20.0,
                width: 20.0,
              ),
            )

Answer 4

像这样覆盖图像小部件。

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

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

4 个答案: