Flutter列表选择组件插件list_selection_widget的使用

Flutter列表选择组件插件list_selection_widget的使用

list_selection_widget 是一个Flutter插件，提供了一个高度可定制的下拉列表，用于轻松选择单个或多个选项。

预览

以下是该插件的效果预览图：

使用方法

1. 导入包

首先，在你的Dart文件中导入 list_selection_widget 包：

import 'package:list_selection_widget/list_selection_widget.dart';

2. 单选和多选

插件提供了两种主要的构造函数：

• ListSelectionWidget.single：用于单选
• ListSelectionWidget.multi：用于多选

单选示例

以下是一个单选的示例代码：

ListSelectionWidget<String>.single(
  hintText: '选择一个选项',
  listItems: [
    SelectionItem(value: 'flutter', label: 'Flutter'),
    SelectionItem(value: 'react_native', label: 'React Native'),
    SelectionItem(value: 'swift', label: 'Swift'),
  ],
  selectedValue: null,
  onSingleItemSelected: (item) {
    print('Selected: ${item.label}');
  },
)

多选示例

以下是一个多选的示例代码：

ListSelectionWidget<String>.multi(
  hintText: '选择多个选项',
  listItems: [
    SelectionItem(value: 'flutter', label: 'Flutter'),
    SelectionItem(value: 'react_native', label: 'React Native'),
    SelectionItem(value: 'swift', label: 'Swift'),
  ],
  multiSelectValues: [],
  onMultiItemsSelected: (items) {
    print('Selected: ${items.map((item) => item.label).join(', ')}');
  },
)

3. 自定义

该组件提供了多种自定义选项，例如：

• decoration：自定义组件的整体外观
• iconStyle：自定义组件中的图标样式
• textStyle：自定义文本样式
• paddingData：调整组件不同部分的内边距
• hideLines：隐藏项目之间的分隔线
• maxHeight：设置下拉列表的最大高度

以下是一个带有自定义选项的单选示例：

ListSelectionWidget<String>.single(
  hintText: '选择一个选项',
  listItems: [
    SelectionItem(value: 'flutter', label: 'Flutter'),
    SelectionItem(value: 'react_native', label: 'React Native'),
    SelectionItem(value: 'swift', label: 'Swift'),
  ],
  selectedValue: null,
  onSingleItemSelected: (item) {
    print('Selected: ${item.label}');
  },
  hideLines: true,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  iconStyle: IconStyleData(
    collapsedIconColor: Colors.white,
    expandedIconColor: Colors.amber,
  ),
  textStyle: TextStyleData(
    titleStyle: TextStyle(color: Colors.white),
    itemTextStyle: TextStyle(color: Colors.white),
  ),
  maxHeight: 200,
)

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用单选和多选组件，并结合状态管理来跟踪已选中的项目：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'List Selection Widget Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Demo(title: 'List Selection Widget Demo'),
    );
  }
}

class Demo extends StatefulWidget {
  const Demo({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  final List<SelectionItem<String>> _listItems = [
    SelectionItem(value: 'flutter', label: 'Flutter'),
    SelectionItem(value: 'react_native', label: 'React Native'),
    SelectionItem(value: 'swift', label: 'Swift'),
    SelectionItem(value: 'kotlin', label: 'Kotlin'),
  ];

  SelectionItem<String>? _selectedItem;
  List<SelectionItem<String>> _multiSelectedItems = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 单选组件
            ListSelectionWidget<String>.single(
              hintText: '选择一个项目',
              listItems: _listItems,
              selectedValue: _selectedItem,
              onSingleItemSelected: (item) {
                setState(() {
                  _selectedItem = item;
                });
              },
              hideLines: true,
            ),
            const SizedBox(height: 30),
            // 多选组件
            ListSelectionWidget<String>.multi(
              hintText: '选择多个项目',
              listItems: _listItems,
              multiSelectValues: _multiSelectedItems,
              onMultiItemsSelected: (items) {
                setState(() {
                  _multiSelectedItems = items;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}