Flutter –卡片小工具

Card是flutter的内置小部件，它的设计来自Google的Material Design Library 。该小部件在屏幕上的功能是：平淡的空间或带有圆角的面板，其下侧略微升高。它具有许多属性，例如颜色，形状，阴影颜色等，使开发人员可以根据自己的喜好对其进行自定义。下面我们将通过al的所有属性和一个示例来查看其实现。

卡类的构造函数：

const Card(
{Key key,
Color color,
Color shadowColor,
double elevation,
ShapeBorder shape,
bool borderOnForeground: true,
EdgeInsetsGeometry margin,
Clip clipBehavior,
Widget child,
bool semanticContainer: true}
)

卡片小部件的属性：

• borderOnForeground：此属性将布尔值作为对象来决定是否打印边框。
• 子级：此属性将一个寡妇作为对象显示在Card小部件内。
• clipBehavior：此属性决定是否裁剪Card中的内容。它以Clip枚举为对象。
• color：此属性通过将Color类作为对象来为卡片分配背景色。
• 高程：此属性以double值作为对象来确定应将卡片放置在哪个位置的z坐标。
• 边距：此属性将EdgeInsetsGeometry作为对象在Card周围添加空白空间。
• 语义容器：此属性接受一个布尔值作为对象。这控制了Card小部件及其所有子小部件是否将被视为单个小部件。
• shadowColor：此属性将Color类作为对象，以将颜色分配给出现在卡片下方的阴影。默认情况下，颜色设置为黑色。
• shape：此属性将ShapeBorder类作为对象来确定Card小部件的形状。

例子：

Dart

import 'package:flutter/material.dart';
  
//imported google's material design library
void main() {
  runApp(
      /**Our App Widget Tree Starts Here**/
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.greenAccent[400],
        centerTitle: true,
      ), //AppBar
      body: Center(
        /** Card Widget **/
        child: Card(
          elevation: 50,
          shadowColor: Colors.black,
          color: Colors.greenAccent[100],
          child: SizedBox(
            width: 300,
            height: 500,
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.green[500],
                    radius: 108,
                    child: CircleAvatar(
                      backgroundImage: NetworkImage(
                          "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
                      radius: 100,
                    ), //CircleAvatar
                  ), //CirclAvatar
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'GeeksforGeeks',
                    style: TextStyle(
                      fontSize: 30,
                      color: Colors.green[900],
                      fontWeight: FontWeight.w500,
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  Text(
                    'GeeksforGeeks is a computer science portal
                    for geeks at geeksforgeeks.org. It contains
                    well written, well thought and well explained
                    computer science and programming articles,
                    quizzes, projects, interview experienxes
                    and much more!!',
                    style: TextStyle(
                      fontSize: 15,
                      color: Colors.green[900],
                    ), //Textstyle
                  ), //Text
                  SizedBox(
                    height: 10,
                  ), //SizedBox
                  SizedBox(
                    width: 80,
                    child: RaisedButton(
                      onPressed: () => null,
                      color: Colors.green,
                      child: Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: Row(
                          children: [
                            Icon(Icons.touch_app),
                            Text('Visit'),
                          ],
                        ), //Row
                      ), //Padding
                    ), //RaisedButton
                  ) //SizedBox
                ],
              ), //Column
            ), //Padding
          ), //SizedBox
        ), //Card
      ), //Center
    ), //Scaffold
  ) //MaterialApp
      );
}

输出：

说明：在这个flutter的应用程序中，“中心”是所有人的父窗口小部件，该窗口小部件以“卡片”窗口小部件的形式保存。此处使用的Card窗口小部件的属性是将高程设置为50，使卡看起来比白色背景略高， shadowColor被分配为黑色(它在卡下方产生暗淡的阴影)，而color分配greenAccent [400]作为对象(它负责卡的绿色背景)。 Card小部件将SizedBox小部件作为子级，而Padding则作为子级。有一个在卡，这是由填充的财产，柱构件被保持CircleAvatar(图像)，两个文本窗口小部件和一个RaisedButton全部由SizedBox插件分开分配一个20像素的空白区域。而这一切的最终结果就是这张漂亮的卡片。

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处前往由我们的专家精心策划的指南，以使您立即做好行业准备！