Question

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

图像大小是在“图像”小部件中设置的，但是如果未将外部容器的高度值设置为黑色，则会出现黑屏。

我的问题是，如何设置窗口小部件高度以包装子窗口小部件，这样就无需设置外部容器的高度？

这是我的代码：

         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和其他框，但是据我了解，您真正想要的是不设置两次大小。那么，为什么不从width中删除hegiht和FadeInImage并将其设置为容器呢？并且由于您已经设置了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.
    );

Flutter嵌套列表的大小

1 个答案: