Flutter文本选择插件selectable_list的使用

描述

Selectable List 是一个用于展示可选项目的Flutter小部件。当用户从列表中选择一项时，其他元素会以动画形式移出，只留下所选值。再次点击已选中的值时，其他选项将以动画形式重新显示出来。

功能特性

• 单选模式：允许用户在列表中选择一个元素，并且仅显示这个被选中的元素。
• 基于AnimatedList：利用了Flutter内置的AnimatedList组件实现动画效果。

使用方法

添加依赖

首先，在pubspec.yaml文件中添加selectable_list作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  selectable_list: ^最新版本号 # 替换为实际版本号

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

导入包并创建可选列表

接下来，可以在Dart代码中导入该库并使用它。下面是一个完整的示例程序，展示了如何创建一个简单的可选列表：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Selectable list example")),
        body: const Padding(
          padding: EdgeInsets.all(24),
          child: SelectableListExample(),
        ),
      ),
    );
  }
}

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

  @override
  State<SelectableListExample> createState() => _SelectableListExampleState();
}

class _SelectableListExampleState extends State<SelectableListExample> {
  final persons = [
    Person("Ella", 3),
    Person("James", 25),
    Person("Gertrude", 99)
  ];

  String? selectedName;

  @override
  Widget build(BuildContext context) {
    return SelectableList<Person, String?>(
      items: persons,
      itemBuilder: (context, person, selected, onTap) => ListTile(
        title: Text(person.name),
        subtitle: Text('${person.age} years old'),
        selected: selected,
        onTap: onTap,
      ),
      valueSelector: (person) => person.name,
      selectedValue: selectedName,
      onItemSelected: (person) => setState(() => selectedName = person.name),
      onItemDeselected: (person) => setState(() => selectedName = null),
    );
  }
}

class Person {
  final String name;
  final int age;

  Person(this.name, this.age);
}

此段代码定义了一个包含三个Person对象（分别是"Ella"、“James"和"Gertrude”）的应用程序。通过SelectableList小部件实现了这些人员信息的选择功能。每个项目都用ListTile表示，当用户点击某个项目时，它会被标记为选中状态，并触发相应的回调函数更新界面。

示例应用场合

这种类型的交互非常适合用于简化移动端表单设计，使得页面看起来更加整洁紧凑。例如，在需要用户做出唯一选择的情况下，可以将所有选项折叠起来，只保留当前选中的那一个，从而节省屏幕空间并提高用户体验。

以上就是关于selectable_list插件的基本介绍和使用指南。希望这能帮助到你！如果你有任何问题或遇到困难，请随时提问。