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

Question

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

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

我尝试使用context.size.width：

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

但出现以下错误：

  

在构建过程中无法获取大小。

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

有什么方法可以获取项目的父项（列表视图）的宽度，并使用它来动态计算其范围吗？

谢谢。

Answer 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。

Answer 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