Flutter 嵌套列表大小

Question

我正在尝试构建一个垂直列表，其中每个项目都是图像水平列表。

图像大小在图像小部件中设置，但如果我没有设置具有高度值的外部容器，则会出现黑屏。

我的问题是，如何设置 Widget 高度来包装子小部件，这样我就不需要设置外部容器高度？

这是我的代码：

         return ListView.builder( //External vertical list
        padding: EdgeInsets.all(2),
        itemCount: snapshot.data.length,
        physics: ScrollPhysics(),
        scrollDirection: Axis.vertical,
        itemBuilder: (context, outerIndex) {
          print(
              "Outer ListView.builder: building item $outerIndex of ${snapshot.data.length} items");
          return Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(5.0),
                height: 300, //When I remove Container and height value, I get black screen
                child: ListView.builder( //Internal horizontal list
                    itemCount: snapshot.data[outerIndex].items.length,
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    itemBuilder: (context, mediaIndex) {
                      print("Inner ListView.builder: mediaItem $mediaIndex");
                      return Container(
                        padding: EdgeInsets.symmetric(horizontal: 5),
                        child: FadeInImage.memoryNetwork(
                          height: 300,
                          width: 160,
                          placeholder: kTransparentImage,
                          image: TmdbService.buildImageUrl(snapshot.data[outerIndex].items[mediaIndex].poster_path),
                          fit: BoxFit.fill,
                        ),
                      );
                    }),
              ),
            ],
          );
        },
      );
    }
  },
);

Answer 1

删除height: 300, 确实没有绘制任何内容，但它也引发了异常：

I/flutter (12081): The following assertion was thrown during performLayout():
I/flutter (12081): 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1598 pos 16:
I/flutter (12081): 'constraints.hasBoundedHeight': is not true.

所以你可以玩BoxConstraints 和我在评论中写的其他框，但据我了解，你真正想要的不是将大小设置两次。那么为什么不从FadeInImage 中删除width 和hegiht 并将它们设置为容器呢？而且由于您已经设置了fit: BoxFit.fill，因此图像将填满所有可用容器的空间。 所以以下对我有用：

return Scaffold(
      body: ListView.builder(
        //External vertical list
        padding: EdgeInsets.all(2),
        physics: ScrollPhysics(),
        scrollDirection: Axis.vertical,
        itemBuilder: (context, outerIndex) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                padding: EdgeInsets.all(5.0),
                height:300,
                child: ListView.builder(
                    //Internal horizontal list
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    itemBuilder: (context, mediaIndex) {
                      print("Inner ListView.builder: mediaItem $mediaIndex");
                      return Container(
                        padding: EdgeInsets.symmetric(horizontal: 5),
                        child: FadeInImage.memoryNetwork(
                          placeholder: kTransparentImage,
                          image:
                              "https://i.pinimg.com/originals/8a/ad/dc/8aaddc2ab4cfd6a0b17f82e04ed4800d.png",
                          fit: BoxFit.fill,
                        ),
                      );
                    }),
              ),
            ],
          );
        },
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );