Flutter组件学习七-Card组件

Flutter Card组件学习

1、Card

1.1、属性

属性	说明
margin	外边距，EdgeInsets.all(10)
child	子组件
Shape	Card 的阴影效果，默认的阴影效果为圆角的 长方形边。

1.2、代码

实现ListView中包含 Card

lib/res/listData.dart中

List listData = [
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
    "detail":
        'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx  kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
  },
  {
    "title": 'Alibaba Shop',
    "author": 'Alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
    "detail":
        'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx  kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
  },
  {
    "title": 'Candy Shop',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
    "detail":
        'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx  kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
  },
  {
    "title": 'Tornado',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
    "detail":
        'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx  kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
  },
  {
    "title": 'Undo',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
    "detail":
        'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx  kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
    "detail":
        'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx  kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
  },
  {
    "title": 'white-dragon',
    "author": 'Mohamed Chahin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
    "detail":
        'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx  kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
  },
];

MyCardView

import 'package:flutter/material.dart';
//引用数据文件
import 'package:flutter_app/res/listData.dart';

class MyCardView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                  title: Text(
                    '小明',
                    style: TextStyle(fontSize: 26),
                  ),
                  subtitle: Text('java 工程师')),
              ListTile(
                  title: Text(
                '电话: xxxxxxxxx',
              )),
              ListTile(
                  title: Text(
                '住址: xxxxxxxxx',
              )),
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                  title: Text(
                    '小明',
                    style: TextStyle(fontSize: 26),
                  ),
                  subtitle: Text('java 工程师')),
              ListTile(
                  title: Text(
                '电话: xxxxxxxxx',
              )),
              ListTile(
                  title: Text(
                '住址: xxxxxxxxx',
              )),
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                  title: Text(
                    '小明',
                    style: TextStyle(fontSize: 26),
                  ),
                  subtitle: Text('java 工程师')),
              ListTile(
                  title: Text(
                '电话: xxxxxxxxx',
              )),
              ListTile(
                  title: Text(
                '住址: xxxxxxxxx',
              )),
            ],
          ),
        )
      ],
    );
  }
}

//List中使用Card显示一张图片，一个头像，一个title，一个subTitle
class MyCardView2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(
                  "https://www.itying.com/images/flutter/3.png",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(
                      "https://www.itying.com/images/flutter/3.png"),
                ),
                title: Text("xxxxxx"),
                subtitle: Text("xxxxxxxx"),
              )
            ],
          ),
        )
      ],
    );
  }
}

// 动态加载ListView 中的数据
class MyCardView3 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: 20 / 9,
                child: Image.network(
                  value["imageUrl"],
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(value["imageUrl"]),
                ),
                title: Text(value['title']),
                subtitle: Text(
                  value['detail'],
                  // 设置超过一行后，使用。。。
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          ),
        );
      }).toList(),
    );
  }
}