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更新瀕危物種紅色名錄：中國(guó)“淡水魚之王”長(zhǎng)江白鱘滅絕",
      "value": "印度迎來第二位女總統(tǒng)，出身于部落的莫爾穆有何來歷？"
    },
    {
      "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": "中國(guó)持有美債跌破萬億美元，但減持沒有想象的那么多",
      "value": "因起爭(zhēng)執(zhí)河北一男子將朋友砍傷致死 自己駕車逃跑時(shí)發(fā)生車禍送醫(yī)"
    },
    {
      "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": "女子訂婚照被造謠是會(huì)所技師，未婚夫：她整夜失眠，朋友幫澄清也被罵",
      "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人凌晨靠岸被抓 一偷渡團(tuán)伙主犯獲刑9年",
      "value": "事關(guān)防汛！河南鄭州市委書記緊急部署，市長(zhǎng)趕赴現(xiàn)場(chǎng)督導(dǎo)檢查"
    },
  ];

  @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,
            ),
          )
        ],
      ),
    );
  }
}