Flutter动态循环卡片组件

（一）效果图

（二）实现要点

listData.map((value) {}).toList()

（三）代码实现
导入数据文件
里面的代码可以参考如下：

List listData = [
{  "title":"master", 
 "author":"是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的",   "imageUrl":"images/master.jpg",},
 {  "title":"最帅", 
  "author":"candy", 
   "imageUrl":"images/mouse1.jpg",}]

以下是详细代码可直接复制运行

import 'package:flutter/material.dart';
import 'listData_img.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: Carddemo(),
    ));
  }
}

class Carddemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((value) {
        return Card(
          margin: EdgeInsets.all(10), //外边距
          child: Column(
            //纵向排列组件
            children: [
              AspectRatio(
                //图片比例属性
                aspectRatio: 16 / 13,
                child: Image.asset(
                  value["imageUrl"],
                  fit: BoxFit.cover, //填充整个容器
                ),
              ),
              ListTile(
                leading: ClipOval(
                    //头像位置及图片圆形属性
                    child: Image.asset(
                  value["imageUrl"],
                  fit: BoxFit.cover,
                  height: 60,
                  width: 60,
                )),
                title: Text(value["title"], style: TextStyle(fontSize: 28)),
                subtitle: Text(value["author"],
                    overflow: TextOverflow.ellipsis, 
                    maxLines: 2,//文本溢出
                    style: TextStyle(fontSize: 18,color: Colors.black)
              )
              )],
          ),
        );
      }).toList(),
    );
  }
}