颤振中列表视图内的多张卡片

Question

我是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),
        ),
      ],
    ),
  ),
);

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

颤振中列表视图内的多张卡片

Multiple cards inside a listview in flutter

dart

flutter

flutter-layout

flutter-web