flutter 卡

📌 相关文章

📜 flutter 卡

📅 最后修改于: 2021-01-02 05:05:58 🧑 作者: Mango

卡片是用于表示彼此相关的信息的表，例如相册，地理位置，联系方式等。Flutter中的卡片呈圆角形状并带有阴影。我们主要使用它来存储单个对象的内容和动作。在本文中，我们将学习如何在Flutter中创建卡片小部件。我们还将学习如何自定义卡片小部件。

Flutter中的卡片创建非常简单。我们只需要调用card构造函数，然后将小部件作为子属性传递即可在Card内部显示内容和操作。请参阅下面的简单卡创建代码：

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

flutter 卡属性

我们可以使用属性来自定义卡片。一些基本属性如下：

Attribute Name	Descriptions
borderOnForeground	It is used to paint the border in front of a child. By default, it is true. If it is false, it painted the border behind the child.
color	It is used to color the card’s background.
elevation	It controls the shadow size below the card. The bigger elevation value makes the bigger shadow distance.
margin	It is used to customize the card’s outer space.
shape	It is used to specify the shape of the card.
shadowColor	It is used to paint the shadow of a card.
clipBehavior	It is used to clip the content of the card.

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

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

让我们借助示例了解如何在Flutter中使用卡片小部件。

例：

在此示例中，我们将创建一个卡片小部件来显示专辑信息以及两个名为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: [
              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: [
                  RaisedButton(
                    child: const Text('Play'),
                    onPressed: () {/* ... */},
                  ),
                  RaisedButton(
                    child: const Text('Pause'),
                    onPressed: () {/* ... */},
                  ),
                ],
              ),
            ],
          ),
        ),
      )
    );
  }
}

输出：

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