Flutter学习笔记十二——Card Widget卡片组件布局

Card Widget

类似于material design里的CardView，以物理卡片的形态进行展示。
来看示例效果图：

card.jpg

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Widget'),
          backgroundColor: Colors.deepPurple,
        ),
        body: Center(
          child: MyCardWidget(),
        ),
      ),
    );
  }
}

class MyCardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white30,
      margin: EdgeInsets.all(10.0),
      child: Column(
        children: [
          ListTile(
            title: Text(
              "齐达内选择皇马新三叉戟",
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text('阿扎尔、姆巴佩、博格巴，MPH组合：“冒牌货组合”'),
            leading: Icon(
              Icons.filter_1,
              color: Colors.lightBlue,
            ),
          ),
          Divider(),
          ListTile(
            title: Text(
              "锤子软件10位高管集体退出,罗永浩卸任法人代表",
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text(
                '锤子软件(北京)有限公司近日发生工商变更，法定代表人从罗永浩变更为温洪喜，锤子科技CTO钱晨、陌陌CEO唐岩等10位高管从主要人员中移除'),
            leading: Icon(
              Icons.filter_2,
              color: Colors.lightBlue,
            ),
          ),
          Divider(color: Colors.grey),
          ListTile(
            title: Text(
              "湖人有意用卡莱尔替代沃顿？",
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text('库班回应：哈哈哈'),
            leading: Icon(
              Icons.filter_3,
              color: Colors.lightBlue,
            ),
          ),
          Divider(color: Colors.grey),
        ],
      ),
    );
  }
}

Card()组件的child:使用了Column垂直布局,并使用ListTile()进行填充。Divider()是分割线，也可以使用color:属性添加颜色。在ListTile()中使用title:标题加粗，subtitle:副标题和leading:图标。
Card Widget就简单的介绍到这了。