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