Flutter card组件应用

（一）效果图

（二）实现要点：
card组件

图片比例 AspectRatio

图片填充 fit:BoxFit.cover

圆形头像 ClipOval(可以参考以前的头像实现的博客链接: [link](链接: link.)

ListView实现列表

（三）代码实现
我们用上一篇博客（链接: link.）的模板代码给大家做一个演示：

import 'package:flutter/material.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: [
        Card(
          margin: EdgeInsets.all(10),//外边距
          child: Column(//纵向排列组件
            children: [
              AspectRatio(//图片比例属性
                aspectRatio: 16 / 13,
                child: Image.asset(//引入本地图片
                  "images/master.jpg",
                  fit: BoxFit.cover,//填充整个容器
                ),
              ),
              ListTile(
                leading: ClipOval(//头像位置及图片圆形属性
                    child: Image.asset(
                  "images/mouse1.jpg",
                  fit: BoxFit.cover,
                  height: 60,
                  width: 60,
                )),
                title: Text("master", style: TextStyle(fontSize: 28)),
                subtitle: Text("是最帅的", style: TextStyle(fontSize: 18)),
              )
            ],
          ),
        ),
        Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: [
                ListTile(
                  leading: ClipOval(child: Image.asset("images/mouse2.jpg")),
                  title: Text("你会永远对我好", style: TextStyle(fontSize: 20)),
                )
              ],
            )),
      ],
    );
//例子
    // return ListView(
    //   children: [
    //     Card(
    //       margin: EdgeInsets.all(10),
    //       child: Column(
    //         children: [
    //           ListTile(
    //             title: Text("master",style: TextStyle(
    //               fontSize: 28
    //             ),
    //             ),
    //             subtitle: Text("是最帅的"),
    //           ),
    //           ListTile(
    //             title: Text("电话"
    //             ),
    //             ),
    //              ListTile(
    //             title: Text("微信"
    //             ),
    //             ),
    //         ],
    //       ),
    //     )
    //   ],
    // );

   
  }
}