Flutter中的Card

1. 基本介绍

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

2. 属性介绍

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

3. 代码示例

   import 'package:flutter/material.dart';
   
   class CardExampleWidget 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),),
         ),
       );
     }
   }

4. 小结

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