import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: LayoutDemo(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  var listData = [
    {
      "imageUrl":
          "https://t7.baidu.com/it/u=2077212613,1695106851&fm=193&f=GIF",
      "avatar": "https://t7.baidu.com/it/u=4247504554,990765661&fm=193&f=GIF",
      "title": " IUCN更新濒危物种红色名录：中国“淡水鱼之王”长江白鲟灭绝",
      "value": "印度迎来第二位女总统，出身于部落的莫尔穆有何来历？"
    },
    {
      "imageUrl": "https://t7.baidu.com/it/u=3504622646,225353943&fm=193&f=GIF",
      "avatar": "https://t7.baidu.com/it/u=1747572559,3334469159&fm=193&f=GIF",
      "title": "中国持有美债跌破万亿美元，但减持没有想象的那么多",
      "value": "因起争执河北一男子将朋友砍伤致死 自己驾车逃跑时发生车祸送医"
    },
    {
      "imageUrl": "https://t7.baidu.com/it/u=45420152,3295449180&fm=193&f=GIF",
      "avatar": "https://t7.baidu.com/it/u=4282028757,3350906562&fm=193&f=GIF",
      "title": "女子订婚照被造谣是会所技师，未婚夫：她整夜失眠，朋友帮澄清也被骂",
      "value": "http://img8.zol.com.cn/bbs/upload/23765/23764201.jpg"
    },
    {
      "imageUrl":
          "https://t7.baidu.com/it/u=1829971058,1795576963&fm=193&f=GIF",
      "avatar": "https://t7.baidu.com/it/u=1793113132,943839522&fm=193&f=GIF",
      "title": "深圳查获多起海上偷渡案：8人凌晨靠岸被抓 一偷渡团伙主犯获刑9年",
      "value": "事关防汛！河南郑州市委书记紧急部署，市长赶赴现场督导检查"
    },
  ];

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((e) {
        return CardCJSJS(e["imageUrl"], e["avatar"], e["title"], e["value"]);
      }).toList(),
    );
  }
}

class CardCJSJS extends StatelessWidget {
  String? imageUrl;
  String? avatar;
  String? title;
  String? value;
  CardCJSJS(this.imageUrl, this.avatar, this.title, this.value);

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10),
      child: Column(
        children: [
          AspectRatio(
            aspectRatio: 16 / 9,
            child: Image.network(
              this.imageUrl!,
              fit: BoxFit.cover,
            ),
          ),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(this.avatar!),
            ),
            title: Text(this.title ?? ""),
            subtitle: Text(
              this.value ?? "",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          )
        ],
      ),
    );
  }
}