Flutter项目选择项插件item

Flutter项目选择项插件item_picker的使用

简介

item_picker 是一个用于在Flutter项目中创建可选项目的插件。它包含两个主要组件：ItemPicker 和 MultipleItemPicker，分别用于单选和多选。

特性

ItemPicker

这是一个单选项选择器。此小部件允许你构建一个可选项目列表。

ItemPicker<int>(
    list: [
      MapEntry("One", 1),
      MapEntry("Two", 2),
      MapEntry("Three", 3),
    ],
    onSelectionChange: (value) {
      // 对新选中的值进行处理
    },    
);

list 是由 MapEntry<String, T> 组成的列表，其中键是每个项目显示的标签，值是在每次点击条目时被选中的值。
可以通过传递 itemStyles 列表来自定义每个列表条目的样式。
可以设置一个可选的 defaultValue（默认情况下没有项目被选中）。
可以自定义 selectedMarker（默认情况下会在所选项目右侧显示一个复选标记）。
可以自定义每个项目的 separator（默认情况下不显示分隔符）。

MultipleItemPicker

这是一个多选项选择器。此小部件允许你构建一个多选项目列表，并带有可选的重置选项。

MultipleItemPicker<String>(
    list: [
      MapEntry("Dog", "dog"),
      MapEntry("Cat", "cat"),
      MapEntry("Bird", "bird"),
    ],
    resetOption: MapEntry("Reset", null),
    onItemSelect: (value) {
      // 对新选中的值进行处理
    },
    onItemUnSelect: (value) {
      // 对取消选中的值进行处理
    },
    onResetSelection: () {
      // 重置选择
    },
);

list 是由 MapEntry<String, T> 组成的列表，其中键是每个项目显示的标签，值是在每次点击条目时被选中的值。
可以通过传递 itemStyles 列表来自定义每个列表条目的样式。
可以设置一个可选的 defaultValues（默认情况下没有项目被选中）。
可以自定义 selectedMarker（默认情况下会在所选项目右侧显示一个复选标记）。
可以自定义每个项目的 separator（默认情况下不显示分隔符）。
可以添加一个 resetOption 来重置选择。resetOption 可以通过 resetOptionStyle 进行样式设置。

完整示例Demo

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ItemPicker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter ItemPicker Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<TextStyle>? styles;
  Widget? marker;
  Widget? separator;
  int pageIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title!)),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: _buildContent(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: "Single item",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.format_list_numbered),
            label: "Multiple item",
          ),
        ],
        currentIndex: pageIndex,
        onTap: (index) {
          setState(() {
            pageIndex = index;
          });
        },
      ),
    );
  }

  Widget _buildContent() {
    return Column(
      children: [
        Expanded(
          child: pageIndex == 0
              ? SingleItem(
                  separator: separator,
                  marker: marker,
                  styles: styles,
                )
              : MultipleItem(
                  separator: separator,
                  marker: marker,
                  styles: styles,
                ),
        ),
        _buildSettings(),
      ],
    );
  }

  Widget _buildSettings() {
    return Column(
      children: [
        _styleSetting(),
        _markerSetting(),
        _separatorSetting(),
      ],
    );
  }

  Widget _styleSetting() {
    return Row(
      children: [
        TextButton(
          onPressed: () {
            setState(() {
              styles = [
                TextStyle(color: Colors.green),
                TextStyle(color: Colors.blue),
                TextStyle(color: Colors.red),
                TextStyle(color: Colors.yellow),
                TextStyle(color: Colors.deepOrange),
              ];
            });
          },
          child: Text('自定义样式'),
        ),
        Expanded(
          child: TextButton(
            onPressed: () {
              setState(() {
                styles = null;
              });
            },
            child: Text('默认样式'),
          ),
        ),
      ],
    );
  }

  Widget _markerSetting() {
    return Row(
      children: [
        TextButton(
          onPressed: () {
            setState(() {
              marker = Icon(Icons.star, color: Colors.deepOrange);
            });
          },
          child: Text('自定义标记'),
        ),
        Expanded(
          child: TextButton(
            onPressed: () {
              setState(() {
                marker = null;
              });
            },
            child: Text('默认标记'),
          ),
        ),
      ],
    );
  }

  Widget _separatorSetting() {
    return Row(
      children: [
        TextButton(
          onPressed: () {
            setState(() {
              separator = Column(
                children: [
                  Container(height: 2.0, color: Colors.black38),
                  Container(height: 1.0, color: Colors.white),
                  Container(height: 2.0, color: Colors.black38),
                ],
              );
            });
          },
          child: Text('自定义分隔符'),
        ),
        Expanded(
          child: TextButton(
            onPressed: () {
              setState(() {
                separator = null;
              });
            },
            child: Text('默认分隔符'),
          ),
        ),
      ],
    );
  }
}

class SingleItem extends StatefulWidget {
  final List<TextStyle>? styles;
  final Widget? marker;
  final Widget? separator;

  SingleItem({this.styles, this.marker, this.separator});

  [@override](/user/override)
  _SingleItemState createState() => _SingleItemState();
}

class _SingleItemState extends State<SingleItem> {
  int selectedValue = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        ItemPicker<int>(
          list: [
            MapEntry("One", 1),
            MapEntry("Two", 2),
            MapEntry("Three", 3),
            MapEntry("Four", 4),
            MapEntry("Five", 5),
          ],
          defaultValue: selectedValue,
          itemStyles: widget.styles,
          selectedMarker: widget.marker,
          separator: widget.separator,
          onSelectionChange: (value) {
            setState(() {
              selectedValue = value;
            });
          },
        ),
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: List<Widget>.generate(
              selectedValue,
              (index) => Icon(Icons.person),
            ),
          ),
        ),
      ],
    );
  }
}

class MultipleItem extends StatefulWidget {
  final List<TextStyle>? styles;
  final Widget? marker;
  final Widget? separator;

  MultipleItem({this.styles, this.marker, this.separator});

  [@override](/user/override)
  _MultipleItemState createState() => _MultipleItemState();
}

class _MultipleItemState extends State<MultipleItem> {
  List<String?> _selectedValues = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        MultipleItemPicker<String?>(
          list: [
            MapEntry("Dog", "dog"),
            MapEntry("Cat", "cat"),
            MapEntry("Bird", "bird"),
            MapEntry("Hamster", "hamster"),
            MapEntry("Goldfish", "goldfish"),
          ],
          itemStyles: widget.styles,
          selectedMarker: widget.marker,
          separator: widget.separator,
          onItemSelect: (value) {
            setState(() {
              _selectedValues.add(value);
            });
          },
          onItemUnSelect: (value) {
            setState(() {
              _selectedValues.remove(value);
            });
          },
          resetOption: MapEntry("Reset selection", null),
          onResetSelection: () {
            setState(() {
              _selectedValues.clear();
            });
          },
        ),
        Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("选择: " + _selectedValues.toString()),
            ],
          ),
        ),
      ],
    );
  }
}

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

zlyuanteng 1楼•1 天前

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

当然，以下是如何在Flutter项目中使用item_picker插件的示例代码。item_picker插件通常用于在Flutter应用中显示和选择多个项目。以下步骤将展示如何集成和使用这个插件。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加item_picker的依赖：

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

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

2. 导入插件

在你的Dart文件中导入item_picker：

import 'package:item_picker/item_picker.dart';

3. 使用ItemPicker

以下是一个完整的示例，展示如何使用ItemPicker来显示和选择多个项目：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Item Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = List.generate(20, (index) => "Item $index");
  List<String> selectedItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Item Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                List<String> result = await showItemPicker(
                  context: context,
                  itemList: items,
                  selectedItemList: selectedItems,
                  title: 'Select Items',
                  showSearchBox: true,
                  multiSelect: true,
                  maxCount: null, // 无限制
                  addItems: [], // 额外添加项（可选）
                  onConfirm: (List<String> selected) {
                    // 用户确认选择后的回调
                    setState(() {
                      selectedItems = selected;
                    });
                  },
                );
                setState(() {
                  selectedItems = result;
                });
              },
              child: Text('Select Items'),
            ),
            SizedBox(height: 20),
            Text('Selected Items:'),
            Wrap(
              children: selectedItems.map((item) => Chip(
                label: Text(item),
              )).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

依赖导入：在pubspec.yaml中添加item_picker依赖，并在Dart文件中导入。
数据准备：创建一个包含20个项目的列表items，以及一个用于存储选定项目的列表selectedItems。
UI布局：使用ElevatedButton触发showItemPicker，当用户点击按钮时，会弹出一个对话框供用户选择项目。
选择回调：当用户选择项目并点击确认后，通过onConfirm回调更新selectedItems列表。
显示选定项目：使用Wrap和Chip小部件显示用户选定的项目。

这个示例展示了如何使用item_picker插件在Flutter项目中实现项目的多选功能。你可以根据需要进一步自定义和扩展这个示例。