flutter - PageView 内的圆角图像保持 Flutter 比例

Question

我有一个PageView，里面有图像列表。我想保持图像比例并为其设置圆角。

通常，我可以在简单列表或单个图像中剪切图像。

但在这种情况下，ClipRRect 没有包裹图像，当我将大小设置为红色Container 时，什么也没有发生。

结果:

代码:

double maxiHeight = 250;
  List<Widget> postList = [];

  @override
  void initState() {
    for(Post p in Model.instance.postList) {
      postList.add(post(p));
    }
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Container(
      height: maxiHeight,
      child: PageView(
          controller: PageController(viewportFraction: 0.5),
          children: postList
      ),
    );
  }


  Widget post(Post post) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(20),
        child: Container(
            margin: EdgeInsets.only(right: 10),
            color: Colors.red,
            child: Image.network(post.thumb, height: 50)
        )
    );
  }

我想保持图像比例。

我在这里缺少什么？

Answer 1

关于您的代码片段，您首先提供右侧边距，然后用 ClipRRect 包装。这里主容器正在获取其大小，然后使用边距，在使用 ClipRRect 包装后，它会避免从右侧到 Clip 的 10px。这就是我们获得当前输出的方式。

但是我们希望在容器外部填充并且没有边框半径。意思是在装饰图像之后，只提供一些填充。您可以按照此操作并使用 fit: BoxFit.cover 将覆盖小部件尺寸。

      Center(
              child: Padding(
                padding: EdgeInsets.only(right: 10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Container(
                    // margin: EdgeInsets.only(right: 10),// not here
                    color: Colors.red,
                    child: Image.network(
                      // post.thumb,
                      "https://unsplash.it/1440/3040?random",
                      // fit: BoxFit.fitHeight,
                      height: 150,
                    ),
                  ),
                ),
              ),
            ),