Flutter – 卡片小工具

卡是一种内置的flutter在小部件，其导出从谷歌的材质设计库的设计。这个小部件在屏幕上的功能是，它是平淡的空间或带有圆角的面板，下侧略有升高。它具有许多属性，如颜色、形状、阴影颜色等，让开发人员可以按照自己喜欢的方式对其进行自定义。下面我们将通过它的所有属性和一个例子来看看它的实现。

Card 类的构造函数：

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：这个属性接受一个布尔值作为一个对象来决定是否打印边框。
• child：此属性将 widger 作为对象显示在Card小部件中。
• clipBehavior：这个属性决定了 Card 里面的内容是否会被剪裁。它将Clip枚举作为一个对象。
• color：该属性通过将Color类作为对象来为卡片分配背景颜色。
• 海拔：此属性采用双精度值作为对象来决定应放置卡片的 z 坐标。
• margin：该属性将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应用程序中， Center是所有组件的父组件，它作为子组件持有Card组件。这里使用的 Card 小部件的属性是设置为 50 的高度，使卡片从白色背景看起来稍微向上， shadowColor被指定为黑色(它在卡片下面给出一个微弱的阴影)，颜色是指定 greenAccent[400] 作为对象(它负责卡片的绿色背景)。 Card小部件将SizedBox小部件作为子部件，而后者又将Padding作为子部件。有一个在卡，这是由填充的财产，柱构件被保持CircleAvatar(图像)，两个文本窗口小部件和一个RaisedButton全部由SizedBox插件分开分配一个20像素的空白区域。而这一切的最终结果就是这张漂亮的卡片。

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

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