PageView内的圆角图像保持比例Flutter答案

【问题标题】：Rounded corners Image inside PageView keeping ratio FlutterPageView内的圆角图像保持比例Flutter
【发布时间】：2021-11-12 08:32:31
【问题描述】：

我有一个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)
        )
    );
  }

我想保持我的图像比例。

我在这里错过了什么？

【问题讨论】：

标签： flutter dart rounded-corners clip flutter-pageview

【解决方案1】：

使用以下修改后的代码应该可以工作：

@override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 500.0,
        child: ListView(scrollDirection: Axis.horizontal, children: postList),
      ),
    );
  }

  Widget post(String uri) {
    return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 5.0),
       child: ClipRRect(
         borderRadius: BorderRadius.circular(20),
         child: Image.network(uri, fit: BoxFit.fitHeight)
      ),
    );
  }

【讨论】：

抱歉这种情况下不能使用listView
为什么？ PageView 不适用于动态宽度。
您到底想达到什么目标？使用 PageView 您已经通过viewportFraction 定义了宽度，然后定义了高度。 PageView 无法动态调整子项的宽度。
我已经知道这一点，这是使用列表时的一个很好的解决方案。我需要在这里为用例提供快照效果和慢速滑动控制。我也知道存在插件来模仿列表的 PageView 行为，但我在我的应用程序中与此冲突。感谢回复

【解决方案2】：

关于您的代码 sn-p，您首先提供边距，然后用 ClipRRect 包装。这里主容器正在获取它的大小，然后使用边距，在用ClipRRect 包裹之后，它从右到剪辑避免了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,
                    ),
                  ),
                ),
              ),
            ),

【讨论】：

同意我正在快速编写此示例的余量。但是，我不想使用 Boxfit.cover ，正如我在问题中所说的那样，我想保持初始图像比例。有了这个盒子适合比例被打破了
意味着图像将获得精确尺寸并具有角边框？
是的，就像我的屏幕截图一样，但有圆角。它在简单列表中工作正常，但不是在这里，不知道为什么
你用的是height: 50，是不是说你喜欢合适的身高？
我已经更新了小部件，现在可以解决您的问题了吗？

【解决方案3】：

尝试将 BoxFit.cover 添加到 Image.network 小部件

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, fit: BoxFit.cover,),
        )
    );
  }

【讨论】：

我需要保持我的图像比例，我不能使用 box fit