card-组件布局_flutter

 

 

import 'package:flutter/material.dart';
import 'res/listData.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("flutterDemo")),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
        children: listData.map((value) {
      return Card(
        margin: EdgeInsets.all(10),
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 20 / 9,
              child: Image.network(value['imageUrl'], fit: BoxFit.cover),
            ),
            SizedBox(height: 10),
            ListTile(
                leading: CircleAvatar(
                    backgroundImage: NetworkImage(value['imageUrl'])),
                title: Text(value['title']),
                subtitle: Text(
                  value['description'],
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                )),
          ],
        ),
      );
    }).toList());
  }
}