Flutter 卡片

2025年3月17日 | 阅读 3 分钟

Card 是一种用于表示彼此相关信息的面板，例如专辑、地理位置、联系方式等。Flutter 中的 Card 具有圆角和阴影。我们主要使用它来存储单个对象的内容和操作。在本文中，我们将学习如何在 Flutter 中创建 Card 组件。我们还将学习如何自定义 Card 组件。

在 Flutter 中创建 Card 非常简单。我们只需要调用 card 构造函数，然后传递一个 widget 作为 child 属性，用于在 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'),
        ),
      ],
    ),
  );

Flutter Card 属性

我们可以使用属性自定义 Card。下面给出了一些重要的属性

属性名称	描述
borderOnForeground	用于在子项前面绘制边框。默认情况下，它为 true。如果为 false，则在子项后面绘制边框。
color	用于为 Card 的背景着色。
elevation	控制 Card 下方的阴影大小。elevation 值越大，阴影距离越大。
margin	用于自定义 Card 的外部空间。
shape	用于指定 Card 的形状。
shadowColor	用于绘制 Card 的阴影。
clipBehavior	用于裁剪 Card 的内容。

如果我们要自定义 Card 的大小，则需要将其放置在 Container 或 SizedBox 组件中。在这里，我们可以设置 Card 的高度和宽度，如下面的代码所示

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

让我们通过一个示例来了解如何在 Flutter 中使用 Card 组件。

示例

在此示例中，我们将创建一个 Card 组件，该组件显示 专辑信息和两个名为 Play 和 Pause 的操作。在 IDE 中创建一个项目，打开 main.dart 文件，然后将其替换为以下代码。

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
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(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
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: () {/* ... */},
                  ),
                ],
              ),
            ],
          ),
        ),
      )
    );
  }
}

输出

当我们运行此应用程序时，它将显示屏幕的 UI，如下面的屏幕截图所示。

下一个主题Flutter Tabbar

Flutter 卡片

Flutter Card 属性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 卡片

Flutter Card 属性

相关帖子

Flutter 文本

Flutter 复选框

Flutter Container

Flutter Tabbar

Flutter 进度条

Flutter 文本字段

Flutter GridView

Flutter Stack

Flutter 日历

Flutter 图标

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器