Flutter选择器插件flutter_selector的使用

Flutter选择器插件flutter_selector的使用

简介

flutter_selector 是一个可定制的 Flutter 选择器插件，允许您自定义界面样式，并支持单选、多选甚至多个列表之间的联动选择。

特性

  • 支持自定义UI样式
  • 支持单列表选择器
  • 支持多列表选择器
  • 支持多个列表选择器之间的联动选择
  • 支持单列表选择器中的多选功能

预览

开始使用

安装

在您的 pubspec.yaml 文件中添加 flutter_selector 包：

dependencies:
  flutter_selector: ^1.0.3

然后运行 flutter pub get 命令来安装包。

使用

初始化

首先需要初始化选择器的参数：

Selector.init(
  height: 300, // 设置选择器的高度
  radius: 8, // 设置圆角半径
  itemExtent: 48, // 设置每个选项的高度
  padding: 12, // 设置内边距
  textSize: 14, // 设置文字大小
  textLeft: '取消', // 左侧按钮的文字
  textRight: '确定', // 右侧按钮的文字
  textColor: Colors.black54, // 文字颜色
  textColorLeft: Colors.black26, // 左侧按钮文字颜色
  textColorRight: Colors.black, // 右侧按钮文字颜色
  lineColor: Colors.white24, // 分割线颜色
  backgroundColor: Colors.grey); // 背景颜色

单选选择器

调用单选选择器：

Selector.showSingleSelector(context,
  list: getSingleData(), // 提供数据列表
  callBack: (selectorItem, position) { // 回调函数
    print('Selected item: $selectorItem at position: $position');
  });

双选选择器

调用双选选择器：

Selector.showDoubleSelector(context,
  listLeft: getDoubleData()[0], // 左侧列表数据
  listRight: getDoubleData()[1], // 右侧列表数据
  callBack: (selectorItemLeft, positionLeft, selectorItemRight, positionRight) { // 回调函数
    print('Selected item left: $selectorItemLeft at position: $positionLeft');
    print('Selected item right: $selectorItemRight at position: $positionRight');
  });

多选选择器

调用多选选择器：

Selector.showMultipleSelector(context,
  list: getMultipleData(), // 提供数据列表
  listPosition: _positions, // 当前选中的位置
  callBack: (selectorItems, positions) { // 回调函数
    print('Selected items: $selectorItems at positions: $positions');
  });

多选带联动的选择器

调用带联动的多选选择器：

Selector.showMultipleLinkSelector(context,
  list: getMultipleLinkData(), // 提供数据列表
  listPosition: _positionsLink, // 当前选中的位置
  callBack: (selectorItems, positions) { // 回调函数
    print('Selected items: $selectorItems at positions: $positions');
  });

支持多选的单选选择器

调用支持多选的单选选择器：

Selector.showSingleMultipleChoiceSelector(context,
  list: getMultipleChoiceData(), // 提供数据列表
  callBack: (List<SelectorItem> selectorItems) { // 回调函数
    print('Selected items: $selectorItems');
  });

示例代码

以下是完整的示例代码，展示了如何使用 flutter_selector 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'flutter_selector',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'flutter_selector'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    Selector.init(textColorRight: Colors.blueAccent);
    _selectorItemsMultipleChoice = getMultipleChoiceData();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: body(),
    );
  }

  Widget body() {
    StringBuffer buffer = StringBuffer();
    for (SelectorItem selectorItem in _selectorItems) {
      if (buffer.isEmpty) {
        buffer.write(selectorItem.name);
      } else {
        buffer.write('\n' + selectorItem.name);
      }
    }
    StringBuffer bufferLink = StringBuffer();
    for (SelectorItem selectorItem in _selectorItemsLink) {
      if (bufferLink.isEmpty) {
        bufferLink.write(selectorItem.name);
      } else {
        bufferLink.write('\n' + selectorItem.name);
      }
    }
    StringBuffer bufferMultipleChoice = StringBuffer();
    for (SelectorItem selectorItem in _selectorItemsMultipleChoice) {
      if (selectorItem.check) {
        if (selectorItem.id.isNotEmpty) {
          if (bufferMultipleChoice.isEmpty) {
            bufferMultipleChoice.write(selectorItem.name);
          } else {
            bufferMultipleChoice.write('\n' + selectorItem.name);
          }
        }
      }
    }

    return Container(
      width: double.infinity,
      margin: const EdgeInsets.symmetric(horizontal: 16),
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 16),
            TextButton(
              onPressed: _singleSelector,
              child: const Text('点击选择器(单)'),
            ),
            Text(_selectorItem?.name ?? ''),
            const SizedBox(height: 16),
            TextButton(
              onPressed: _doubleSelector,
              child: const Text('点击选择器(双)'),
            ),
            Text('${_selectorItemLeft?.name ?? ''}  ${_selectorItemRight?.name ?? ''}'),
            const SizedBox(height: 16),
            TextButton(
              onPressed: _multipleSelector,
              child: const Text('点击选择器(多)'),
            ),
            Text(buffer.toString()),
            const SizedBox(height: 16),
            TextButton(
              onPressed: _multipleLinkSelector,
              child: const Text('点击选择器(多，支持联动)'),
            ),
            Text(bufferLink.toString()),
            const SizedBox(height: 16),
            TextButton(
              onPressed: _multipleChoiceSelector,
              child: const Text('点击选择器(单，条件多选)'),
            ),
            Text(bufferMultipleChoice.toString()),
          ],
        ),
      ),
    );
  }

  /// ************************* Single Selector ************************* ///
  int _position = 0;
  SelectorItem? _selectorItem;

  void _singleSelector() {
    Selector.showSingleSelector(context,
        list: getSingleData(),
        textColorRight: Colors.black,
        position: _position,
        callBack: (selectorItem, position) {
      _position = position;
      _selectorItem = selectorItem;
      setState(() {});
    });
  }

  /// ************************* Double selector ************************* ///
  int? _positionLeft = 0;
  SelectorItem? _selectorItemLeft;
  int? _positionRight = 0;
  SelectorItem? _selectorItemRight;

  void _doubleSelector() {
    Selector.showDoubleSelector(context,
        listLeft: getDoubleData()[0],
        listRight: getDoubleData()[1],
        positionLeft: _positionLeft,
        positionRight: _positionRight,
        callBack: (selectorItemLeft, positionLeft, selectorItemRight, positionRight) {
      _positionLeft = positionLeft;
      _selectorItemLeft = selectorItemLeft;
      _positionRight = positionRight;
      _selectorItemRight = selectorItemRight;
      setState(() {});
    });
  }

  /// ************************* Multiple Selectors ************************* ///
  List<int> _positions = [];
  List<SelectorItem> _selectorItems = [];

  void _multipleSelector() {
    Selector.showMultipleSelector(context,
        list: getMultipleData(),
        textSize: 12,
        listPosition: _positions,
        callBack: (selectorItems, positions) {
      _positions = positions;
      _selectorItems = selectorItems;
      setState(() {});
    });
  }

  /// **************** Multiple selectors (support linkage)  **************** ///
  List<int> _positionsLink = [];
  List<SelectorItem> _selectorItemsLink = [];

  void _multipleLinkSelector() {
    Selector.showMultipleLinkSelector(context,
        list: getMultipleLinkData(),
        textSize: 12,
        listPosition: _positionsLink,
        callBack: (selectorItems, positions) {
      _positionsLink = positions;
      _selectorItemsLink = selectorItems;
      setState(() {});
    });
  }

  /// *********** Single selector (conditional multiple selection) *********** ///
  List<SelectorItem> _selectorItemsMultipleChoice = [];

  void _multipleChoiceSelector() {
    Selector.showSingleMultipleChoiceSelector(context,
        list: _selectorItemsMultipleChoice,
        textSize: 14,
        textColor: const Color(0xFF666666),
        selectColor: Colors.lightBlueAccent,
        describeColor: const Color(0xFF999999),
        describeSize: 12,
        callBack: (List<SelectorItem> selectorItems) {
      _selectorItemsMultipleChoice = selectorItems;
      setState(() {});
    });
  }

  /// ***************************** Test Data ***************************** ///
  List<SelectorItem> getSingleData() {
    List<SelectorItem> list = [];
    for (int i = 0; i < 9; i++) {
      list.add(SelectorItem(id: '$i', name: '${(i + 1) * 1000} 元'));
    }
    return list;
  }

  List<List<SelectorItem>> getDoubleData() {
    List<SelectorItem> list1 = [];
    for (int i = 0; i < 10; i++) {
      if (i == 0) {
        list1.add(SelectorItem(id: '${i + 1}', name: '开放式', hideNext: true));
      } else {
        list1.add(SelectorItem(id: '${i + 1}', name: '$i房'));
      }
    }
    List<SelectorItem> list2 = [];
    for (int i = 0; i < 10; i++) {
      list2.add(SelectorItem(id: '${i + 1}', name: '$i厅'));
    }
    return [list1, list2];
  }

  List<List<SelectorItem>> getMultipleData() {
    const int count = 6;
    List<SelectorItem> list1 = [];
    for (int i = 0; i < count; i++) {
      list1.add(SelectorItem(id: '${i + 1}', name: '供应商${i + 1}'));
    }
    List<SelectorItem> list2 = [];
    for (int i = 0; i < count; i++) {
      list2.add(SelectorItem(id: '${i + 1}', name: '制造商${i + 1}'));
    }
    List<SelectorItem> list3 = [];
    for (int i = 0; i < count; i++) {
      list3.add(SelectorItem(id: '${i + 1}', name: '分销商${i + 1}'));
    }
    List<SelectorItem> list4 = [];
    for (int i = 0; i < count; i++) {
      list4.add(SelectorItem(id: '${i + 1}', name: '零售商${i + 1}'));
    }
    List<SelectorItem> list5 = [];
    for (int i = 0; i < count; i++) {
      list5.add(SelectorItem(id: '${i + 1}', name: '消费者${i + 1}'));
    }
    return [list1, list2, list3, list4, list5];
  }

  List<SelectorItem> getMultipleLinkData() {
    const int count = 6;
    List<SelectorItem> level1 = [];
    for (int i = 0; i < count; i++) {
      List<SelectorItem> level2 = [];
      for (int j = 0; j < count; j++) {
        List<SelectorItem> level3 = [];
        for (int k = 0; k < count; k++) {
          List<SelectorItem> level4 = [];
          for (int m = 0; m < count; m++) {
            SelectorItem selectorItem = SelectorItem(id: '${m + 1}', name: '零售商${m + 1}');
            level4.add(selectorItem);
          }
          SelectorItem selectorItem = SelectorItem(
              id: '${k + 1}', name: '分销商${k + 1}', childList: level4);
          level3.add(selectorItem);
        }
        SelectorItem selectorItem = SelectorItem(
            id: '${j + 1}', name: '制造商${j + 1}', childList: level3);
        level2.add(selectorItem);
      }
      SelectorItem selectorItem =
          SelectorItem(id: '${i + 1}', name: '供应商${i + 1}', childList: level2);
      level1.add(selectorItem);
    }
    return level1;
  }

  List<SelectorItem> getMultipleChoiceData() {
    List data = [
      {'id': '1', 'name': 'Nike', 'describe': '创新运动品牌，注重性能与时尚'},
      {'id': '2', 'name': 'Adidas', 'describe': '三条纹标志，运动与休闲结合'},
      {'id': '3', 'name': 'Zara', 'describe': '快时尚，迅速跟进潮流'},
      {'id': '4', 'name': 'Gucci', 'describe': '奢华时尚，标志性双G'},
      {'id': '5', 'name': 'Prada', 'describe': '意大利奢华，前卫设计'},
      {'id': '6', 'name': 'Burberry', 'describe': '英伦经典，标志性格纹'},
      {'id': '7', 'name': 'Versace', 'describe': '大胆奢华设计，闪耀魅力'}
    ];

    List<SelectorItem> list = [
      SelectorItem(id: '', name: '全选', isCheck: false, isSupportSelectAll: true)
    ];
    for (int i = 0; i < data.length; i++) {
      Map map = data[i];
      list.add(SelectorItem(
          id: map['id'], name: map['name'], describe: map['describe']));
    }
    return list;
  }
}

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

1 回复

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


当然，下面是一个关于如何使用Flutter选择器插件flutter_selector的代码示例。flutter_selector插件可以帮助你在Flutter应用中创建一个自定义的选择器。假设你已经在pubspec.yaml文件中添加了依赖并运行了flutter pub get。

1. 添加依赖

首先，确保在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_selector: ^x.y.z  # 请使用最新版本号

2. 导入插件

在你的Dart文件中导入flutter_selector：

import 'package:flutter_selector/flutter_selector.dart';

3. 使用选择器

下面是一个简单的示例，展示如何在一个按钮点击事件中打开一个选择器，并处理选择的结果。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  String? selectedValue;

  void showSelector() async {
    final result = await FlutterSelector.showSelector(
      context: context,
      options: [
        {"value": "Option 1", "display": "Option 1"},
        {"value": "Option 2", "display": "Option 2"},
        {"value": "Option 3", "display": "Option 3"},
      ],
      selectedOption: selectedValue != null ? {"value": selectedValue!} : null,
      title: "Select an Option",
      onConfirm: (option) {
        setState(() {
          selectedValue = option["value"];
        });
      },
      onCancel: () {
        print("Selector Cancelled");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Selector Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedValue == null ? "No Option Selected" : "Selected: $selectedValue",
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showSelector,
              child: Text("Show Selector"),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖导入：确保你已经导入了flutter_selector包。
  2. UI构建：
    • MyApp类创建了一个MaterialApp实例，并将MyHomePage作为主页。
    • MyHomePage类是一个有状态的Widget，包含一个selectedValue状态变量，用于存储选择器的选中值。
  3. 选择器调用：
    • showSelector方法调用FlutterSelector.showSelector，传入上下文、选项、标题、确认和取消回调。
    • 选项是一个包含value和display字段的列表。
    • onConfirm回调在选项被确认时更新selectedValue。
    • onCancel回调在选择器被取消时打印一条消息。
  4. UI显示：
    • 在UI中，使用Text组件显示当前选中的值（或未选中的提示）。
    • 使用ElevatedButton组件触发选择器。

这个示例展示了如何使用flutter_selector插件来创建一个简单的选择器，并在用户进行选择后更新UI。你可以根据需求自定义选项、标题、确认和取消回调。

回到顶部