Flutter Card


简介

Card “卡片”

  • 卡片用于表示一些相关信息,例如相册,地理位置,用餐,联系方式等

基本用法

此示例显示了创建卡片窗口组件,其中显示了相册信息和两个操作

实例演示

import 'package:flutter/material.dart';

/*
* Checkbox 默认Card的实例
* */
class CardFullDefault extends StatefulWidget {
  const CardFullDefault() : super();

  @override
  State<StatefulWidget> createState() => _CardFullDefault();
}

/*
* Card 默认的实例,有状态
* */
class _CardFullDefault extends State {
  @override
  Widget build(BuildContext context) {
    return Card(
      // ...  // 如果没有,就是不需要有状态的 StatefulWidget
    );
  }
}

/*
* Card 默认的实例,无状态
* */
class CardLessDefault extends StatelessWidget {
  final widget;
  final parent;

  const CardLessDefault([this.widget, this.parent])
      : super();

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior:Clip.antiAlias,// 根据设置裁剪内容
      color:Colors.green, //  卡片背景颜色
      elevation:20.0, // 卡片的z坐标,控制卡片下面的阴影大小
      margin:EdgeInsets.all(20.0),
      //  margin: EdgeInsetsDirectional.only(bottom: 30.0, top: 30.0, start: 30.0),// 边距
      semanticContainer:true, // 表示单个语义容器,还是false表示单个语义节点的集合,接受单个child,但该child可以是Row,Column或其他包含子级列表的widget
//      shape: Border.all(
//          color: Colors.indigo, width: 1.0, style: BorderStyle.solid), // 卡片材质的形状,以及边框
      shape:RoundedRectangleBorder(borderRadius:  BorderRadius.circular(20.0)), // 圆角
      //borderRadius: BorderRadius.all(Radius.circular(8.0)),
      child: Column( //card里面的子控件
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const ListTile(
            leading: Icon(Icons.access_time),
            title: Text('The Enchanted Nightingale',style: TextStyle(color: Colors.white, fontSize: 40.0)),
            subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.',style: TextStyle(color: Colors.yellow, fontSize: 16.0)),
            contentPadding: EdgeInsets.all(20.0),// item 内容内边距
          ),
          ButtonTheme.bar( // make buttons use the appropriate styles for cards
            child: ButtonBar(
              children: <Widget>[
                FlatButton(
                  child: const Text('BUY TICKETS',style: TextStyle(color: Colors.black, fontSize: 14.0)),
                  onPressed: () { /* ... */ },
                ),
                FlatButton(
                  child: const Text('LISTEN',style: TextStyle(color: Colors.black, fontSize: 14.0)),
                  onPressed: () { /* ... */ },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}