首页 > 其他 > 详细

Flutter-Card卡片布局

时间:2019-12-27 12:52:13      阅读:378      评论:0      收藏:0      [点我收藏+]

经典的Material UI卡片式布局,设计出来的UI很有质感。

/**
 * 卡片布局,相当于Android中的CardView
 * const Card({
    Key key,
    this.color,//背景色
    this.elevation,//阴影大小
    this.shape,//设置边,可以设置圆角
    this.margin = const EdgeInsets.all(4.0),
    this.clipBehavior = Clip.none,
    this.child,
    this.semanticContainer = true,
    })
 */

 

技术分享图片

 

 

import ‘package:flutter/material.dart‘;

class FlutterCardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.blueAccent,
      //z轴的高度,设置card的阴影
      elevation: 20.0,
      //设置shape,这里设置成了R角
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),),
      //对Widget截取的行为,比如这里 Clip.antiAlias 指抗锯齿
      clipBehavior: Clip.antiAlias,
      semanticContainer: false,
      child: getChild(),
    );
  }

  getChild() {
    return Container(
      color: Colors.deepPurpleAccent,
      width: 200,
      height: 150,
      alignment: Alignment.center,
      child: Text(
        "Card",
        style: TextStyle(fontSize: 28, color: Colors.white),
      ),
    );
  }
}

技术分享图片

 

 

borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.zero,
            bottomLeft: Radius.zero,
            bottomRight: Radius.circular(20.0)),
      )

Flutter-Card卡片布局

原文:https://www.cnblogs.com/ssjf/p/12106617.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!