Flutter学习笔记

Flutter 学习随笔

Card

Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它看起来有立体感。

属性预览：

  const Card({
   
    Key key,
    this.color,//颜色
    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);

clipBehavior属性值	说明
clipBehavior: Clip.none,	不裁剪
clipBehavior: Clip.hardEdge,	裁剪但不应用抗锯齿，裁剪速度比none模式慢一点，但比其他方式快。
clipBehavior: Clip.antiAlias,	裁剪而且抗锯齿，以实现更平滑的外观。裁剪速度比antiAliasWithSaveLayer快，比hardEdge慢。
clipBehavior: Clip.antiAliasWithSaveLayer,	带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer。

代码示例：

    var card = new SizedBox(
      child: new Card(
        elevation: 15.0,//设置阴影，即card在z轴的距离，数字越大阴影越重
        color: Colors.grey[100],//设置颜色，数字为颜色饱和度
	    //设置margin边距
	    //margin: const EdgeInsets.all(20),//可.all进行全部设置
        margin: const EdgeInsets.only(top: 8,left: 10,right: 10),//可.only进行单独设置
        //设定Card的圆角
        shape: RoundedRectangleBorder(
           // borderRadius: BorderRadius.all(Radius.circular(20.0)), //可.all进行全部设置 
		      borderRadius: BorderRadius.only(  //可.only进行单独设置
		          topLeft: Radius.circular(20.0),
		          topRight: Radius.zero,
		          bottomLeft: Radius.zero,
		          bottomRight: Radius.circular(20.0)),
		    ),
		 //设置裁剪
		clipBehavior: Clip.none,//不裁剪
        child: new Column(
          children: [
            new Container(
                  decoration: BoxDecoration (
                                   color: Colors.grey[200]
                  ),
                 child: new ListTile(
                                  title: new Text('评审工作',
                                  style: new TextStyle(fontWeight: FontWeight.w500)),
                        ),                                                  
            ),
            new Container(
              constraints: new BoxConstraints.expand(
                height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 100,