Flutter入门（41）：Flutter 组件之 Card 详解

1. 基本介绍

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

2. 示例代码

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

3. Card 属性介绍

Card 属性	介绍
color	卡片背景色
shadowColor	阴影颜色
elevation	阴影高度
shape	形状 BorderShape
borderOnForeground	是否在 child 前绘制 border，默认为 true
margin	外边距
clipBehavior	裁剪方式
child	子控件
semanticContainer	是否使用新的语义节点，默认为 true。语义这个东西用途没有那么大，不用太过在意，在看页面层级的Debug 模式下组件展示方式会按照设置的语义标签展示。

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 带了一个默认的圆角和阴影，没有太多属性。