Flutter：水平使用无限滚动 ListView

Question

我正在使用 flutter 包infiniteListView以获得用户可以点击的无限滚动天数的水平列表。

这是我收到的以下错误

The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example 
if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting aflex
on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
space in the vertical direction.

这是我的代码

 Widget build(BuildContext context) {
    return Container(
        // Leave margin here for top bar
        color: Colors.grey[900],
        padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
        child: (Column(children: [
     Expanded(
            child: InfiniteListView.builder(
                scrollDirection: Axis.horizontal,
                controller: _infiniteController,
                anchor: 0.5,
                itemBuilder: (BuildContext context, int index) {
                  return Material(
                    child: InkWell(
                      
                      onTap: () {},
                      child: ListTile(
                        
                        title: Text('Item #$index'),
                        subtitle: Text('Subtitle $index'),
                        trailing: const Icon(Icons.chevron_right),
                      ),
                    ),
                  );
                }),
          ),

        ])));
  }

Answer 1

用固定宽度包裹你的ListTile ，默认情况下ListTile采用全宽（类似于double.infinity ）。 我们的Axis.horizontal,也将采用double.infinity ，这就是错误的来源。

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        // Leave margin here for top bar
        color: Colors.grey[900],
        padding: EdgeInsets.fromLTRB(10.0, 20.0, 10.0, 5.0),
        child: (Column(mainAxisSize: MainAxisSize.min, children: [
          Expanded(
          
            child: InfiniteListView.builder(
              // itemCount: 222,
              scrollDirection: Axis.horizontal,
              controller: _infiniteController,
              anchor: 0.5,
              itemBuilder: (BuildContext context, int index) {
                return Material(
                  child: InkWell(
                    onTap: () {},
                    child: SizedBox(
                      width: 100,
                      child: ListTile(
                        title: Text('Item #$index'),
                        subtitle: Text('Subtitle $index'),
                        trailing: const Icon(Icons.chevron_right),
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ])),
      ),
    );
  }

Answer 2

解决方案1：

• 列具有无界约束（无限高）。 将你的 InfiniteLiewView 包装成一个 SizedBox(height 300: child: //InfiniteListView);

解决方案2：

• 如果这不起作用，则将 shrinkWrap: true 传递给 InfiniteLiewView，

解决方案3：

• 将你的 Column 包装成一个 SizedBox(height 400, child: //code) 。

试试这个，然后让我知道。