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

試試這個，然后讓我知道。