Flutter动态展开收起插件simple_expander的使用

Flutter 动态展开收起插件 simple_expander 的使用

特性

这是一个非常简单的展开/收起组件。

对于一个特定的项目，我对内置的展开/收起组件不满意，也没有在 pub.dev 上找到合适的组件，所以我自己制作了一个！

你可以自定义以下选项：

• 头部颜色
• 单元格颜色
• 头部标题
• 单元格标题
• 单元格副标题
• 头部尾部小部件
• 单元格尾部小部件
• 整体动画持续时间
• 单元格动画持续时间
• 基础高度（用于头部和单元格）
• 基础圆角（同样适用于头部和单元格）
• 长按单元格功能（允许调用弹出菜单功能）

看看这个美图吧：（我可不是最贵的）

开始使用

如果你想使用 simple_expander，你可以在控制台中输入以下命令：

flutter pub add simple_expander

或者在项目的依赖项中添加以下行：

dependencies:
  simple_expander: ^0.1.7

使用示例

const example = SimpleExpander(
    headerString: "Header title",
    tiles: moreValues.map((oneSimpleObject) => SimpleExpanderTile(
        title: oneSimpleObject.name,
        subtitle: oneSimpleObject.secondName,
        onTap: () async {
          log('onTap function for simple_expander_tile with id : ${oneSimpleObject.id}');
        }
    )).toList(),
);

// WITH "oneSimpleObject" BEING INSTANCES YOU LOOP OVER TO FEED YOUR TILES

完整示例代码

import 'dart:log';

import 'package:example/simple_object.dart';
import 'package:flutter/material.dart';

import 'package:simple_expander/simple_expander.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(title: 'Test page for SimpleExpander'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final List<SimpleObject> testValues = [
    SimpleObject(id: 1, name: "name name name name name name name name name name name name name name name name name ", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 2, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 3, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 4, name: "name", secondName: "secondName", moment: DateTime.now()),
  ];

  final List<SimpleObject> otherValues = [
    SimpleObject(id: 1, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 2, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 1, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 2, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 1, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 2, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 1, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 2, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 1, name: "name", secondName: "secondName", moment: DateTime.now()),
    SimpleObject(id: 2, name: "name", secondName: "secondName", moment: DateTime.now()),
  ];

  final List<SimpleObject> moreValues = [
    SimpleObject(id: 1, name: "name", secondName: "secondName secondName secondName secondName secondName secondName secondName secondName secondName secondName ", moment: DateTime.now()),
    SimpleObject(id: 2, name: "name", secondName: "secondName", moment: DateTime.now()),
  ];

  _showPopupMenu(RelativeRect pressPosition, SimpleObject simpleObject) async {
    await showMenu(
      context: context,
      position: pressPosition,
      items: [
        PopupMenuItem<String>(
          value: 'Modifier',
          onTap: () async {
            log('Message from popup menu item MODIFIER for simple object with id : ${simpleObject.id}');
          },
          child: const Text('Modifier'),
        ),
        PopupMenuItem<String>(
            value: 'Supprimer',
            onTap: () async {
              log('Message from popup menu item SUPPRIMER for simple object with id : ${simpleObject.id}');
            },
            child: const Text('Supprimer')
        ),
      ],
      elevation: 8.0,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.grey,
      ),
      body: Container(
        padding: const EdgeInsets.all(20),
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 100,),

              SimpleExpander(
                headerString: "Header title",
                initiallyExpanded: true,
                baseHeight: 90,
                tiles: moreValues.map((oneSimpleObject) => SimpleExpanderTile(
                  title: oneSimpleObject.name,
                  subtitle: oneSimpleObject.secondName,
                  onTap: () async {
                    log('onTap function for simple_expander_tile with id : ${oneSimpleObject.id}');
                  },
                  trailing: IconButton(
                    icon: const Icon(Icons.people, size: 30),
                    onPressed: () {
                      log("onPressed function has been triggered on tile trailing n°${oneSimpleObject.id}");
                    },
                  ),
                  showPopupMenuFunction: (RelativeRect pressPosition) {
                    _showPopupMenu(pressPosition, oneSimpleObject); // CAN BE CALLED EVEN IF NOT ASYNC
                  }
                )).toList(),
              ),

              const SizedBox(height: 20,),

              SimpleExpander(
                headerString: "Header title Header title Header title Header title Header title Header title Header title ",
                headerColor: Colors.deepPurpleAccent,
                headerTrailing: IconButton(
                  icon: const Icon(Icons.access_alarm, color: Colors.white, size: 25),
                  onPressed: () {
                    log("Header trailing widget has been pressed !!");
                  },
                ),
                tiles: testValues.map((oneSimpleObject) => SimpleExpanderTile(
                  title: oneSimpleObject.name,
                  subtitle: oneSimpleObject.secondName,
                  onTap: () async {
                    log('onTap function for simple_expander_tile with id : ${oneSimpleObject.id}');
                  },
                )).toList(),
              ),

              const SizedBox(height: 20,),

              SimpleExpander(
                headerString: "Header title",
                durationOnTiles: true,
                curve: 5,
                milliseconds: 100,
                tiles: otherValues.map((oneSimpleObject) => SimpleExpanderTile(
                  title: oneSimpleObject.name,
                  subtitle: null,
                  onTap: () async {
                    log('onTap function for simple_expander_tile with id : ${oneSimpleObject.id}');
                  },
                  tileColor: Colors.greenAccent,
                )).toList(),
              ),
            ],
          ),
        ),
      )
    );
  }
}