Flutter多选容器插件multi_select_container的使用

Flutter多选容器插件multi_select_container的使用

Multi Select Container 是一个 Flutter 包，它提供了一个可自定义的容器来从列表中选择多个项目。它允许您轻松地在 Flutter 应用程序中实现多选功能。

Multi Select Container 示例

查看示例应用

特性

  • 从列表中选择多个项目。
  • 自定义容器的外观。
  • 轻松集成到现有的 Flutter 项目中。
  • 支持 iOS 和 Android 平台。

开始使用

要开始使用该包，请在 pubspec.yaml 文件中添加依赖项并导入。

使用方法

为了更好地理解 MultiSelectBuilder 小部件的使用方法，请参考 示例部分。

MultiSelectBuilder<String>(builder: (context, controller) {
    return Column(
        children: [
            for(String item in itemList)
                MultiSelectContainer(
                    tag: item,
                    controller: controller,
                    child: const Text(item),
                ),
        ],
    ),
});

参数

  • tag: 容器的唯一标识符。
  • controller: MultiSelectController 的实例，用于控制选择状态。
  • child: 在容器内显示的小部件。
  • colorOnSelected: 当容器被选中时应用的颜色。
  • onTap: 点击容器时触发的回调函数。
  • elevation: 容器卡片的阴影高度。
  • radius: 容器卡片的圆角半径。
  • widgetOnTop: 可选的小部件，显示在容器顶部。

示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi Select Container',
      theme: ThemeData.dark(
        useMaterial3: true,
      ),
      home: const MyExamplePage(),
    );
  }
}

class MyExamplePage extends StatefulWidget {
  const MyExamplePage({super.key});

  [@override](/user/override)
  State<MyExamplePage> createState() => _MyExamplePageState();
}

class _MyExamplePageState extends State<MyExamplePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiSelectBuilder<int>(
      builder: ((context, controller) {
        bool isAnySelected = controller.selectedTags.isNotEmpty;
        int selectedLength = controller.selectedTags.length;

        AppBar appBar = AppBar(
          elevation: 4,
          title: const Text('Gallery'),
        );

        if (isAnySelected) {
          appBar = AppBar(
            elevation: 4,
            leading: IconButton(
              onPressed: () => controller.selectedTags = [],
              icon: const Icon(Icons.close),
            ),
            title: Text('$selectedLength Selected'),
          );
        }

        return Scaffold(
          appBar: appBar,
          body: GridView(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: 4 / 5,
              crossAxisSpacing: 2,
              mainAxisSpacing: 2,
            ),
            children: [
              for (int i = 1; i <= 21; i++)
                MultiSelectContainer.icon(
                  tag: i,
                  elevation: 4,
                  icon: const Icon(Icons.check, size: 40),
                  controller: controller,
                  child: Image.network('https://picsum.photos/400/500?random=$i'),
                ),
            ],
          ),
        );
      }),
    );
  }
}

更多关于Flutter多选容器插件multi_select_container的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，下面是一个关于如何使用Flutter的multi_select_container插件的示例代码。这个插件允许你创建一个多选的容器，用户可以在其中选择多个选项。首先，你需要确保你的Flutter项目中已经添加了multi_select_container依赖。

  1. 在pubspec.yaml文件中添加依赖：
dependencies:
  flutter:
    sdk: flutter
  multi_select_container: ^最新版本号  # 请替换为最新的版本号

  1. 运行flutter pub get来安装依赖。

  2. 在你的Dart文件中使用MultiSelectContainer：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
    'Option 5',
  ];

  List<String> selectedItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MultiSelectContainer Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: MultiSelectContainer<String>(
          items: items,
          selectedItems: selectedItems,
          onSelectionChanged: (List<String> newSelection) {
            setState(() {
              selectedItems = newSelection;
            });
          },
          itemBuilder: (context, item, isSelected) {
            return Card(
              color: isSelected ? Colors.blue.shade100 : Colors.white,
              child: ListTile(
                leading: Icon(
                  isSelected ? Icons.check_circle : Icons.circle,
                  color: isSelected ? Colors.blue : Colors.grey,
                ),
                title: Text(item),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 在这里处理选中的项目，比如显示一个对话框或者执行其他操作
          showDialog(
            context: context,
            builder: (context) => AlertDialog(
              title: Text('Selected Items'),
              content: Text(selectedItems.join(', ')),
              actions: <Widget>[
                TextButton(
                  onPressed: () => Navigator.of(context).pop(),
                  child: Text('OK'),
                ),
              ],
            ),
          );
        },
        tooltip: 'Show Selected Items',
        child: Icon(Icons.list),
      ),
    );
  }
}

代码说明：

  • 依赖添加：在pubspec.yaml文件中添加multi_select_container依赖。
  • MultiSelectContainer：使用MultiSelectContainer来创建一个多选容器。
    • items：这是你需要展示的选项列表。
    • selectedItems：这是当前选中的选项列表，初始为空。
    • onSelectionChanged：当用户选择或取消选择某个选项时，这个回调会被触发，你可以在这里更新你的状态。
    • itemBuilder：这是一个构建每个选项的回调，你可以自定义每个选项的UI。
  • FloatingActionButton：一个浮动按钮，点击后会显示一个对话框，显示当前选中的项目。

这个示例展示了如何使用multi_select_container插件创建一个简单的多选界面，并根据用户的选择更新UI。你可以根据自己的需求进一步自定义和扩展这个示例。

回到顶部