Flutter 页面布局 Card组件 实现通讯录卡片和图文列表布局

@override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          // 阴影效果
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10)
          ),
          // 阴影值的深度
          elevation: 2,
          // 背景颜色
          color: Colors.white,
          // shadowColor: Colors.red,
          margin:const EdgeInsets.all(10),
          child:const Column(
            children: [
              ListTile(
                title: Text(
                  "张三",
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text("flutter 工程师"),
              ),
              Divider(),
              ListTile(
                title: Text("电话：13800138000"),
              ),
              ListTile(
                title: Text("地址：广东省东莞"),
              ),
            ],
          ),
        ),
        Card(
          // 阴影效果
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10)
          ),
          // 阴影值的深度
          elevation: 2,
          // 背景颜色
          color: Colors.white,
          // shadowColor: Colors.red,
          margin:const EdgeInsets.all(10),
          child:const Column(
            children: [
              ListTile(
                title: Text(
                  "李四",
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text("flutter 工程师"),
              ),
              Divider(),
              ListTile(
                title: Text("电话：13800138000"),
              ),
              ListTile(
                title: Text("地址：广东省东莞"),
              ),
            ],
          ),
        ),
        Card(
          // 阴影效果
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10)
          ),
          // 阴影值的深度
          elevation: 2,
          // 背景颜色
          color: Colors.white,
          // shadowColor: Colors.red,
          margin:const EdgeInsets.all(10),
          child:const Column(
            children: [
              ListTile(
                title: Text(
                  "王五",
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text("flutter 工程师"),
              ),
              Divider(),
              ListTile(
                title: Text("电话：13800138000"),
              ),
              ListTile(
                title: Text("地址：广东省东莞"),
              ),
            ],
          ),
        )
      ],
    );
  }

List _listCard(){
    return carData.map((value){
      return Card(
          // 阴影效果
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          // 阴影值的深度
          elevation: 2,
          // 背景颜色
          color: Colors.white,
          // shadowColor: Colors.red,
          margin: const EdgeInsets.all(10),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "${value["picurl"]}",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: ClipOval(
                  child: Image.network(
                    value["picurl"],
                    fit: BoxFit.cover,
                    width: 40,
                    height: 40,
                  ),
                ),
                title: Text(value["title"]),
                subtitle: Text(value["name"]),
              )
            ],
          ),
        );
    }).toList();

  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _listCard(),
    );
  }