【问题标题】:How to let an image extend while controlling its width and giving it a border-radius in Flutter如何在控制图像宽度的同时让图像扩展并在 Flutter 中为其赋予边框半径
【发布时间】:2021-02-23 06:35:55
【问题描述】:

我在 Flutter 工作,在那里我有一个 ListView,我在其中显示了很多图像,我需要这些图像具有相同的宽度,但它们可以根据它们的原始高度进行扩展,即我想要对图像的宽度,但不是高度。它应该如下图所示:

而我现在编写的代码强制每个图像具有相同的高度。代码如下:

                               Container(
                                  width: MediaQuery.of(context).size.width * .9,
                                  height: MediaQuery.of(context).size.height * .6,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(35),
                                      image: DecorationImage(
                                          image: NetworkImage(memes[index].link),
                                        fit: BoxFit.fill
                                      )
                                  ),
                                ),

非常感谢!

【问题讨论】:

    标签: image flutter widget


    【解决方案1】:

    如果没有height,小部件将不会出现,我建议计算图像高度宽度,然后根据图像数据中的高度构建小部件可以解决您的问题。 您可以使用此函数获取图像大小

      Future<Size> _calculateImageDimension(link) {
        Completer<Size> completer = Completer();
        Image image = Image.network(link);
        image.image.resolve(ImageConfiguration()).addListener(
          ImageStreamListener(
                (ImageInfo image, bool synchronousCall) {
              var myImage = image.image;
              Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
              completer.complete(size);
            },
          ),
        );
        return completer.future;
      }
    

    我希望这能解决你的问题。

    【讨论】:

    • 好的,但是我如何将它与 MediaQuery 一起使用,没有它我无法使用它
    • 我不明白你为什么需要使用 mediaQuery height 。你的屏幕高度来自MediaQuery,然后你有另一个高度来自_calculateImageDimension,你需要从这两个中计算一个百分比并使用它。
    • 对不起,我该怎么办?
    • ``` Container( width: MediaQuery.of(context).size.width * .9, height: , 装饰: BoxDecoration(borderRadius: BorderRadius.circular(35), image: DecorationImage( image: NetworkImage(memes[index].link), fit: BoxFit.fill ) ), ) ```
    • 是的,我试过了,它不起作用,图像太拉伸了
    猜你喜欢
    • 2020-02-01
    • 2019-07-11
    • 1970-01-01
    • 1970-01-01
    • 2019-01-04
    • 1970-01-01
    • 1970-01-01
    • 2014-07-12
    • 2021-09-06
    相关资源
    最近更新 更多