颤动的列表视图中的多张卡片答案

【问题标题】：Multiple cards inside a listview in flutter颤动的列表视图中的多张卡片
【发布时间】：2026-01-12 10:35:01
【问题描述】：

我是 Flutter 的初学者。我想在下面代码中提到的列表视图中添加另一张卡片。

  Widget section4 = Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
);

我试过这个，但它显示错误。另外，有没有一种方法可以让我在 Flutter 中使用循环来创建这个列表？

Widget section4 = Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
  ),
);

【问题讨论】：

标签： flutter dart flutter-layout flutter-web

【解决方案1】：

您可以像这样简单地使用ListView.builder()：

ListView.builder(
            itemCount: 3, // the length
            itemBuilder: (context, index) {
              return Container(
                padding: const EdgeInsets.only(bottom: 8),
                child: Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const ListTile(
                        leading: FlutterLogo(size: 56.0),
                        title: Text('Item 1'),
                        subtitle: Text('Item 1 subtitle'),
                        trailing: Icon(Icons.access_alarm),
                      ),
                    ],
                  ),
                ),
              );
            })

或者如果您想将小部件保存在单独的列表中，您也可以这样做：

 List<Widget> section4 = [
     Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
),
      Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
),
      Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
)
     ];

然后只需将其放在具有 children 属性的小部件中：

 body:  Column(
                children: section4
          
)

【讨论】：

使用 ListView.builder() 后，我从渲染库中得到异常。 1. getter 'scrollOffsetCorrection' 在 null 上被调用。 2. 'debugAssertIsValid' 方法在 null 上被调用。 3. getter 'visible' 在 null 上被调用。
这可能与您的其他代码不同。当您未初始化列表时，通常会发生这些错误。
谢谢。在 ListView.builder 中添加 shrinkWrap: true 后，它现在可以工作了。
有没有办法索引项目？所有条目都显示为第 1 项，带有相同的副标题。
将 Text 小部件中的 1 替换为 $index（在构建函数中传递的值）