一、源碼解讀

/// 生成一個(gè)圓角卡片并帶有陰影
/// 常用于，電話、地理位置、卡片等
class Card extends StatelessWidget {
  const Card({
    Key? key,
    this.color, 
    this.shadowColor, 
    this.elevation, 
    this.shape,
    this.borderOnForeground = true,
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  }) : assert(elevation == null || elevation >= 0.0),
       assert(borderOnForeground != null),
       super(key: key);

  /// 卡片背景色
  final Color? color;

  /// 卡片的陰影色
  final Color? shadowColor;

  /// Z 坐標(biāo)控制陰影大小
  final double? elevation;

  /// 設(shè)置卡片的樣式，默認(rèn)圓角為 4
  /// RoundedRectangleBorder 圓角矩形的矩形邊框
  /// BeveledRectangleBorder   有傾斜面的矩形邊框
  /// ContinuousRectangleBorder  連續(xù)的矩形邊框  
  /// CircleBorder 圓角邊框
  final ShapeBorder? shape;

  ///  設(shè)置邊框在子組件的位置
  ///  true: 邊框在前；否則反之
  final bool borderOnForeground;

  /// 剪輯小部件的方法
  /// none: 沒有裁剪
  /// hardEdge: 裁剪，但不抗鋸齒
  /// antiAlias: 帶抗鋸齒裁剪
  /// antiAliasWithSaveLayer: 在剪輯之后立即使用抗鋸齒和 saveLayer 剪輯
  final Clip? clipBehavior;

  ///  卡片周圍的空白區(qū)域，默認(rèn) 4 .
  final EdgeInsetsGeometry? margin;

  /// 將所有的語義標(biāo)簽匯聚到此小部件
  final bool semanticContainer;

  /// 卡片組件的子組件
  final Widget? child;
  
  /// 控制陰影 z 軸大小，參數(shù)默認(rèn)值
  static const double _defaultElevation = 1.0;

  @override
  Widget build(BuildContext context) {
    /// 獲取主題
    final ThemeData theme = Theme.of(context);
    /// 獲取卡片主題
    final CardTheme cardTheme = CardTheme.of(context);
    /// 創(chuàng)建語義注釋
    return Semantics(
      // 是否集合語義標(biāo)簽
      container: semanticContainer,
      child: Container(
        // 卡片外空白，如果 margin 沒有值，則使用卡片主題的 margin ,如果卡片主題的 margin 也不存在，則默認(rèn)為 4 的邊距
        margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(4.0),
        child: Material(
          // 卡片類型
          type: MaterialType.card, 
          // 陰影顏色，如果沒有，則使用卡片主題的陰影顏色；如果卡片主題陰影顏色也沒有，則使用系統(tǒng)主題陰影色
          shadowColor: shadowColor ?? cardTheme.shadowColor ?? theme.shadowColor,
          // 背景顏色，如果沒有，則使用卡片主題的背景顏色；如果卡片主題背景顏色也沒有，則使用系統(tǒng)主題背景色
          color: color ?? cardTheme.color ?? theme.cardColor,
          // 卡片 Z 軸陰影大小
          elevation: elevation ?? cardTheme.elevation ?? _defaultElevation,
          // 卡片的形狀，如果沒設(shè)置，就取卡片主題的形狀；如果卡片主題形狀也沒設(shè)置，則使用默認(rèn)為 4 的圓角矩形形狀
          shape: shape ?? cardTheme.shape ?? const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(4.0)),
          ),
          // 控制形狀是在子組件前還是在后，默認(rèn)在前（true）
          borderOnForeground: borderOnForeground,
          // 卡片的裁剪模式，如果沒有設(shè)置，就取卡片主題的裁剪模式；如果卡片主題裁剪樣式?jīng)]有設(shè)置，則使用不做任何裁剪
          clipBehavior: clipBehavior ?? cardTheme.clipBehavior ?? Clip.none,
          child: Semantics(
            /// 是否允許該widget的后代向該widget注解的[SemanticsNode]添加語義信息。
            explicitChildNodes: !semanticContainer,
            child: child,
          ),
        ),
      ),
    );
  }
}

二、總結(jié)

• Card 是繼承于 StatelessWidget
• Card 樣式設(shè)置，首先獲取當(dāng)前的設(shè)置，如果當(dāng)前沒有設(shè)置，則獲取卡片主題的樣式；如果卡片主題的樣式也沒設(shè)置，則使用默認(rèn)的或者系統(tǒng)的樣式
• Card的層級(jí)是: Semantics -> Container -> Material -> Semantics -> child

三、實(shí)例

Card(
  elevation: 1,
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.green,
      width: 3,
    ),
  ),
  borderOnForeground: false,
  clipBehavior: Clip.antiAlias,
  margin: EdgeInsets.all(20),
  shadowColor: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(20.0),
    child: Text('Card  測(cè)試'),
  ),
)