Flutter文本选择插件selectable_items的使用

Flutter文本选择插件selectable_items的使用

selectable_items 是一个用于管理可选项目的 Flutter 包，它封装了一个项目列表和当前选中的项目。需要注意的是，该类是不可变的（immutable），每次操作都会返回一个新的实例。

特性 (Features)

• 提供了对项目列表的操作功能，如获取当前项、插入、删除、修改等。
• 不改变原始数据，而是生成新的实例。

开始使用 (Getting Started)

此包依赖于 freezed 和 freezed_annotation 包，请确保在 pubspec.yaml 中添加以下依赖：

dependencies:
  selectable_items: ^版本号
  freezed: ^版本号
  freezed_annotation: ^版本号

dev_dependencies:
  build_runner: ^版本号

运行以下命令以生成代码：

flutter pub get
flutter pub run build_runner build

使用方法 (Usage)

初始化 (Initialize)

首先，创建一个 SelectableItems 实例，并指定初始的当前索引和项目列表：

import 'package:selectable_items/selectable_items.dart';

void main() {
  final selectedItems = SelectableItems(
    currentIndex: 0, // 当前选中的索引
    items: [1, 2, 3, 4, 5], // 项目列表
  );

  print(selectedItems.currentItem); // 输出: 1
}

获取当前项 (Get the current item)

通过 currentItem 属性可以直接获取当前选中的项目：

final selectedItems = SelectableItems(
  currentIndex: 0,
  items: [1, 2, 3, 4, 5],
);

print(selectedItems.currentItem); // 输出: 1

选择一项 (Selects an item)

通过 selectItem 方法可以选择新的当前项：

final selectedItems = SelectableItems(
  currentIndex: 0,
  items: [1, 2, 3, 4, 5],
);

final newSelectedItems = selectedItems.selectItem(2);
print(newSelectedItems.currentItem); // 输出: 3

插入一项 (Inserts an item)

通过 insertItem 方法可以在指定位置插入新项目。如果不传入索引，则默认插入到末尾：

final selectedItems = SelectableItems(
  currentIndex: 0,
  items: [1, 2, 3, 4, 5],
);

// 默认插入到末尾
final newSelectedItems = selectedItems.insertItem(10);
print(newSelectedItems.items); // 输出: [1, 2, 3, 4, 5, 10]
print(newSelectedItems.currentItem); // 输出: 10

// 指定插入位置
final anotherSelectedItems = selectedItems.insertItem(10, index: 2);
print(anotherSelectedItems.items); // 输出: [1, 2, 10, 3, 4, 5]
print(anotherSelectedItems.currentItem); // 输出: 10

删除一项 (Deletes an item)

通过 deleteItem 方法可以删除指定索引的项目：

final selectedItems = SelectableItems(
  currentIndex: 0,
  items: [1, 2, 3, 4, 5],
);

final newSelectedItems = selectedItems.deleteItem(2);
print(newSelectedItems.items); // 输出: [1, 2, 4, 5]
print(newSelectedItems.currentItem); // 输出: 2

修改一项 (Modifies an item)

通过 modifyItem 方法可以修改指定索引的项目值：

final selectedItems = SelectableItems(
  currentIndex: 0,
  items: [1, 2, 3, 4, 5],
);

final newSelectedItems = selectedItems.modifyItem(0, 10);
print(newSelectedItems.items); // 输出: [10, 2, 3, 4, 5]
print(newSelectedItems.currentItem); // 输出: 10

额外信息 (Additional Information)

暂无额外信息。

完整示例 Demo

以下是一个完整的示例代码，展示如何使用 selectable_items 包进行基本操作：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Selectable Items Demo')),
        body: SelectableItemsDemo(),
      ),
    );
  }
}

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

class _SelectableItemsDemoState extends State<SelectableItemsDemo> {
  late SelectableItems<int> _selectedItems;

  [@override](/user/override)
  void initState() {
    super.initState();
    _selectedItems = SelectableItems(
      currentIndex: 0,
      items: [1, 2, 3, 4, 5],
    );
  }

  void _onSelectItem(int index) {
    setState(() {
      _selectedItems = _selectedItems.selectItem(index);
    });
  }

  void _onInsertItem() {
    setState(() {
      _selectedItems = _selectedItems.insertItem(10);
    });
  }

  void _onDeleteItem() {
    setState(() {
      _selectedItems = _selectedItems.deleteItem(2);
    });
  }

  void _onModifyItem() {
    setState(() {
      _selectedItems = _selectedItems.modifyItem(0, 10);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Current Item: ${_selectedItems.currentItem}'),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () => _onSelectItem(2),
            child: Text('Select Index 2'),
          ),
          ElevatedButton(
            onPressed: _onInsertItem,
            child: Text('Insert Item 10'),
          ),
          ElevatedButton(
            onPressed: _onDeleteItem,
            child: Text('Delete Index 2'),
          ),
          ElevatedButton(
            onPressed: _onModifyItem,
            child: Text('Modify Index 0 to 10'),
          ),
        ],
      ),
    );
  }
}