如何在颤振中实现圆角图像

Question

我正在使用Flutter制作一个关于电影的信息列表。现在我希望左边的封面图片是圆角图片。我做了以下操作，但没有成功。谢谢

    getItem(var subject) {
    var row = Container(
      margin: EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          Container(
            width: 100.0,
            height: 150.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              color: Colors.redAccent,
            ),
            child: Image.network(
              subject['images']['large'],
              height: 150.0,
              width: 100.0,
            ),
          ),
        ],
      ),
    );
    return Card(
      color: Colors.blueGrey,
      child: row,
    );
  }

如下所示

Answer 1

• Using CircleAvatar:

  CircleAvatar(
    radius: 48, // Image radius
    backgroundImage: NetworkImage('imageUrl'),
  )
  

  ClipOval(
    child: SizedBox.fromSize(
      size: Size.fromRadius(48), // Image radius
      child: Image.network('imageUrl', fit: BoxFit.cover),
    ),
  )
  

  

  • Using CircleAvatar:

    CircleAvatar(
      radius: 56,
      backgroundColor: Colors.red,
      child: Padding(
        padding: const EdgeInsets.all(8), // Border radius
        child: ClipOval(child: Image.network('imageUrl')),
      ),
    )
    

    Container(
      padding: EdgeInsets.all(8), // Border width
      decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
      child: ClipOval(
        child: SizedBox.fromSize(
          size: Size.fromRadius(48), // Image radius
          child: Image.network('imageUrl', fit: BoxFit.cover),
        ),
      ),
    )
    

    

    ClipRRect(
      borderRadius: BorderRadius.circular(20), // Image border
      child: SizedBox.fromSize(
        size: Size.fromRadius(48), // Image radius
        child: Image.network('imageUrl', fit: BoxFit.cover),
      ),
    )
    

    

    final borderRadius = BorderRadius.circular(20); // Image border
    
    Container(
      padding: EdgeInsets.all(8), // Border width
      decoration: BoxDecoration(color: Colors.red, borderRadius: borderRadius),
      child: ClipRRect(
        borderRadius: borderRadius,
        child: SizedBox.fromSize(
          size: Size.fromRadius(48), // Image radius
          child: Image.network('imageUrl', fit: BoxFit.cover),
        ),
      ),
    )
    

    _{还有其他方法，比如使用DecoratedBox，但这会让答案有点太长}

Answer 2

您还可以使用Flitter附带的CircleAvatar

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

Answer 3

使用ClipRRect它将完美地工作。

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        subject['images']['large'],
        height: 150.0,
        width: 100.0,
    ),
)