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)
        )
    );
  }

我想保持我的图像比例。

我在这里想念什么？

标签： flutterdartrounded-cornersclipflutter-pageview

Answer 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)
      ),
    );
  }