Flutter 之 Card （五十九）

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

1. Card 介绍

Card 定义

  const Card({
    Key? key,
    this.color,
    this.shadowColor,
    this.elevation,
    this.shape,
    this.borderOnForeground = true,
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  })

Card 属性介绍

2. 示例

class MSCardDemo1 extends StatelessWidget {
  const MSCardDemo1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: EdgeInsets.all(50),
        children: [
          Card(
            color: Colors.amber,
            shadowColor: Colors.pinkAccent,
            elevation: 10.0,
            borderOnForeground: false,
            child: Container(
              height: 60,
              alignment: Alignment.center,
              color: Colors.cyan,
              child: Text("Normal Card"),
            ),
          ),
          SizedBox(height: 20),
          Card(
            color: Colors.red, // 背景色
            shadowColor: Colors.yellow, // 阴影颜色
            elevation: 10.0, // 阴影高度
            shape: CircleBorder(), // 圆形
            borderOnForeground: true, //  是否在 child 前绘制 border，默认为 true
            margin: EdgeInsets.all(20), // 外边距
            child: Container(
              height: 60,
              alignment: Alignment.center,
              child: Text("Circle Card"),
            ),
          ),
          SizedBox(height: 20),
          Card(
            color: Colors.amber,
            shadowColor: Colors.green,
            elevation: 10.0,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
            child: Container(
              height: 80,
              alignment: Alignment.center,
              child: Text("RoundedRectangle Card"),
            ),
          ),
          SizedBox(height: 20),
          Card(
            color: Colors.pink,
            shadowColor: Colors.purple[200],
            elevation: 10.0,
            shape:
                StadiumBorder(side: BorderSide(color: Colors.cyan, width: 3.0)),
            child: Container(
              height: 60,
              alignment: Alignment(0, 0),
              child: Text("Stadium Card"),
            ),
          ),
          SizedBox(height: 20),
          Card(
            color: Colors.yellow,
            shadowColor: Colors.redAccent,
            elevation: 10.0,
            shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.circular(12.0)),
            child: Container(
              height: 70,
              alignment: FractionalOffset(0.5, 0.5),
              child: Text("BeveledRectangle Card"),
            ),
          ),
        ],
      ),
    );
  }
}

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