Flutter可扩展卡片视图插件expansion_card的使用

Flutter可扩展卡片视图插件expansion_card的使用

Expansion Card

Open Source Love

此插件提供了一种简单的可扩展卡片实现方式。您还可以在背景中添加 GIF 或图片，并随着卡片的展开而扩展。

截图

expansion_card

如何使用

首先，确保已将 expansion_card 包导入到您的项目中：

import 'package:expansion_card/expansion_card.dart';

然后，您可以使用以下代码创建一个基本的可扩展卡片：

Center(
  child: ExpansionCard(
    title: Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            "Header",
          ),
          Text(
            "Sub",
          ),
        ],
      ),
    ),
    children: <Widget>[
      Container(
        margin: EdgeInsets.symmetric(horizontal: 7),
        child: Text("Content goes over here !"),
      ),
    ],
  ),
);

自定义用法

该插件提供了许多选项以提供更多控制：

属性 描述
background 提供背景图像
borderRadius 设置卡片的圆角半径
leading 定义滑动按钮后的操作
gif (字符串) 指定背景的 GIF 文件或图片地址
onExpansionChanged 当卡片开始展开时调用此函数，并传入值 true；当卡片开始折叠时，传入值 false
trailing 替换旋转箭头图标显示的其他小部件
initiallyExpanded 指定列表项是否初始展开（true）或折叠（默认为 false）

示例代码

以下是一个完整的示例代码，展示了如何使用 expansion_card 插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(home: MainApp());
  }
}

class MainApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.grey,
        body: Center(
            child: ExpansionCard(
          borderRadius: 20, // 设置卡片的圆角半径
          background: Image.asset( // 设置背景图片
            "images/planets.gif",
            fit: BoxFit.cover,
          ),
          title: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Header", // 卡片标题
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.black,
                  ),
                ),
                Text(
                  "Sub", // 卡片副标题
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
              ],
            ),
          ),
          children: <Widget>[
            Container(
              margin: EdgeInsets.symmetric(horizontal: 7), // 设置内容边距
              child: Text("Content goes over here !", // 卡片内容
                  style: TextStyle(fontSize: 20, color: Colors.black)),
            )
          ],
        )));
  }
}

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

1 回复

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


expansion_card 是一个用于 Flutter 的插件，它允许你创建可扩展的卡片视图。这个插件非常适合用于需要展示更多信息的场景，比如在用户点击卡片时展开显示更多内容。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  expansion_card: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示了如何使用 expansion_card 插件来创建一个可扩展的卡片视图：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expansion Card Example'),
        ),
        body: Center(
          child: ExpansionCard(
            title: Text('Click to Expand'),
            children: <Widget>[
              ListTile(
                title: Text('Item 1'),
              ),
              ListTile(
                title: Text('Item 2'),
              ),
              ListTile(
                title: Text('Item 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

ExpansionCard 组件提供了多个参数来定制卡片的行为和外观：

  • title: 卡片的标题，通常是一个 Text 组件。
  • children: 卡片展开时显示的内容，通常是一个 List<Widget>。
  • backgroundColor: 卡片的背景颜色。
  • elevation: 卡片的阴影深度。
  • onExpansionChanged: 当卡片展开或折叠时触发的回调函数。
  • initiallyExpanded: 是否在初始状态下展开卡片。

自定义示例

你可以通过自定义 title 和 children 来创建更复杂的卡片视图。例如：

ExpansionCard(
  title: Container(
    padding: EdgeInsets.all(10),
    child: Row(
      children: <Widget>[
        Icon(Icons.info, color: Colors.blue),
        SizedBox(width: 10),
        Text('More Information', style: TextStyle(fontSize: 18)),
      ],
    ),
  ),
  children: <Widget>[
    Padding(
      padding: EdgeInsets.all(16.0),
      child: Text(
        'This is some additional information that is revealed when the card is expanded.',
        style: TextStyle(fontSize: 16),
      ),
    ),
  ],
  backgroundColor: Colors.grey[200],
  elevation: 2,
  onExpansionChanged: (bool isExpanded) {
    print('Card is ${isExpanded ? 'expanded' : 'collapsed'}');
  },
  initiallyExpanded: false,
)
回到顶部