Flutter可选择列表插件flutter_selectable_list的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter可选择列表插件flutter_selectable_list的使用

Flutter可选择列表插件flutter_selectable_list的使用

标题：Flutter可选择列表插件flutter_selectable_list的使用

内容：

  • SelectableListAnchor

    • 示例视频展示如何使用SelectableListAnchor。 示例视频

  • Features

    • SelectableList
      • 单选或多选构造函数
      • 使用提供的回调进行搜索和分页
    • SelectableListController
      • ChangeNotifier，允许从任何地方轻松管理SelectableList的状态
    • SelectableListAnchor
      • FormField构建器，用于在模态窗口（如BottomSheet、Dialog、Dropdown或SideSheet）中打开SelectableList

  • Usage

    • SelectableList

      • CustomScrollView监听SelectableListController。默认情况下，项目显示为垂直滚动的CheckboxListTiles。
      • 如果filteredItems不为空，则显示该列表。

    • Search

      • 基本搜索：
        • 默认搜索头部和搜索字段，提供一个TextField来过滤列表。
      • 异步搜索：
        • 可以通过传递onSearchTextChanged自定义搜索功能，或者传递自己的header widget。使用SelectableListController更新列表或指示加载状态。
      • 搜索视图：
        • 使用searchViewBuilder显示自定义视图代替SelectableList。控制器有属性控制何时显示搜索视图。

    • Load More Items

      • 当滚动阈值达到时（默认0.85），调用onScrollThresholdReached回调。用于获取更多项目并使用SelectableListController添加到列表。

    • SelectableListController

      • ChangeNotifier，维护项目列表及其选中值。包含确定加载和搜索状态的属性，并且可以与SelectableListAnchor一起打开模态窗口。

    • SelectableListAnchor

      • 构建器用于在模态窗口中打开SelectableList。此widget也是FormField，提供验证和其他标准FormField特性。错误文本可以通过传递validatorBuilder替换。

  • Contributing

    • 欢迎提交Pull Requests。如果对成为合作者感兴趣，请发送邮件。

示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Selectable List Example')),
        body: Center(child: MyWidget()),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  [@override](/user/override)
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final TextEditingController _formFieldKey = TextEditingController();
  bool _isDialogOpen = false;
  List<String> _companies = [
    'Apple',
    'Google',
    'Microsoft',
    'Amazon',
    'Facebook',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SelectableListAnchor.multi(
      items: _companies,
      itemTitle: (e) =&gt; e,
      elevation: 6,
      enableDefaultSearch: true,
      formFieldKey: _formFieldKey,
      pinSelectedValue: true,
      onConfirm: (val) {
        _formFieldKey.currentState?.validate();
      },
      validator: (value) {
        if (value?.isEmpty ?? true) return 'Required';
        return null;
      },
      builder: (controller, state) {
        return TextButton(
          onPressed: () async {
            controller.openDialog();
          },
          child: const Text('Open view'),
        );
      },
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_selectable_list插件的一个简单示例。这个插件允许你创建一个可选择的列表，用户可以通过长按或滑动来选择多个项目。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_selectable_list: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以创建一个使用flutter_selectable_list的简单Flutter应用。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Selectable 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(20, (i) => "Item $i");
  final SelectableListController<String> _controller = SelectableListController<String>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Selectable List Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SelectableList<String>(
          items: items,
          selectedItems: _controller.selectedItems,
          onSelectionChanged: (selectedItems) {
            setState(() {
              _controller.selectedItems = selectedItems;
            });
          },
          itemBuilder: (context, index, isSelected) {
            return Container(
              decoration: BoxDecoration(
                color: isSelected ? Colors.grey[200] : Colors.transparent,
                borderRadius: BorderRadius.circular(8),
              ),
              margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
              padding: EdgeInsets.all(16),
              child: Text(items[index]),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 打印选中的项目
          print('Selected items: ${_controller.selectedItems.join(", ")}');
        },
        tooltip: 'Print Selected Items',
        child: Icon(Icons.print),
      ),
    );
  }
}

代码解释

  1. 依赖导入：确保导入了flutter_selectable_list包。
  2. 数据准备：在MyHomePage的状态中，我们创建了一个包含20个字符串项的列表，以及一个SelectableListController来控制选中的项。
  3. UI构建：
    • 使用SelectableList组件来显示列表。
    • items属性指定了要显示的列表项。
    • selectedItems属性绑定到控制器的selectedItems属性，用于跟踪选中的项。
    • onSelectionChanged回调在选中项发生变化时被调用，用于更新控制器的状态。
    • itemBuilder回调用于构建每个列表项，这里我们简单地给选中的项添加了背景色。
  4. 浮动操作按钮：点击按钮时，打印出当前选中的项。

运行这个示例，你将看到一个可选择的列表，你可以通过长按或滑动来选择多个项目，并且选中的项目会被高亮显示。点击浮动操作按钮将打印出当前选中的项目。

回到顶部