Flutter可扩展组件插件 expandable_widgets 的使用

expandable_widgets 是一个为Flutter提供可扩展组件的包，完全用Dart编写。它简化了开发过程中的重复代码，并提供了多种使用场景。

主要特点

快速

在Flutter中实现展开效果有多种方式，此包提供了一种快速且简便的方法来实现这一功能。

包容性

Expandable Widgets 提供了广泛的用途，可以满足不同的需求。

简单易用

只需一行代码即可获得基本的可扩展组件。

示例Demo

基本用法

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expandable Example')),
        body: Center(
          child: Expandable(
            firstChild: const Text('Hello world!'),
            secondChild: Center(child: const Text('Hello world!')),
          ),
        ),
      ),
    );
  }
}

扩展示例

通过添加 subChild 参数，您可以创建带有副标题的可扩展组件：

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

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

class MyApp extends StatelessWidget {
  final String data = "Your long text here...";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Extended Expandable Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Expandable(
            firstChild: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(data, maxLines: 3, textAlign: TextAlign.justify),
            ),
            secondChild: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(data, maxLines: 3, textAlign: TextAlign.justify),
            ),
            subChild: Text("Show Details"),
          ),
        ),
      ),
    );
  }
}

可扩展文本

使用 ExpandableText 组件可以轻松地创建带有展开功能的文本：

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

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

class MyApp extends StatelessWidget {
  final String data = "Your long text here...";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expandable Text Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ExpandableText(textWidget: Text(data, maxLines: 3)),
        ),
      ),
    );
  }
}

动画图标与可扩展组件结合

如果你想同时使用Flutter的 AnimatedIcon 和 Expandable，你可以这样做：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _animation = CurvedAnimation(parent: _animationController, curve: Curves.linear);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expandable with Animated Icon Example')),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Expandable(
              firstChild: Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: Text('Settings', style: TextStyle(fontSize: 18)),
              ),
              secondChild: Column(children: [Text('Option 1'), Text('Option 2'), Text('Option 3')]),
              animationController: _animationController,
              arrowLocation: ArrowLocation.left,
              arrowWidget: Padding(
                padding: const EdgeInsets.all(8.0),
                child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _animation, size: 16),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

以上是关于 expandable_widgets 插件的一些基本使用方法和示例。这个插件非常适合需要实现展开收起功能的应用场景，帮助开发者节省时间并提高效率。请根据实际需求调整参数以适应您的项目。