Flutter 卡片组件

Flutter 卡片组件(Card)，Card即卡片组件，内容可以由大多数类型的Widget构成，但通常与ListTile一起使用。Card有一个child，但它可以是支持多个child的列、行、列表、网格或其他小部件。默认情况下，Card将其大小缩小为0像素。可以使用SizedBox来限制Card的大小。在Flutter中，Card具有圆角和阴影，这让它看起来有立体感。Card组件的属性及描述见表：

示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Card布局示例',
    home: MyApp(),
}
  ));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

var card = SizedBox(
  // 限定高度
  height: 250.0,
  // 添加Card组件
  child: Card(
    // 垂直布局
    child: Column(
      children: <Widget>[
        ListTile(
            // 标题
            title: Text(
              '深圳市南山区深南大道',style: TextStyle(fontWeight: FontWeight.w300),
            ),
            // 子标题
            subtitle: Text('××有限公司'),
            // 左侧图标
            leading: Icon(
              Icons.home,
              color: Colors.lightBlue,
            ),
        ),
        // 分隔线
        Divider(),
        ListTile(
            title: Text(
              '深圳市罗湖区沿海大道',style: TextStyle
              (fontWeight: FontWeight.w300),
            ),
            subtitle: Text('××培训机构'),
            leading: Icon(
              Icons.school,
              color: Colors.lightBlue,
            ),
        ),
        Divider(),
      ],
    ),
  ),
);

return Scaffold(
  appBar: AppBar(
    title: Text('Card布局示例'),
  ),
  body: Center(
    child: card,
  ),
);
  }
}

上述示例代码的视图展现大致如图所示：

酷客教程相关文章：

• Flutter 文本框组件
• Flutter 轻量提示组件
• Flutter 提示对话框组件
• Flutter 简单对话框组件