Flutter：获取 ListView 大小以创建动态项目大小答案

【问题标题】：Flutter: Get ListView size to create dynamic item sizesFlutter：获取 ListView 大小以创建动态项目大小
【发布时间】：2019-12-11 16:00:59
【问题描述】：

我正在尝试在 Flutter 中创建一个 ListView，其中项目宽度的总和就是 ListView 本身的宽度。

换句话说：我有 24 个项目，我希望每个项目的范围为 [ListView.width]/24。但是，我似乎无法在其构建器中获得列表视图的宽度。

我尝试使用 context.size.width:

 itemBuilder: (context, i) {
 return Container(
            width: context.size.width,
 //And so on....

但我收到以下错误：

在构建期间无法获取大小。

我还尝试在每个项目的根目录中使用 Extended，但可以预见的是它不起作用。

有没有办法获取item的父项（列表视图）的宽度，并用它来动态计算它的范围？

谢谢。

【问题讨论】：

我不确定我是否完全理解您的问题，您知道每个列表视图项目的大小，并且您正在尝试计算列表视图的总宽度，对吗？如果不是，根据我的理解，这将是鸡还是蛋的情况。
不，我想知道列表视图的宽度，以便计算每个项目的宽度。我知道它可能无限的内容，但在这种情况下，我的意思是列表视图在屏幕上的边界，无论内容如何。

标签： listview flutter dart

【解决方案1】：

如果您想让ListView 在小部件中水平显示一些项目，请将子项放在Row 中，并用Expanded 包装每个项：

ListView.builder(
  itemCount: 1,
  itemBuilder: (_, i) => Row(
    children: [
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
      Expanded(child: Container(height: 50, color: Colors.red)),
      Expanded(child: Container(height: 50, color: Colors.blue)),
    ],
  ),
),

如果您尝试在水平方向使用ListView 执行此操作，那么我建议您根本不要使用ListView。首先使用Row。

【讨论】：

我对 ListView 方法的投入如此之大，我并没有真正想过这样做。除非有更优雅的方法可以使用 ListView 来做到这一点，以免重复我的项目小部件 24 次，这是一个有效的答案。谢谢
@JacoboKoenig 这是一个实现效果的例子。 “更优雅”的方式是生成子小部件（例如，使用 buildChild 方法），返回包裹在 Expanded 中的每个子小部件，将这些子小部件中的每一个存储在一个列表中，然后将该列表传递给 @987654331 @ 行的属性。

【解决方案2】：

ScheduleBinding.instance.addPostFrameCallback((duration) {
    RenderBox box = _keyOfTheWidget.currentContext.getRenderObject();
    
    // For size of wiget
    Size size = box.size;

    // For position
    Offset offset = box.localToGlobal(Offset.zero);    

    setState(() => newSize = size);
});

使用此方法...它的 postFrameCallback 在小部件渲染后发生。您可以获取小部件的大小，然后将小部件重新绘制为您想要的大小。

Like here

【讨论】：