Flutter分类下拉菜单插件 `categorized_dropdown` 的使用

categorized_dropdown 是一个基于 Flutter 基础下拉菜单组件创建的分类下拉菜单插件。它允许开发者将选项分组并显示在下拉菜单中，提供更好的用户体验。

插件预览

Dropdown Field	Dropdown Items

开始使用

添加依赖

在项目根目录下运行以下命令来添加 categorized_dropdown 依赖：

$ flutter pub add categorized_dropdown

这将在您的 pubspec.yaml 文件中添加如下依赖，并自动执行 dart pub get：

dependencies:
  categorized_dropdown: ^1.0.0

您也可以手动编辑 pubspec.yaml 文件并添加上述依赖，然后运行 flutter pub get。

导入包

在 Dart 文件中导入 categorized_dropdown 包：

import 'package:categorized_dropdown/categorized_dropdown.dart';

示例代码

下面是一个完整的示例，展示了如何使用 CategorizedDropdown 组件：

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

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

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  final List<CategorizedDropdownItem<String>> items = [
    CategorizedDropdownItem(text: 'Exhaust', subItems: [
      SubCategorizedDropdownItem(text: 'Pipes', value: 'pipes'),
      SubCategorizedDropdownItem(text: 'Mufflers', value: 'mufflers'),
      SubCategorizedDropdownItem(text: 'Gaskets', value: 'gaskets'),
    ]),
    CategorizedDropdownItem(text: 'Engine Parts', subItems: [
      SubCategorizedDropdownItem(text: 'Engine mounts', value: 'engine-mounts'),
      SubCategorizedDropdownItem(text: 'Oil Filters', value: 'oil-filters'),
    ]),
    CategorizedDropdownItem(text: 'Fuel & Emission', subItems: [
      SubCategorizedDropdownItem(text: 'Fuel Injection', value: 'fuel-injection'),
      SubCategorizedDropdownItem(text: 'O2 Sensor', value: 'o2-sensor'),
    ]),
    CategorizedDropdownItem(text: 'Other', value: 'Other'),
  ];

  String? value;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Categorized Dropdown Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Categorized Dropdown')),
        body: ListView(
          padding: const EdgeInsets.all(24),
          children: [
            CategorizedDropdown(
              items: items,
              value: value,
              hint: const Text('Select auto parts'),
              onChanged: (v) {
                setState(() {
                  value = v;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键点说明

items: 定义了下拉菜单中的分类及其子项。
value: 当前选中的值。
hint: 下拉菜单未选择时的提示文本。
onChanged: 当用户选择一个新值时触发的回调函数。

请注意，在 onChanged 回调中应更新 value 变量为传入的新值 v，而不是保持不变。

贡献

任何类型的贡献都是受欢迎的！请随意 fork 并以任何方式改进该项目，提交 pull request 或者打开 issue。

更多关于Flutter分类下拉菜单插件categorized_dropdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•8 小时前

更多关于Flutter分类下拉菜单插件categorized_dropdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用categorized_dropdown插件来实现分类下拉菜单的示例代码。这个插件允许你将下拉菜单项按类别进行分组，从而提高用户体验。

首先，确保你已经在pubspec.yaml文件中添加了categorized_dropdown依赖：

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

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

接下来，你可以在你的Flutter应用中使用CategorizedDropdown组件。以下是一个完整的示例：

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

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

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

class CategorizedDropdownDemo extends StatefulWidget {
  @override
  _CategorizedDropdownDemoState createState() => _CategorizedDropdownDemoState();
}

class _CategorizedDropdownDemoState extends State<CategorizedDropdownDemo> {
  String? selectedValue;

  final List<CategorizedItem> categorizedItems = [
    CategorizedItem(
      title: 'Fruits',
      items: [
        DropdownMenuItem(value: 'apple', child: Text('Apple')),
        DropdownMenuItem(value: 'banana', child: Text('Banana')),
        DropdownMenuItem(value: 'cherry', child: Text('Cherry')),
      ],
    ),
    CategorizedItem(
      title: 'Vegetables',
      items: [
        DropdownMenuItem(value: 'carrot', child: Text('Carrot')),
        DropdownMenuItem(value: 'lettuce', child: Text('Lettuce')),
        DropdownMenuItem(value: 'spinach', child: Text('Spinach')),
      ],
    ),
    CategorizedItem(
      title: 'Dairy',
      items: [
        DropdownMenuItem(value: 'milk', child: Text('Milk')),
        DropdownMenuItem(value: 'cheese', child: Text('Cheese')),
        DropdownMenuItem(value: 'yogurt', child: Text('Yogurt')),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Categorized Dropdown Example'),
      ),
      body: Center(
        child: CategorizedDropdown<String>(
          items: categorizedItems,
          initialValue: selectedValue,
          hint: Text('Select an item'),
          onChanged: (value) {
            setState(() {
              selectedValue = value;
            });
          },
        ),
      ),
    );
  }
}

在这个示例中：

我们定义了一个CategorizedItem列表，每个CategorizedItem包含一个标题和一个DropdownMenuItem列表。
CategorizedDropdown组件接受这些CategorizedItem作为输入，并显示一个分类下拉菜单。
每当用户选择一个项目时，onChanged回调会被触发，并更新selectedValue状态。

这个示例展示了如何使用categorized_dropdown插件来创建一个具有分类功能的下拉菜单，从而增强用户界面的可用性和美观度。

Flutter分类下拉菜单插件categorized_dropdown的使用

Flutter分类下拉菜单插件 categorized_dropdown 的使用