Flutter可扩展卡片组件插件expansion_tile_card的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter可扩展卡片组件插件expansion_tile_card的使用

插件简介

expansion_tile_card 是对Flutter SDK标准ExpansionTile的一个扩展，用于创建符合Google Material Theme风格的抬升组件ExpansionTileCard。它基本上可以作为ExpansionTile的直接替代品。

Example

使用示例

以下是一个完整的示例代码，演示了如何在Flutter应用中使用expansion_tile_card插件：

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ExpansionTileCard Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(title: 'ExpansionTileCard Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<ExpansionTileCardState> cardA = GlobalKey();
  final GlobalKey<ExpansionTileCardState> cardB = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final ButtonStyle flatButtonStyle = TextButton.styleFrom(
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(4.0)),
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: ListView(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12.0),
            child: ExpansionTileCard(
              key: cardA,
              leading: const CircleAvatar(child: Text('A')),
              title: const Text('Tap me!'),
              subtitle: const Text('I expand!'),
              children: <Widget>[
                const Divider(
                  thickness: 1.0,
                  height: 1.0,
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16.0,
                      vertical: 8.0,
                    ),
                    child: Text(
                      """Hi there, I'm a drop-in replacement for Flutter's ExpansionTile.

Use me any time you think your app could benefit from being just a bit more Material.

These buttons control the next card down!""",
                      style: Theme.of(context)
                          .textTheme
                          .bodyMedium!
                          .copyWith(fontSize: 16),
                    ),
                  ),
                ),
                ButtonBar(
                  alignment: MainAxisAlignment.spaceAround,
                  buttonHeight: 52.0,
                  buttonMinWidth: 90.0,
                  children: <Widget>[
                    TextButton(
                      style: flatButtonStyle,
                      onPressed: () {
                        cardB.currentState?.expand();
                      },
                      child: const Column(
                        children: <Widget>[
                          Icon(Icons.arrow_downward),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 2.0),
                          ),
                          Text('Open'),
                        ],
                      ),
                    ),
                    TextButton(
                      style: flatButtonStyle,
                      onPressed: () {
                        cardB.currentState?.collapse();
                      },
                      child: const Column(
                        children: <Widget>[
                          Icon(Icons.arrow_upward),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 2.0),
                          ),
                          Text('Close'),
                        ],
                      ),
                    ),
                    TextButton(
                      style: flatButtonStyle,
                      onPressed: () {
                        cardB.currentState?.toggleExpansion();
                      },
                      child: const Column(
                        children: <Widget>[
                          Icon(Icons.swap_vert),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 2.0),
                          ),
                          Text('Toggle'),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12.0),
            child: ExpansionTileCard(
              key: cardB,
              expandedTextColor: Colors.red,
              leading: const CircleAvatar(child: Text('B')),
              title: const Text('Tap me!'),
              subtitle: const Text('I expand, too!'),
              children: <Widget>[
                const Divider(
                  thickness: 1.0,
                  height: 1.0,
                ),
                Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16.0,
                      vertical: 8.0,
                    ),
                    child: Text(
                      """Hi there, I'm a drop-in replacement for Flutter's ExpansionTile.

Use me any time you think your app could benefit from being just a bit more Material.

These buttons control the card above!""",
                      style: Theme.of(context)
                          .textTheme
                          .bodyMedium!
                          .copyWith(fontSize: 16),
                    ),
                  ),
                ),
                ButtonBar(
                  alignment: MainAxisAlignment.spaceAround,
                  buttonHeight: 52.0,
                  buttonMinWidth: 90.0,
                  children: <Widget>[
                    TextButton(
                      style: flatButtonStyle,
                      onPressed: () {
                        cardA.currentState?.expand();
                      },
                      child: const Column(
                        children: <Widget>[
                          Icon(Icons.arrow_downward),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 2.0),
                          ),
                          Text('Open'),
                        ],
                      ),
                    ),
                    TextButton(
                      style: flatButtonStyle,
                      onPressed: () {
                        cardA.currentState?.collapse();
                      },
                      child: const Column(
                        children: <Widget>[
                          Icon(Icons.arrow_upward),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 2.0),
                          ),
                          Text('Close'),
                        ],
                      ),
                    ),
                    TextButton(
                      style: flatButtonStyle,
                      onPressed: () {
                        cardA.currentState?.toggleExpansion();
                      },
                      child: const Column(
                        children: <Widget>[
                          Icon(Icons.swap_vert),
                          Padding(
                            padding: EdgeInsets.symmetric(vertical: 2.0),
                          ),
                          Text('Toggle'),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键点解释

  • GlobalKey: 通过GlobalKey来控制ExpansionTileCard的状态（展开或折叠）。例如，cardA和cardB是两个ExpansionTileCard的全局键。
  • leading、title、subtitle: 这些属性定义了ExpansionTileCard头部的内容。
  • children: 当ExpansionTileCard被展开时显示的子部件列表。
  • ButtonBar: 包含三个按钮，分别用于控制另一个ExpansionTileCard的展开、折叠和切换状态。

这个示例展示了如何使用expansion_tile_card插件创建具有Material Design风格的可扩展卡片，并且可以通过按钮交互来控制卡片的展开和折叠状态。希望这能帮助你在自己的项目中更好地利用这个插件！


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用expansion_tile_card插件来创建可扩展卡片组件的示例代码。这个插件通常用于创建一个可以展开和折叠的卡片视图，以显示或隐藏更多信息。

首先，确保你已经在你的pubspec.yaml文件中添加了expansion_tile_card依赖项：

dependencies:
  flutter:
    sdk: flutter
  expansion_tile_card: ^x.y.z  # 请替换为最新版本号

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

接下来，是一个完整的示例代码，展示如何使用ExpansionTileCard：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expansion Tile Card Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Expansion Tile Card Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              ExpansionTileCard(
                title: Text('Expandable Card 1'),
                leading: Icon(Icons.info),
                trailing: Icon(Icons.arrow_drop_down),
                subtitle: Text('This is the subtitle of the expandable card 1'),
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.star),
                    title: Text('Item 1 inside the expandable card'),
                  ),
                  ListTile(
                    leading: Icon(Icons.star),
                    title: Text('Item 2 inside the expandable card'),
                  ),
                ],
              ),
              SizedBox(height: 16),
              ExpansionTileCard(
                title: Text('Expandable Card 2'),
                leading: Icon(Icons.info),
                trailing: Icon(Icons.arrow_drop_down),
                subtitle: Text('This is the subtitle of the expandable card 2'),
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      'This is a detailed description of the expandable card 2 content.',
                      style: TextStyle(fontSize: 16),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中有两个可扩展卡片。每个卡片都包含标题、前导图标、尾随图标、副标题以及展开后显示的内容。

  • ExpansionTileCard的title属性用于设置卡片的标题。
  • leading属性用于设置卡片左侧的图标。
  • trailing属性用于设置卡片右侧的图标（通常是展开/折叠的箭头）。
  • subtitle属性用于设置卡片的副标题。
  • children属性是一个Widget列表，用于定义卡片展开后显示的内容。

运行这个代码，你将看到一个包含两个可扩展卡片的页面，点击卡片标题右侧的箭头可以展开或折叠卡片以显示或隐藏更多信息。

请确保替换expansion_tile_card: ^x.y.z为你实际使用的版本号。如果你还没有这个插件，可以在pub.dev上查找并获取最新版本号。

回到顶部