如何限制 ClipRRect 图像的宽度？答案

【问题标题】：How to constrain width of ClipRRect image?如何限制 ClipRRect 图像的宽度？
【发布时间】：2021-06-11 12:50:20
【问题描述】：

有几篇帖子like this one 描述了如何使用 ClipRRect 为图像添加圆角。他们正在为我工作，除了我的图像没有正确限制宽度。例如，我在下面的方形图像上的尝试

ListView(                       // <- Works fine when not in ListView?
 children: <Widget>[
Padding(
  padding: const EdgeInsets.all(8.0),
  child: GestureDetector(
    onTap: () => _getFromGallery(),
    child: Container(
      color: Colors.blue,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(50.0), //or 15.0
        child: CachedNetworkImage(
          imageUrl: image,
          height: 150.0,
          width: 150.0,
          fit: BoxFit.cover,
        ),
      ),
    ),
  ),
),
]

有合适的高度，但宽度扩大了整个设备屏幕，像这样？

编辑

这次尝试

return Container(
    height: 150.0,
    width: 150.0,
    color: Colors.blue,
    child: ClipRRect(
      borderRadius: BorderRadius.circular(50.0), //or 15.0
      child: CachedNetworkImage(
        imageUrl: image,
        height: 150.0,
        width: 150.0,
        fit: BoxFit.fill,
      ),
    ),
  );

创造了这个

编辑#2

没有 ListView 的图片

【问题讨论】：

你可以试试 BoxFit.fill 吗？
将高度和宽度应用于容器本身也应该可以工作
@tanharpatel，我在上面添加了您的建议，但不幸的是仍然没有乐趣
@SahdeepSingh 不幸的是仍然没有快乐
Container 小部件的父级是什么？

标签： flutter

【解决方案1】：

从ListView的描述来看，“在横轴上，需要children填充ListView”。那么，ListView 是在扩展我的容器吗？无论哪种方式，将 Padding 包装在 Center 小部件中都可以修复它。

【讨论】：