1. 基本介绍

Card 是 flutter 提供的一个卡片组件，提供了圆角和阴影，实际用途其实和 Container 差不多。Flutter 组件之 Container 详解

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. Card 属性介绍

4. Card 详解

Card 就是个容器，用途和 Container 很像，这里就不多赘述了，直接上代码。

import 'package:flutter/material.dart';

class FMCardVC extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text("Card"),),
      body: _listView(),
    );
  }
  
  ListView _listView(){
    return ListView(
      padding: EdgeInsets.all(30),
      children: [
        _normalCard(),
        Padding(padding: EdgeInsets.all(30)),
        _shapeCard()
      ],
    );
  }
  
  Card _normalCard(){
    return Card(
      color: Colors.red, // 背景色
      shadowColor: Colors.yellow, // 阴影颜色
      elevation: 20, // 阴影高度
      borderOnForeground: false, // 是否在 child 前绘制 border，默认为 true
      margin: EdgeInsets.fromLTRB(0, 50, 0, 30), // 外边距

      child: Container(
        width: 100,
        height: 100,
        alignment: Alignment.center,
        child: Text("Noraml Card", style: TextStyle(color: Colors.white),),
      ),
    );
  }
  
  Card _shapeCard(){
    return Card(
      color: Colors.red, // 背景色
      shadowColor: Colors.yellow, // 阴影颜色
      elevation: 20, // 阴影高度
      borderOnForeground: false, // 是否在 child 前绘制 border，默认为 true
      margin: EdgeInsets.fromLTRB(0, 50, 0, 30), // 外边距

      // 边框
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(40),
        side: BorderSide(
          color: Colors.yellow,
          width: 3,
        ),
      ),

      child: Container(
        width: 100,
        height: 100,
        alignment: Alignment.center,
        child: Text("Shape Card", style: TextStyle(color: Colors.white),),
      ),
    );
  }
}

Card.png

5. 技术小结

Card 其实就是 Container 带了一个默认的圆角和阴影，没有太多属性。