卡片式布局Card

const Card(

{Key key, Widget child,

Color color, Color shadowColor,

double elevation, ShapeBorder shape,

bool borderOnForeground: true,

EdgeInsetsGeometry margin,

Clip clipBehavior,

bool semanticContainer: true} ) 
 

color

color 属性用于设置 Card 的背景颜色

shadowColor

shadowColor 是用于绘制卡片阴影的颜色。

elevation

Elevation 是 Card 沿 Z 轴的坐标，它影响 Card 阴影的大小

shape

shape 属性用于定义 Card 的边框形状。

borderOnForeground

如果 borderOnForeground 为 true，则形状的边框将绘制在孩子的前面。反之亦然，将在子元素身后绘制边框。

margin

margin 属性用于在 Card 周围创建一个空白空间。

semanticContainer

如果 semanticContainer 为true，则表示Card 及其所有子部件具有相同的语义。相反，它们的语义是不同的。

import 'package:flutter/material.dart';

//卡片式布局

void main() => runApp(MyApp());

var card = new Card(

  margin: EdgeInsets.all(10), // 外边距

  shadowColor: Colors.black26, // 阴影颜色

  color: Color.fromARGB(255, 220, 230, 200), // 背景色

  elevation: 20, // 阴影高度

  borderOnForeground: true, // 是否在 child 前绘制 border，默认为 true

  shape: RoundedRectangleBorder(

      // 边框

      side: BorderSide(color: Colors.green, width: 3),

      borderRadius: BorderRadius.all(Radius.circular(10))),

  child: Column(

    children: <Widget>[

      ListTile(

        title: Text(

          '湖南省长沙市',

          style: TextStyle(fontWeight: FontWeight.w500),

        ),

        subtitle: Text('zt:13322222222'), //子标题

        //图标

        leading: new Icon(

          Icons.access_alarm_rounded,

          color: Colors.lightBlue,

        ),

      ),

      new Divider(), //分隔线

      ListTile(

        title: Text(

          '湖南省长沙市',

          style: TextStyle(fontWeight: FontWeight.w500),

        ),

        subtitle: Text('zt:13322222222'), //子标题

        //图标

        leading: new Icon(

          Icons.access_alarm_rounded,

          color: Colors.lightBlue,

        ),

      ),

      new Divider(), //分隔线

      ListTile(

        title: Text(

          '湖南省长沙市',

          style: TextStyle(fontWeight: FontWeight.w500),

        ),

        subtitle: Text('zt:13322222222'), //子标题

        //图标

        leading: new Icon(

          Icons.access_time_filled_outlined,

          color: Colors.brown,

        ),

      )

    ],

  ),

);

//卡片式布局

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return MaterialApp(

      title: 'Card',

      home: Scaffold(

        appBar: new AppBar(

          title: new Text('卡片式布局'),

        ),

        body: Center(

          child: card,

        ),

      ),

    );

  }

}