如何在 Flutter 中的另一个小部件下方显示受限小部件？

Question

我想实现这样的东西：

它将是水平滚动的。

矩形是图像，我想制作它们的高度，例如。 200 和它们的宽度是屏幕宽度的最大值。 这个我很容易做，

但是我还想在它们下面显示一些文本，并且这些文本应该与图像一样宽。 现在简单地将图像+文本放在一个列中并没有帮助，因为如果文本更长，列的宽度会超出图像。 我怎么能做到这一点？

Answer 1

您可以将文本放置到其宽度等于其上方图像的容器中。

Answer 2

您可以简单地创建一个具有指定宽度的 SizedBox 小部件，它在启用了 shrinkWrap 的 ListView 中包含您的图像和文本。 这将使您的 UI 更加灵活、模块化并解决您的文本换行问题。

Answer 3

有几种可能性：

1- 定义您自己的图像尺寸：
代码：

ListView(
  scrollDirection: Axis.horizontal, children: [
         Column(
          children: [
             Image.network(
               'https://image.flaticon.com/icons/png/512/226/226770.png',
               height: 200,
               width: 200,
             ),
             Container(
               width: 200,
               child: Text(
               'Android is a mobile operating system  sponsored by Google '),
             ),
           ],
         ),
         Column(
           children: [
             Image.network(
               'https://img.icons8.com/ios/452/ios-logo.png',
               height: 200,
               width: 200,
             ),
             Container(
               width: 200,
               child: Text(
              'iOS is a mobile operating system created and developed by Apple Inc. '),
             ),
           ],
         )
       ])

2- 使用图像的尺寸来创建适应文本的容器。

使用此 function 检索图像的尺寸并使用这些尺寸调整文本。

Function：

Future<Size> getImageDimension() {
  Completer<Size> completer = Completer();
  Image image = Image.network("https://i.stack.imgur.com/lkd0a.png");
  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;
}

使用示例：

getImageDimension().then((size) => print("size = ${size}")); // 487.0,696.0