Flutter可搜索选择列表插件selectable_search_list的使用

Flutter可搜索选择列表插件selectable_search_list的使用

一个Flutter插件，用于提供带选择/取消选择功能的可搜索列表，包括一次性选择或取消选择所有项目的选项。

Selectable Search List Example

特性

  • 可搜索列表：轻松在列表中搜索项目。
  • 单独选择：单独选择或取消选择项目。
  • 全选/全不选：方便地选择或取消选择列表中的所有项目。

开始使用

要将selectable_search_list包添加到你的Flutter项目中，请遵循以下步骤：

1. 添加依赖

在你的pubspec.yaml文件中添加以下行：

dependencies:
  selectable_search_list: ^0.0.1 # 替换为最新版本

运行flutter pub get以获取该包。

示例代码

以下是一个简单的示例代码，展示如何使用selectable_search_list包。

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:selectable_search_list/selectable_search_list.dart'; // 导入你的包

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Selectable Search List Example')),
        body: MultiSelectListWidget(
          selectAllTextStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600), // 全选样式
          itemTitleStyle:  const TextStyle(fontSize: 14, fontWeight: FontWeight.w500), // 项目标题样式
          items: [
            ListItem(id: '1', title: 'Anything...'), // 项目1
            ListItem(id: '2', title: 'Something...'), // 项目2
            ListItem(id: '3', title: 'Nothing..'), // 项目3
          ],
          onItemsSelect: (selectedItems) { // 选择回调函数
            print('Selected Items: ${selectedItems.length}'); // 打印选择的项目数量
          },
        ),
      ),
    );
  }
}

更多关于Flutter可搜索选择列表插件selectable_search_list的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用selectable_search_list插件的示例代码。selectable_search_list是一个允许用户搜索并从列表中选择的Flutter插件。首先，确保你已经在pubspec.yaml文件中添加了该插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  selectable_search_list: ^最新版本号  # 请替换为最新的版本号

然后，运行flutter pub get来安装依赖。

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Selectable Search List 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 = List<String>.generate(100, (i) => "Item $i");

  // 选中项
  List<String> selectedItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selectable Search List Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SelectableSearchList<String>(
          // 数据源
          data: items,
          // 已选中项
          selectedItems: selectedItems,
          // 选择项变化时的回调
          onSelectedItemsChanged: (selectedItems) {
            setState(() {
              this.selectedItems = selectedItems;
            });
          },
          // 搜索栏样式
          searchBarDecoration: InputDecoration(
            prefixIcon: Icon(Icons.search),
            hintText: 'Search items...',
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          // 列表项构建器
          itemBuilder: (context, item) {
            return ListTile(
              title: Text(item),
            );
          },
          // 选中项构建器（可选）
          chipBuilder: (context, item, isSelected) {
            return Chip(
              label: Text(item),
              backgroundColor: isSelected ? Colors.blue.shade100 : Colors.transparent,
              selectedColor: Colors.blue,
              deleteIcon: Icon(
                Icons.cancel,
                color: Colors.blue,
              ),
              onDeleted: () {
                setState(() {
                  selectedItems.remove(item);
                });
              },
            );
          },
        ),
      ),
    );
  }
}

代码解释

  1. 导入包：首先导入flutter/material.dart和selectable_search_list包。
  2. 定义数据：在_MyHomePageState类中，定义了一个包含100个字符串项的列表items。
  3. 状态管理：使用selectedItems列表来存储用户选中的项，并在UI更新时调用setState。
  4. UI构建：
    • 使用Scaffold构建主页面。
    • 使用SelectableSearchList组件：
      • data：提供数据源。
      • selectedItems：提供当前选中的项。
      • onSelectedItemsChanged：当选中项变化时的回调，更新selectedItems。
      • searchBarDecoration：自定义搜索栏样式。
      • itemBuilder：构建列表项的Widget。
      • chipBuilder（可选）：构建选中项的Chip Widget，并提供删除功能。

运行此代码后，你将看到一个带有搜索功能的列表，用户可以通过搜索快速找到并选择项，选中的项会显示在页面顶部，并且可以通过点击删除图标来取消选择。

回到顶部