Flutter可扩展列表插件expansion_list的使用

expansion_list 是一个用于在 Flutter 中创建可扩展列表的新插件。它允许用户通过点击来展开或折叠列表项，从而实现更友好的用户界面。

开始使用

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

dependencies:
  flutter:
    sdk: flutter
  expansion_list: ^1.0.0  # 请检查最新的版本号

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

接下来，我们来看一下如何使用这个插件。

示例代码

以下是一个完整的示例代码，展示了如何使用 expansion_list 插件。

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExpansionListExample(),
    );
  }
}

// 忽略：必须不可变
class ExpansionListExample extends StatelessWidget {
  String month = 'Month';

  final List<String> months = ['Jan', 'Feb', 'Mar'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expansion list example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('正常用法'),
            SizedBox(height: 10),
            ExpansionList(
              onItemSelected: (selected) {
                month = selected.toString();
                print(month); // 获取选中的值
              },
              items: months,
              title: month,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入库

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

2. 定义主应用类

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

3. 定义 ExpansionListExample 类

   class ExpansionListExample extends StatelessWidget {
     String month = 'Month';
   
     final List<String> months = ['Jan', 'Feb', 'Mar'];
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Expansion list example'),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text('正常用法'),
               SizedBox(height: 10),
               ExpansionList(
                 onItemSelected: (selected) {
                   month = selected.toString();
                   print(month); // 获取选中的值
                 },
                 items: months,
                 title: month,
               ),
             ],
           ),
         ),
       );
     }
   }