Flutter卡片布局插件carded的使用

Flutter卡片布局插件carded的使用

Carded 插件提供了 CardyContainer 组件，它是一个简单的卡片，可以在四个边缘应用阴影。这与 Flutter 原生的 Card 组件不同，后者只在底部和左侧应用阴影。

使用

只需将 CardyContainer 替换为 Container 或 Card，即可在需要的地方应用四个边缘的阴影。该组件包含了 Container 的所有属性，因此样式和自定义方式与 Container 类似。

CardyContainer(
    blurRadius: 8,
    padding: EdgeInsets.all(10),
    child: Text(
        '这是具有四个边缘阴影的容器',
        style: TextStyle(
        fontSize: 18,
        ),
    ),
)

阴影定制

  • 通过 shadowColor 属性更改阴影颜色。
  • 通过增加 spreadRadius 属性来调整阴影的扩散范围。

示例代码

以下是一个完整的示例代码，展示了如何使用 CardyContainer。

import 'package:carded/carded.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: Container(
          padding: const EdgeInsets.symmetric(
            vertical: 50,
            horizontal: 10,
          ),
          child: const CardyContainer(
            blurRadius: 10,
            padding: EdgeInsets.all(10),
            child: Text(
              '这是具有四个边缘阴影的容器',
              style: TextStyle(
                fontSize: 18,
              ),
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter卡片布局插件carded的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter卡片布局插件carded的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


carded 是一个用于 Flutter 的卡片布局插件，它可以帮助开发者更轻松地创建和管理卡片布局。以下是如何使用 carded 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 carded 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  carded: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 carded 包：

import 'package:carded/carded.dart';

3. 使用 Carded 组件

Carded 提供了多种卡片布局选项。以下是一些基本用法示例：

基本卡片

Carded(
  child: Text('This is a basic card'),
)

带标题和内容的卡片

Carded(
  title: Text('Card Title'),
  content: Text('This is the content of the card.'),
)

带图片的卡片

Carded(
  image: Image.network('https://example.com/image.jpg'),
  title: Text('Card with Image'),
  content: Text('This card includes an image.'),
)

带操作按钮的卡片

Carded(
  title: Text('Card with Actions'),
  content: Text('This card has action buttons.'),
  actions: [
    TextButton(
      onPressed: () {
        // 处理按钮点击事件
      },
      child: Text('Action 1'),
    ),
    TextButton(
      onPressed: () {
        // 处理按钮点击事件
      },
      child: Text('Action 2'),
    ),
  ],
)

4. 自定义卡片样式

你可以通过 Carded 提供的参数来自定义卡片的外观，例如背景颜色、边框半径、阴影等。

Carded(
  title: Text('Custom Styled Card'),
  content: Text('This card has custom styling.'),
  backgroundColor: Colors.blue[100],
  borderRadius: BorderRadius.circular(16.0),
  elevation: 5.0,
)

5. 响应式布局

Carded 也支持响应式布局，可以根据屏幕大小自动调整卡片的大小和布局。

Carded(
  responsive: true,
  title: Text('Responsive Card'),
  content: Text('This card adjusts its layout based on screen size.'),
)
回到顶部