TrionesDev Antd Flutter

Appearance

Card 卡片 ​

卡片是一种通用容器，用于承载和组织相关内容和操作。它可以包含标题、内容和底部操作区域。

何时使用 ​

  • 需要将相关内容组织在一起展示时
  • 构建信息展示面板时
  • 创建内容卡片布局时
  • 需要分区域展示头部、内容和底部操作时

代码演示 ​

import 'package:antd_flutter_example/demo_block.dart';
import 'package:flutter/material.dart';
import 'package:trionesdev_antd_mobile/trionesdev_antd_mobile.dart';

class CardPage extends StatefulWidget {
  const CardPage({super.key});

  @override
  State<StatefulWidget> createState() => _CardPageState();
}

class _CardPageState extends State<CardPage> {
  @override
  @override
  Widget build(BuildContext context) {
    return AntScaffold(
        appBar: AntAppBar(
          title: const Text('Card 卡片'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              DemoBlock(
                title: "基本用法",
                child: Column(children: [
                  AntCard(
                    title: const Text('Card Title'),
                    extra: const Icon(Icons.more_horiz_rounded),
                    child: const Text('Card Content'),
                  ),
                ]),
              )
            ],
          ),
        ));
  }
}

API ​

AntCard 组件参数 ​

属性说明类型默认值
titleStyle标题样式TextStyle?null
title标题Widget?null
titleText标题文字String?null
extraStyle额外信息样式TextStyle?null
extra额外信息Widget?null
extraText额外信息文字String?null
child内容Widget?null
footer底部Widget?null
decoration卡片样式BoxDecoration?null
headerDecoration卡片头部样式BoxDecoration?null
bodyDecoration卡片内容样式BoxDecoration?null
footerDecoration卡片底部样式BoxDecoration?null
style卡片样式StateStyle?null
styles卡片样式集合AntCardStyles?null

AntCardStyles 对象属性 ​

属性说明类型默认值
header头部样式StateStyle?null
body内容样式StateStyle?null
footer底部样式StateStyle?null

组件特性 ​

  1. 支持自定义标题和额外信息展示
  2. 支持分别设置头部、内容和底部区域的样式
  3. 支持整体样式和分区域样式的组合配置
  4. 自动根据内容显示相应的区域
  5. 提供默认的样式和间距设置

使用说明 ​

  • 通过 title 或 titleText 设置卡片标题
  • 通过 extra 或 extraText 设置卡片右上角的额外信息
  • 通过 child 设置卡片的主要内容区域
  • 通过 footer 设置卡片底部操作区域
  • 可以使用 decoration 设置整体卡片样式，或使用 headerDecoration、bodyDecoration、footerDecoration 分别设置各区域样式
  • styles 属性允许更精细地控制各区域的 StateStyle 样式
  • 当只设置 child 时，卡片只会显示内容区域
  • 当设置 title 或 extra 时，会自动显示头部区域
  • 当设置 footer 时，会自动显示底部区域