ListView 获取孩子的维度

Question

像标题一样，我试图在 ListView 中放置一些元素，并具有一定的高度和宽度（动态获取），所以我不想硬编码 ListView 的尺寸。
是否有任何方法可以将ListView 的高度设置为其子项的高度？

class HomepageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(22),
              child: Column(
                children: <Widget>[
                  // OTHER WIDGETS
                ],
              ),
            ),
            Container(
              height: 80,
              child: ListView.builder(
                itemCount: rectangles.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  CustomRectangle rectangle = rectangles[index];
                  return GestureDetector(
                    onTap: () => print('detailed'),
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      child: RectangleWidget(
                        color: rectangle.color,
                        height: rectangle.height,
                        width: rectangle.width,
                        title: rectangle.title,
                        subtitle: rectangle.subtitle,
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

提前致谢：)

Answer 1

我找到的解决方案是创建一个返回双精度的方法：

方法

  double getHeightOfRectangle(List<CustomRectangle> rectangles) {
    if (rectangles.isNotEmpty) {
      return rectangles.map((e) => e.height).reduce(max);
    }
    return 80.0;
  }

使用方法

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(22),
              child: Column(
                children: <Widget>[
                  // OTHER WIDGETS
                ],
              ),
            ),
            Container(
              height: getHeightOfRectangle(rectangles),
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: rectangles.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  CustomRectangle rectangle = rectangles[index];
                  return GestureDetector(
                    onTap: () => print('detailed'),
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      child: RectangleWidget(
                        color: rectangle.color,
                        height: rectangle.height,
                        width: rectangle.width,
                        title: rectangle.title,
                        subtitle: rectangle.subtitle,
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以使用shrinkWrap: true 实现您要查找的内容，您可以更改此行为，以便 ListView 只占用它需要的空间（当有更多项目时它仍然会滚动）。

在你的情况下最终会是这样的：

class HomepageScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(22),
              child: Column(
                children: <Widget>[
                  // OTHER WIDGETS
                ],
              ),
            ),
            ListView.builder(
              //Apparently only works on a vertical scroll direction
              shrinkWrap: true,
              itemCount: rectangles.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (BuildContext context, int index) {
                CustomRectangle rectangle = rectangles[index];
                return GestureDetector(
                  onTap: () => print('detailed'),
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: 20),
                    child: RectangleWidget(
                      color: rectangle.color,
                      height: rectangle.height,
                      width: rectangle.width,
                      title: rectangle.title,
                      subtitle: rectangle.subtitle,
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}