Flutter--Card组件

一、介绍

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,
  }) : assert(elevation == null || elevation >= 0.0),
       assert(borderOnForeground != null),
       super(key: key);

三、属性说明

属性	说明
color	颜色
shadowColor	阴影颜色
elevation	阴影大小
shape	圆角样式
margin	外边距
clipBehavior	内容溢出的剪切方式 Clip.none不剪切 Clip.hardEdge裁剪但不应用抗锯齿 Clip.antiAlias裁剪而且抗锯齿 Clip.antiAliasWithSaveLayer带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer
child	子组件

四、Card的demo

return Container(
      height: 300,
      child: Card(
        color: Colors.blue,
        shape: RoundedRectangleBorder(
          //全部设置
          borderRadius: BorderRadius.all(Radius.circular(10))
              //单独设置四个角
//          borderRadius: BorderRadius.only(
//            topLeft: Radius.circular(15),
//            topRight: Radius.zero,
//            bottomLeft: Radius.circular(15),
//            bottomRight: Radius.zero
//          )
        ),
        shadowColor: Colors.red,
        elevation: 5,
        clipBehavior: Clip.none,
        margin: EdgeInsets.all(10),
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                "https://www.itying.com/images/flutter/1.png",
                fit: BoxFit.cover,
              ),
            ),
            ListTile(
              leading: ClipOval(
                  child: Image.network(
                    "https://www.itying.com/images/flutter/2.png",
                    fit: BoxFit.cover,
                    height: 60,
                    width: 60,
                  )),
              title: Text("标题111111111"),
              subtitle: Text("内容11111111111111111111"),
            )
          ],
        ),
      ),
    );

企业微信截图_16070140494958.png