Flutter基础-045-CardView

237 阅读1分钟
简述

是一个自动撑满父widget的,自带角弧度的矩形。

构造方法
const Card({
    Key key,
    this.color,  // 背景色
    this.elevation, // 阴影长度
    this.shape, // 形状,可以设置弧度 和边框
    this.borderOnForeground = true, //shape内设置的边框是覆盖child还是child覆盖边框。
    this.margin,// 外边距
    this.clipBehavior,
    this.child,// 子widget
    this.semanticContainer = true,
  })
示例

image.png

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 100,
          alignment: Alignment.center,
          color: Colors.orange[100],
          child: Card(
            margin: const EdgeInsets.all(10.0),
            color: Colors.blue[100],
            elevation: 10,// 阴影
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
//              side: BorderSide(color: Colors.green,width: 25),

            ),
//            borderOnForeground: false,
            child: ListTile(
              title: new Text('Title',
                  style: new TextStyle(fontWeight: FontWeight.w500)),
              subtitle: new Text('subtitle'),
              leading: new Icon(
                Icons.home,
                color: Colors.red[500],
              ),
            ),
          ),
        ),
      ),
    );
  }
}