简介

在这篇文章中，您将了解Flutter中所有的部件和卡片类，同时将两者结合起来创建一个卡片类部件。在本文结束时，您将拥有一个可重复使用的卡片小部件，可以根据您的需要进行定制。

Flutter中的小组件

用 Flutter 构建全功能的应用程序可能是令人兴奋的，因为它涉及到将各种组件汇集在一起，并将它们一次次地组合起来，以构建一个完整的应用程序。无论Flutter应用程序有多复杂或多大，它们都使用被称为 “部件 “的基本构建块。

小部件构成了Flutter应用程序中视图和屏幕的基础，适当地组合可用的各种小部件，将为您提供一个设计精美的屏幕。

有两种类型的Flutter小部件。

无状态小组件是不可改变的小组件，意味着它们不会改变。无论它们携带什么信息，在小组件的整个生命周期内都保持不变。
有状态的小组件是小组件的信息和属性在小组件的运行时间内可以改变。它的属性可以被更新、改变或删除，而它仍然在运行时间内

小组件的例子是中心小组件（将其子项或项目对齐到中心），行小组件（将其子项以水平格式对齐），以及列小组件（将其子项垂直对齐）。结合这些现成的小组件可以使开发更容易和更快。

然而，有些时候，一些内置的Widget并不能满足应用程序中的直接需求，你需要组合一个或两个。例如，Flutter中内置的卡片部件不能完全满足我们的需求，所以我们必须将其与其他部件结合起来，建立我们自己的可重复使用和完全可定制的卡片部件。

构建一个卡片小部件

在本教程中，我们将建立一个卡片小部件，它的功能是一个带有图片、工作描述和公司名称的名片。

这可以帮助建立您对 Flutter 部件的了解，也可以帮助您看到您可以应用各种技术，从其他部件的组合中创建一个单一的部件。

开始使用

让我们开始吧。第一步是创建一个新项目。

flutter create card_widget

复制代码

这个命令创建文件、文件夹和启动一个新的Flutter项目所需的一切。

接下来，我们需要创建一个默认的MaterialApp。Flutter的MaterialApp类是Flutter应用中的一个预定义类。它是主要或核心组件。

我们可以通过以下方式访问Flutter SDK提供的所有其他组件和小工具。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
       body: Text('Material App'),
      ),
    );
  }
}

复制代码

在上面的代码中，一个名为MyApp 的无状态小部件是我们将要创建的应用程序的基础。它返回MaterialApp ，这让我们能够访问材料设计中的各种属性和组件。

我们传入标题，也就是我们想给我们的应用程序起的名字（在我们的例子中是 “名片”）。我们还传递了一个Scaffold widget给MaterialApp的home 属性。

Scaffold 小组件填满了你的移动设备显示屏上的每一个可用空间；它提供了对其他各种小组件的访问，如应用栏、浮动的行动按钮、抽屉，等等。

在Scaffold widget中，我们有body 属性，这是除应用栏之外的其他每一个东西都可以放置的空间。在这个默认的材料应用中，我们只能通过text widget与Text('Material App') 。随着我们在教程中的进一步发展，我们将改变它。

确定卡片小部件的行为

下一步是创建一个新的无状态widget。为什么我们要使用一个无状态的widget？因为卡片小部件的任何属性都不应该在其运行期间改变。颜色、形状和细节一旦在应用程序中被设置，就不应该改变。

我们将称这个无状态部件为 “BusinessCard”。现在，我们用下面的代码传入一个空的Container widget。

class BusinessCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

复制代码

现在，在MaterialApp的body参数中传入无状态widget的名字。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
       body: BusinessCard(), // <= the name goes here
      ),
    );
  }
}

复制代码

在BusinessCard widget中，返回Card 类构造函数。

class BusinessCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(); // <== The Card class constructor
  }
}

复制代码

确定卡片小部件的属性

Card 类提供了几个属性，可以用来修改卡片的视觉效果，如颜色、形状、边界和位置。例如，我们可以决定用绿色(Colors.green)或红色(Colors.red)来装饰我们的卡片。

其他属性也是如此。如果我们希望卡片有一个圆形的长方形，我们可以在形状参数中传入RoundedRectangularBorder() ，它就会以这种方式建立。

在这篇文章中，我们将只使用color 和elevation 属性。

仰角是用来控制卡片的Z坐标和卡片下阴影的大小。粘贴下面的代码，使卡片变成灰色，海拔高度为8.0。

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.grey[300],
      elevation: 8.0,

复制代码

由于卡片部件没有高度和宽度参数，我们可以通过传入height 和width 属性来使用Container 部件。

   child: Container(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
        height: 200,
        width: 350,
        child:  Column(
          children: [],            
        ),

复制代码

在这一点上，卡片的基本布局已经设置好了。我们可以将BusinessCard widget的组件传入Column widget的子块中（如上面的代码块所示）。

确定卡片小部件的布局

在这篇文章中，我们使用的是一个基本的名片布局。可以添加更多的调整和造型，以达到你的满意。

我们首先创建Column widget的组件。首先，我们设置mainAxisAlignment 和crossAxisAlignment 。

Row 和Column 小组件的这两个参数用于设置子组件在垂直和水平方向上的排列方式。

 Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
             children: [],

复制代码

MainAxisAlignment.spaceBetween 确保子组件的间隔尽可能远，而CrossAxisAlignment.start 则确保组件在垂直方向上从顶部开始。

接下来，我们需要传入圆形头像。这是Flutter提供的一个小部件，用于显示来自资产或互联网的图像。

我们将使用互联网上的一个随机头像。把图片的链接传给NetworkImage widget。

children: [
                const CircleAvatar(
                  radius: 50, //we give the image a radius of 50
                  backgroundImage: NetworkImage(
                      'https://webstockreview.net/images/male-clipart-professional-man-3.jpg'),
                ),

复制代码

下一步是建立Column ，我们需要的其他细节将被传入其中。我们使用Text 小部件来显示电话号码、城市和组织。

SizedBox 是一个用于在应用程序中引入间距的小组件。我们将使用它在文本之间添加空格。

              Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
//CrossAxisAlignment.end ensures the components are aligned from the right to left.
                  children: [
                    Container(
                      margin: const EdgeInsets.only(top: 8),
                      width: 150,
                      color: Colors.black54,
                      height: 2,
                    ),
                    const SizedBox(height: 4),
                    const Text('+2348012345678'),
                    const Text('Chelsea City'),
                    const Text('Flutteria'),
                  ],
                ),
              ],
            ),
            const SizedBox(height: 20),

复制代码

接下来，我们创建另一个Row 来处理姓名、职位和公司。它们都是文本，所以我们将每个文本传入一个Text widget。

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'John Doe',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 4),
                    const Text('JohnDee'),
                  ],
                ),

复制代码

我们在上面的代码块中所做的是创建了一个Row widget，它的功能是将其子女以水平格式对齐。因为我们的卡片分为两部分，所以我们使用了两个Column widget，它们的功能与Row widget相反，将它们的孩子垂直对齐。

在第一列中，我们传入了Text widget，我们用它来显示人的名字和昵称（只是一个小小的补充）。

                const SizedBox(width: 32),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    const Text(
                      'Mobile App Developer',
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 4),
                    const Text('FlutterStars Inc'),
                  ],
                )
              ],
            ),
          ],
        ),

复制代码

我们用SizedBox 来分隔两个Text 小部件。SizedBox 是一个小部件，它创建了一个特定尺寸的空间。它可能有也可能没有一个子部件或组件。一旦它的高度和宽度被声明，它就可以使用了。

我们把它的高度定为4，以便在我们的Text widget之间创造一点空间，并使它看起来更干净，更有表现力。

在第二列中，我们重复同样的事情，将工作描述和公司名称传入Text widgets。然后我们使用宽度为32的SizedBox ，将两列分开。

很好!我们已经完成了创建BusinessCard widget的基本布局。在你的终端内运行下面代码块中的命令来启动该应用程序。

通过结合内置的卡片部件、容器、文本、行和列部件，我们从头开始建立了一个卡片部件，可以通过调用其构造函数在应用程序的任何地方使用。