Flutter多级联动选择插件multiselect_nested的使用

Multi Select Nested 是一个支持Flutter中嵌套选项的包。它允许开发者创建单选或复选的下拉菜单，这些菜单可以包含多层级的选项，并且提供了丰富的自定义选项。

Features

• 单选和多选支持嵌套选项
• 丰富的选项和高度可定制性

Getting Started

添加依赖

首先，在您的pubspec.yaml文件中添加multiselect_nested作为依赖：

dependencies:
  flutter:
    sdk: flutter
  multiselect_nested: # 使用最新版本    

然后在您的Dart文件中导入这个库：

import 'package:multiselect_nested/multiselect_nested.dart';

如果您需要，还可以创建一个MultiSelectNestedController来传递给组件作为属性：

import 'package:multiselect_nested/models/multiselect_nested.dart';

MultiSelectNestedController multiSelectController = MultiSelectNestedController();

另外，您也可以导入模型multiselect_nested_item，这有助于在传递选项和预选项目时使用正确的接口：

import 'package:multiselect_nested/models/multiselect_nested_item.dart';

示例代码

下面是一个完整的示例，展示了如何使用MultiSelectNested组件，包括从JSON文件加载数据、设置控制器、以及响应用户的选择。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:multiselect_nested/models/multiselect_nested_controller.dart';
import 'package:multiselect_nested/models/multiselect_nested_item.dart';
import 'package:multiselect_nested/multiselect_nested.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<MultiSelectNestedItem> selected = [];
  MultiSelectNestedController multiSelectController = MultiSelectNestedController();

  Future<List<MultiSelectNestedItem>> getJson() async {
    var data = await rootBundle.loadString('assets/example_data.json');
    return multiSelectNestedFromJson(data);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: [
                FutureBuilder<List<MultiSelectNestedItem>>(
                  future: getJson(),
                  builder: (BuildContext context, AsyncSnapshot<List<MultiSelectNestedItem>> snapshot) {
                    switch (snapshot.connectionState) {
                      case ConnectionState.waiting:
                        return const Text('Loading....');
                      default:
                        if (snapshot.hasError) {
                          return Text('Error: ${snapshot.error}');
                        } else {
                          return Column(
                            children: [
                              MultiSelectNested(
                                controller: multiSelectController,
                                options: snapshot.data!,
                                selectedValues: selected,
                                isAnimatedContainer: false,
                                liveUpdateValues: false,
                                checkParentWhenChildIsSelected: true,
                                setSelectedValues: (List<MultiSelectNestedItem> newValues) {
                                  setState(() {
                                    selected = newValues;
                                  });
                                },
                              ),
                            ],
                          );
                        }
                    }
                  },
                ),
                const SizedBox(height: 20,),
                ElevatedButton(
                  onPressed: () {
                    print('values ${multiSelectController.getSelectedItems()} ${multiSelectController.getSelectedItems().length}');
                    setState(() {
                      selected = multiSelectController.getSelectedItems();
                    });
                  },
                  child: const Text('Update and Get Values'),
                ),
                ElevatedButton(
                  onPressed: () {
                    multiSelectController.clearValues();
                  },
                  child: const Text('Clear Values'),
                ),
                ElevatedButton(
                  onPressed: () {
                    multiSelectController.expandContainer();
                  },
                  child: const Text('Programmatically Expand Container'),
                ),
                const SizedBox(height: 20,),
                selected.isNotEmpty
                    ? Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: selected.map((MultiSelectNestedItem item) {
                          return Text(item.name);
                        }).toList(),
                      )
                    : const Text('Still No Selected Values..')
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用程序，其中包含一个多级联动选择器。它从资产文件中加载了示例数据，并允许用户通过按钮更新所选值、清除所有选择或编程方式展开容器。此外，当用户选择了某些项后，它们的名字会被显示出来。

请注意，为了使此代码正常工作，您还需要确保您的项目中有名为example_data.json的文件位于assets/目录下，并且该文件包含了符合MultiSelectNestedItem格式的数据。