Flutter可扩展列表项插件flutter_expandable_widget的使用

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

Flutter可扩展列表项插件flutter_expandable_widget的使用

flutter_expandable_widget 是一个用于创建可扩展列表项的 Flutter 插件，它提供了简单的控制来展开和关闭列表项。

Getting Started

在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  flutter_expandable_widget: ^1.0.5

然后导入该插件：

import 'package:flutter_expandable_widget/flutter_expandable_widget.dart';

Usage Examples

ExpandableWidget

以下是一个基本的 ExpandableWidget 示例：

ExpandableWidget(
  title: const Padding(
    padding: EdgeInsets.only(left: 10),
    child: Text('Center'),
  ),
  decoration: const BoxDecoration(color: Color(0xFF81C784)),
  childrenPadding: const EdgeInsets.only(top: 50),
  children: const [
    Text('S'),
    Text('M'),
    Text('L'),
    Text('XL'),
  ],
)

设置尾部图标和旋转动画

你可以自定义尾部图标及其旋转动画的持续时间和旋转次数：

ExpandableWidget(
  title: const Text('Change trailing widget'),
  decoration: BoxDecoration(color: Colors.yellow, borderRadius: BorderRadius.circular(10)),
  trailing: const Icon(Icons.arrow_forward),
  trailingStartTurns: 1,
  trailingEndTurns: 0.75,
  trailingDuration: const Duration(milliseconds: 350),
  children: const [
    Text('S'),
    Text('M'),
    Text('L'),
    Text('XL'),
  ],
)

设置标题和尾部图标的位置

你可以设置尾部图标相对于标题的位置：

ExpandableWidget(
  title: const Text('Trailing At Left'),
  decoration: const BoxDecoration(color: Colors.green),
  trailing: const Icon(Icons.arrow_back),
  trailingPosition: TrailingPosition.left,
  trailingStartTurns: 1,
  trailingEndTurns: 0.75,
  children: const [
    Text('S'),
    Text('M'),
    Text('L'),
    Text('XL'),
  ],
)

设置展开方向

你可以设置展开的方向，例如从上到下或从下到上：

ExpandableWidget(
  title: const Text('titlePosition At Bottom'),
  decoration: BoxDecoration(color: Colors.red[400]),
  expansionDirection: ExpansionDirection.expandUp,
  trailingPosition: TrailingPosition.right,
  trailingEndTurns: -0.25,
  content: Column(
    children: const [
      Text('S'),
      Text('M'),
      Text('L'),
      Text('XL'),
    ],
  ),
)

使用 ExpandableWidget.content

你也可以使用 ExpandableWidget.content 来替代 children 属性：

ExpandableWidget.content(
  title: const Text('Center'),
  decoration: const BoxDecoration(color: Color(0xFF81C784)),
  titleRowAxisAlignment: MainAxisAlignment.center,
  trailing: const Icon(Icons.arrow_back),
  trailingPosition: TrailingPosition.left,
  trailingStartTurns: 1,
  trailingEndTurns: 0.75,
  childrenPadding: const EdgeInsets.only(top: 50),
  content: Column(
    children: const [
      Text('S'),
      Text('M'),
      Text('L'),
      Text('XL'),
    ],
  ),
)

完整示例代码

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

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ExpandableWidgetController expandableWidgetController = ExpandableWidgetController();
  ExpandableWidgetController expandableWidgetController2 = ExpandableWidgetController();
  ExpandableWidgetController expandableWidgetController3 = ExpandableWidgetController();
  ExpandableWidgetController expandableWidgetController4 = ExpandableWidgetController();
  ExpandableWidgetController expandableWidgetController5 = ExpandableWidgetController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: ListView(
          children: [
            ExpandableWidget(
              title: const Text('T-Shirt'),
              decoration: const BoxDecoration(color: Colors.lightBlueAccent),
              controller: expandableWidgetController,
              children: const [
                Text('S'),
                Text('M'),
                Text('L'),
                Text('XL'),
              ],
            ),
            const SizedBox(height: 20),
            ExpandableWidget(
              title: const Text('Change trailing widget'),
              decoration: BoxDecoration(color: Colors.yellow, borderRadius: BorderRadius.circular(10)),
              trailing: const Icon(Icons.arrow_forward),
              controller: expandableWidgetController2,
              children: const [
                Text('S'),
                Text('M'),
                Text('L'),
                Text('XL'),
              ],
            ),
            const SizedBox(height: 20),
            ExpandableWidget(
              title: const Text('Trailing At Left'),
              decoration: const BoxDecoration(color: Colors.green),
              trailing: const Icon(Icons.arrow_back),
              trailingPosition: TrailingPosition.left,
              trailingStartTurns: 1,
              trailingEndTurns: 0.75,
              controller: expandableWidgetController3,
              children: const [
                Text('S'),
                Text('M'),
                Text('L'),
                Text('XL'),
              ],
            ),
            const SizedBox(height: 20),
            ExpandableWidget(
              title: const Padding(
                padding: EdgeInsets.only(left: 10),
                child: Text('Center'),
              ),
              decoration: const BoxDecoration(color: Color(0xFF81C784)),
              titleRowAxisAlignment: MainAxisAlignment.center,
              trailing: const Icon(Icons.arrow_back),
              trailingPosition: TrailingPosition.left,
              trailingStartTurns: 1,
              trailingEndTurns: 0.75,
              controller: expandableWidgetController4,
              childrenPadding: const EdgeInsets.only(top: 50),
              children: const [
                Text('S'),
                Text('M'),
                Text('L'),
                Text('XL'),
              ],
            ),
            const SizedBox(height: 20),
            ExpandableWidget.content(
              decoration: BoxDecoration(color: Colors.red[400]),
              title: const Text('titlePosition At Bottom'),
              expansionDirection: ExpansionDirection.expandUp,
              trailingPosition: TrailingPosition.right,
              trailingEndTurns: -0.25,
              content: Column(
                children: const [
                  Text('S'),
                  Text('M'),
                  Text('L'),
                  Text('XL'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

希望这些示例能帮助你更好地理解和使用 flutter_expandable_widget 插件。如果你有任何问题或需要进一步的帮助，请随时提问！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 flutter_expandable_widget 插件的示例代码。这个插件允许你创建一个可扩展和可折叠的列表项。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_expandable_widget: ^2.0.0  # 请确保使用最新版本

然后，运行 flutter pub get 以获取依赖项。

接下来，是一个完整的示例代码，展示如何在 Flutter 应用中使用 flutter_expandable_widget：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Expandable Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExpandableWidgetDemo(),
    );
  }
}

class ExpandableWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expandable Widget Demo'),
      ),
      body: ListView.builder(
        itemCount: 10, // 假设我们有10个可扩展项
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: ExpandableNotifier(
              initialExpanded: index == 0, // 第一个项目默认展开
              child: ExpandablePanel(
                header: ListTile(
                  title: Text('Item $index'),
                  trailing: Icon(
                    Icons.expand_more,
                  ),
                ),
                collapsed: Container(
                  child: Text('This is item $index collapsed content.'),
                ),
                expanded: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('This is item $index expanded content.'),
                    SizedBox(height: 10),
                    Text('More detailed information about item $index.'),
                  ],
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 添加依赖：在 pubspec.yaml 文件中添加了 flutter_expandable_widget 依赖。
  2. 创建应用：在 main.dart 文件中创建了一个简单的 Flutter 应用。
  3. 使用 ExpandableNotifier 和 ExpandablePanel：在 ExpandableWidgetDemo 类中，我们使用了 ExpandableNotifier 和 ExpandablePanel 来创建可扩展的列表项。
  4. 生成列表：使用 ListView.builder 来生成一个包含 10 个可扩展项的列表。
  5. 初始状态：我们设置了第一个项默认展开，通过 initialExpanded 参数。

运行这个示例代码，你将看到一个包含 10 个可扩展项的列表，第一个项默认是展开的，点击其他项的标题可以展开或折叠它们。

希望这个示例能帮助你理解如何在 Flutter 中使用 flutter_expandable_widget 插件。

回到顶部