Flutter下拉选择插件ks_select_dropdown的使用

Flutter下拉选择插件ks_select_dropdown的使用

安装

在 pubspec.yaml 文件中添加 ks_select_dropdown 依赖：

dependencies:
  ks_select_dropdown: ^0.0.4

导入包

在 Dart 文件中导入 ks_select_dropdown 包：

import 'package:ks_select_dropdown/ks_select_dropdown.dart';

示例

test_model.dart

创建一个模型类 TestModel，该类继承自 KSDropDownModel。根据你的需求，可以调整字段名称。

import 'package:ks_select_dropdown/models/ks_dropdown_model.dart';

///
/// [TestModel] 扩展 [KSDropDownModel]
/// 如果你的模型有不同字段名称，例如本示例中的描述字段
/// [TestModel] 的 description = [KSDropDownModel] 的 name，等等
///

class TestModel extends KSDropDownModel {

  String? description;
  String? descriptionEn;

  TestModel({
    id,
    this.description,
    this.descriptionEn
  }) : super(
    id: id,
    name: description,
    nameEn: descriptionEn,
  );

}

main.dart

在主文件中使用 KSSelectDropDownWidget 构建单选和多选下拉框。

import 'package:flutter/material.dart';
import 'package:ks_select_dropdown/ks_select_dropdown.dart';
import 'test_model.dart';

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

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

  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'KS Select DropDown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'KS Select DropDown Demo'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  final List<TestModel> _dropdownItems = [];

  List<TestModel> _selectedItems = [];

  [@override](/user/override)
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
      _dropdownItems.addAll(
        List.generate(10, (index) => TestModel(id: index+1, description: 'Item ${index+1}', descriptionEn: 'Item ${index+1}'))
      );
      setState(() {});
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            
            ///
            ///*  [单选下拉框]
            ///
            const Text('单选下拉框'),
            const SizedBox(height: 8),
            KSSelectDropDownWidget(
              items: _dropdownItems, ///* 下拉列表项
              selectedItems: _selectedItems, ///* 已选中的项
              // displayContentItem: (item) => yourLocalizeMethod(item), /// 基于您的本地化方法
              getSelectedItem: (selectedItems) {
                setState(() {
                  /// 获取已选中的项目
                  _selectedItems = selectedItems;
                });
              }, 
              label: '选择选项 ...',
              dropdownTitle: '单选选项',
              // ksDropDownContentModeEnum: KSDropDownContentModeEnum.wrap, /// 默认: KSDropDownContentModeEnum.list
              // showSearch: true, /// 默认: showSearch = false
            ),

            const SizedBox(height: 8),

            ///
            ///*  [多选下拉框]
            ///
            const Text('多选下拉框'),
            const SizedBox(height: 8),
            KSSelectDropDownWidget(
              items: _dropdownItems, ///* 下拉列表项
              selectedItems: _selectedItems, ///* 已选中的项
              // displayContentItem: (item) => yourLocalizeMethod(item), /// 基于您的本地化方法
              getSelectedItem: (selectedItems) {
                setState(() {
                  /// 获取已选中的项目
                  _selectedItems = selectedItems;
                });
              }, 
              label: '选择选项 ...',
              dropdownTitle: '多选选项',
              ksDropDownEnum: KSDropDownEnum.multiple,
              // ksDropDownContentModeEnum: KSDropDownContentModeEnum.wrap, /// 默认: KSDropDownContentModeEnum.list
              // showSearch: true, /// 默认: showSearch = false
            )
          ],
        ),
      ),
    );
  }

}