如何在 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