关注我们

Flutter - Card

Flutter中的卡片小部件(card)呈圆角形状并带有阴影。无涯教程主要使用它来存储单个对象的内容和操作。在本文中，无涯教程将学习如何在Flutter中创建卡片小部件。无涯教程还将学习如何自定义卡片小部件。

Flutter中的卡片创建非常简单。无涯教程只需要调用card构造函数，然后将小部件作为子属性传递，以显示card内部的内容和操作。示例如下:

return Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: Icon(Icons.album, size: 45),
          title: Text('Sonu Nigam'),
          subtitle: Text('Best of Sonu Nigam Song'),
        ),
      ],
    ),
  );

Card 属性

无涯教程可以使用该属性自定义卡。以下提供一些基本属性:

属性名称	描述
borderOnForeground	它用于绘制边界。
color	它用于设置背景颜色。
elevation	它控制下方的阴影尺寸。
margin	它用于自定义卡的外部边距。
shape	它用于指定形状。
shadowColor	它用于绘制阴影。
clipBehavior	它用于剪切内容。

如果要自定义卡的大小，则需要将其放置在Container或SizedBox小部件中。在这里，无涯教程可以设置卡的高度和宽度，这些代码可以在以下代码中显示：

复制代码

Container(
    width: 150,
    height: 150,
    child: Card(
       ...
    ),
  )

让无涯教程借助示例了解如何在Flutter中使用卡片小部件。

链接：https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-card.html

来源：LearnFk无涯教程网

示例:

在此示例中，无涯教程将创建一个卡片小部件，该小部件显示专辑信息以及两个名为“Play”和“Pause”的动作。在IDE中创建一个项目，打开main.dart文件，并将其替换为以下代码。

复制代码

import 'package:flutter/material.dart';

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

/// 这个小部件是主要的应用小部件。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Card Example')),
        backgroundColor: Colors.yellow,
        body: MyCardWidget(),
      ),
    );
  }
}

/// 这是主应用程序实例化的无状态小部件。
class MyCardWidget extends StatelessWidget {
  MyCardWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 200,
        padding: new EdgeInsets.all(10.0),
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),
          ),
          color: Colors.red,
          elevation: 10,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              const ListTile(
                leading: Icon(Icons.album, size: 60),
                title: Text(
                  'Sonu Nigam',
                  style: TextStyle(fontSize: 30.0)
                ),
                subtitle: Text(
                  'Best of Sonu Nigam Music.',
                  style: TextStyle(fontSize: 18.0)
                ),
              ),
              ButtonBar(
                children: <Widget>[
                  RaisedButton(
                    child: const Text('Play'),
                    onPressed: () {/* ... */},
                  ),
                  RaisedButton(
                    child: const Text('Pause'),
                    onPressed: () {/* ... */},
                  ),
                ],
              ),
            ],
          ),
        ),
      )
    );
  }
}