时间戳

首页 > 解决方案 > 颤动的列表视图中的多张卡片

flutter - 颤动的列表视图中的多张卡片

问题描述

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

标签： flutterdartflutter-layoutflutter-web

解决方案

你可以简单地使用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
          
)

推荐阅读