Flutter可展开组件插件expand_widget的使用

简介

expand_widget 是一个Dart包，它为Flutter开发者提供了一系列易于使用的组件，这些组件可以响应用户的交互而扩展。该库特别适用于需要展示更多内容或文本的场景。以下是expand_widget的一些特性：

Expand Child: 用于展示与已显示内容相关的更多部件。
Expand Text: 当文本过长时，允许用户点击以查看完整内容。

特性

ExpandIndicatorStyle参数

ExpandIndicatorStyle 参数允许选择与展开箭头本身相关的多种渲染选项。

隐藏箭头

当视图被展开时，可以通过设置 hideIndicatorOnExpand 参数来隐藏箭头部件。

自定义箭头部件

可自定义箭头的颜色、大小、填充、图标等。
提供自己的部件作为展开指示器，使用 indicatorBuilder 属性。

自定义提示字符串

通过 hintText 参数可以使用自定义的展开提示文字，默认情况下会使用 MaterialLocalizations 提供的文字。

手势展开

通过 expandOnGesture 参数启用下拉手势展开文本视图，默认值为 false。

动画定制

轻松自定义展开动画的持续时间和曲线。

ExpandChild特有的属性

collapsedVisibilityFactor 属性（仅限 ExpandChild 组件）允许显示部分隐藏内容。

示例代码

以下是一个完整的示例应用，演示了如何在Flutter项目中使用expand_widget中的 ExpandChild 和 ExpandText 组件。

// ignore_for_file: avoid_print

import 'package:expand_widget/expand_widget.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: 'Expand Widget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expand Widget'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: [
          Card(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: Column(
                children: [
                  Text(
                    'Expand Text',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  const SizedBox(height: 8),
                  const ExpandText(
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit risus pulvinar, hendrerit nisi quis, vehicula ante. Morbi ut diam elit. Praesent non justo sodales, auctor lacus id, congue massa. Duis ac odio dui. Sed sed egestas metus. Donec hendrerit velit magna. Vivamus elementum, nulla ac tempor euismod, erat nunc mollis diam, nec consequat nisl ex eu tellus. Curabitur fringilla enim at lorem pulvinar, id ornare tellus aliquam. Cras eget nibh tempor lacus aliquam rutrum.',
                    textAlign: TextAlign.justify,
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 4),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: Column(
                children: [
                  Text(
                    'Expand Child',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  const SizedBox(height: 8),
                  OutlinedButton(
                    child: const Text('Button0'),
                    onPressed: () => print('Pressed button0'),
                  ),
                  ExpandChild(
                    collapsedVisibilityFactor: 0.5,
                    child: Column(
                      children: [
                        OutlinedButton(
                          child: const Text('Button1'),
                          onPressed: () => print('Pressed button1'),
                        ),
                        OutlinedButton(
                          child: const Text('Button2'),
                          onPressed: () => print('Pressed button2'),
                        ),
                        OutlinedButton(
                          child: const Text('Button3'),
                          onPressed: () => print('Pressed button3'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Align(
                    alignment: Alignment.topCenter,
                    child: Text(
                      'Expand Child Horizontally',
                      style: Theme.of(context).textTheme.titleLarge,
                    ),
                  ),
                  const SizedBox(height: 8),
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: [
                        OutlinedButton(
                          child: const Text('Button'),
                          onPressed: () => print('Pressed button0'),
                        ),
                        ExpandChild(
                          direction: Axis.horizontal,
                          collapsedVisibilityFactor: 0.2,
                          child: Row(
                            children: [
                              ...List.generate(
                                4,
                                (index) => OutlinedButton(
                                  child: Text('Button$index'),
                                  onPressed: () =>
                                      print('Pressed button$index'),
                                ),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: Column(
                children: [
                  Text(
                    'Custom icon & text',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  const SizedBox(height: 8),
                  OutlinedButton(
                    child: const Text('Button0'),
                    onPressed: () => print('Pressed button0'),
                  ),
                  ExpandChild(
                    hideIndicatorOnExpand: true,
                    indicatorIconColor: Colors.red,
                    indicatorIconSize: 40,
                    expandIndicatorStyle: ExpandIndicatorStyle.both,
                    indicatorIcon: Icons.cake,
                    indicatorHintTextStyle: const TextStyle(fontSize: 16),
                    child: Column(
                      children: [
                        OutlinedButton(
                          child: const Text('Button1'),
                          onPressed: () => print('Pressed button1'),
                        ),
                        OutlinedButton(
                          child: const Text('Button2'),
                          onPressed: () => print('Pressed button2'),
                        ),
                        OutlinedButton(
                          child: const Text('Button3'),
                          onPressed: () => print('Pressed button3'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
          Card(
            child: Padding(
              padding: const EdgeInsets.all(8),
              child: Column(
                children: [
                  Text(
                    'Custom widget',
                    style: Theme.of(context).textTheme.titleLarge,
                  ),
                  const SizedBox(height: 8),
                  OutlinedButton(
                    child: const Text('Button0'),
                    onPressed: () => print('Pressed button0'),
                  ),
                  ExpandChild(
                    indicatorIconColor: Colors.red,
                    indicatorIconSize: 40,
                    expandIndicatorStyle: ExpandIndicatorStyle.both,
                    indicatorIcon: Icons.cake,
                    indicatorHintTextStyle: const TextStyle(fontSize: 16),
                    indicatorBuilder: (context, onTap, expanded) => InkWell(
                      onTap: onTap,
                      child: FlutterLogo(
                        style: expanded
                            ? FlutterLogoStyle.horizontal
                            : FlutterLogoStyle.stacked,
                        size: 50,
                      ),
                    ),
                    child: Column(
                      children: [
                        OutlinedButton(
                          child: const Text('Button1'),
                          onPressed: () => print('Pressed button1'),
                        ),
                        OutlinedButton(
                          child: const Text('Button2'),
                          onPressed: () => print('Pressed button2'),
                        ),
                        OutlinedButton(
                          child: const Text('Button3'),
                          onPressed: () => print('Pressed button3'),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用程序，其中包含了多个卡片，每个卡片展示了不同的 expand_widget 使用方式。你可以根据需要调整和扩展这些例子，以适应你的具体需求。

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

yuanlaile 1楼•2 天前

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

当然，下面是一个关于如何在Flutter中使用expand_widget插件的示例代码。这个插件允许你创建一个可展开和折叠的组件。

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

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

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

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

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

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

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

class ExpandWidgetExample extends StatefulWidget {
  @override
  _ExpandWidgetExampleState createState() => _ExpandWidgetExampleState();
}

class _ExpandWidgetExampleState extends State<ExpandWidgetExample> with SingleTickerProviderStateMixin {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expand Widget Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Click the button to expand or collapse the content below.',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            ExpandWidget(
              expanded: isExpanded,
              onExpandChanged: (newState) {
                setState(() {
                  isExpanded = newState;
                });
              },
              collapseIcon: Icon(Icons.expand_more),
              expandIcon: Icon(Icons.chevron_up),
              collapseHeight: 50, // The height when collapsed
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'This is the expandable content.',
                    style: TextStyle(fontSize: 16),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'You can add multiple widgets here.',
                    style: TextStyle(fontSize: 16),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'The content will be collapsed or expanded based on the isExpanded state.',
                    style: TextStyle(fontSize: 16),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

依赖添加：
- 在pubspec.yaml中添加expand_widget依赖。
导入包：
- 导入flutter/material.dart和expand_widget/expand_widget.dart。
主应用：
- MyApp类是一个简单的Flutter应用入口。
主页面：
- ExpandWidgetExample是一个有状态的Widget，用于管理isExpanded状态。
- 使用ExpandWidget组件，传递expanded、onExpandChanged、collapseIcon、expandIcon和collapseHeight等参数。
- child参数包含需要在展开时显示的内容。
交互：
- 当用户点击展开/折叠图标时，onExpandChanged回调会更新isExpanded状态，从而触发UI的重新渲染。

希望这个示例能帮助你理解如何在Flutter中使用expand_widget插件。如果你有任何其他问题，请随时提问！