技術標籤：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: <Widget>[
              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(),
    );
  }
}