颤动中的圆角图像

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

使用ClipRRect它将完美地工作

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

Answer 2

尝试使用 CircleAvatar 并使用CachedNetworkImage加载图像。

CircleAvatar(
  radius: 45,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl:  "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

2. 如果你还想要边框，那么添加

backgroundColor: Colors.deepOrangeAccent,

里面这个

CircleAvatar(
  radius: 45,
  backgroundColor: Colors.deepOrangeAccent,
  child: ClipOval(
    child: CachedNetworkImage(
      imageUrl: "https:// your image url path",
      fit: BoxFit.cover,
      width: 80,
      height: 80,
    ),
  ),
),

Answer 3

您还可以使用CircleAvatar随颤振附带的

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

Answer 4

使用ClipRRect您需要对进行硬编码BorderRadius，因此，如果您需要完整的循环内容，请ClipOval改为使用。

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

Answer 5

We can use following ways to create Rounded Corners Image in Flutter.

Container:

Container(
  width: 150,
  height: 120,
  clipBehavior: Clip.antiAlias,
  decoration:  BoxDecoration(
    borderRadius: BorderRadius.circular(15) // Adjust the radius as needed
  ),
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
  ),
),

Card:

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  ),
  clipBehavior: Clip.antiAlias,
  elevation: 5.0,
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    width: 150,
    height: 120,
    fit: BoxFit.cover,
  ),
)

ClipRRect

ClipRRect(
  borderRadius: BorderRadius.circular(15), // Adjust the radius as needed
  child: Image.network(
    'https://picsum.photos/seed/picsum/200/300',
    fit: BoxFit.cover,
    width: 150,
    height: 120,
  ),
)

Physical Model:

PhysicalModel(
    color: Colors.transparent,
    borderRadius: BorderRadius.circular(10),
    clipBehavior: Clip.antiAlias,
    elevation: 5.0,
    child: Image.network(
      'https://picsum.photos/seed/picsum/200/300',
      width: 150,
      height: 120,
      fit: BoxFit.cover,
    ))

Answer 6

尝试这种方式

Container(
        width: 100.0,
        height: 150.0,
        decoration: BoxDecoration(
          image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage('Path to your image')
              ),
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
          color: Colors.redAccent,
        ),

Answer 7

对于图像使用这个

ClipOval(
    child: Image.network(
        'https://url to your image',
        fit: BoxFit.fill,
    ),
);

而对于资产图像使用这个

ClipOval(
    child: Image.asset(
        'Path to your image',
        fit: BoxFit.cover,
    ),
)

Answer 8

使用新版本的 flutter 和 Material 主题，您也需要使用“Padding”小部件，以获得不填满其容器的图像。

例如，如果您想在 AppBar 中插入圆形图像，您必须使用填充，否则您的图像将始终与 AppBar 一样高。

希望这会帮助某人

InkWell(
        onTap: () {
            print ('Click Profile Pic');
        },
        child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipOval(
                child: Image.asset(
                    'assets/images/profile1.jpg',
                ),
            ),
        ),
    ),

Answer 9

                new Container(
                  width: 48.0,
                  height: 48.0,

                  decoration: new BoxDecoration(
                    shape: BoxShape.circle,
                    image: new DecorationImage(
                        fit: BoxFit.fill,
                        image: new NetworkImage("path to your image")
                    )
                )),

Answer 10

你可以像这样使用 ClipRRect ：

  Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(25),
                    child: Image.asset(
                      'assets/images/pic13.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ),
                )

您可以设置您的半径或用户，仅用于 topLeft 或左下角，例如：

Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25)
                ,bottomLeft: Radius.circular(25)),
                child: Image.asset(
                  'assets/images/pic13.jpeg',
                  fit: BoxFit.cover,
                ),
              ),
            )

Answer 11

使用 ClipRRect 并设置适合的图像属性：BoxFit.fill

ClipRRect(
          borderRadius: new BorderRadius.circular(10.0),
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('images/image.png'),
            width: 100.0,
            height: 100.0,
          ),
        ),

Answer 12

输出：

使用BoxDecoration

Container(
              margin: EdgeInsets.all(8),
              width: 86,
              height: 86,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                    image: NetworkImage('https://i.stack.imgur.com/0VpX0.png'),
                    fit: BoxFit.cover
                ),
              ), 
           ),

Answer 13

这是我使用过的代码。

Container(
      width: 200.0,
      height: 200.0,
      decoration: BoxDecoration(
        image: DecorationImage(
         image: NetworkImage('Network_Image_Link')),
        color: Colors.blue,
   borderRadius: BorderRadius.all(Radius.circular(25.0)),
      ),
    ),

谢谢！！！

Answer 14

您可以使用具有半径的 CircleAvatar 小部件：

CircleAvatar(
             radius: 50.0,
             backgroundImage: AssetImage("assets/img1.jpeg"),
            ),