Flutter下拉菜单插件mirai_dropdown_menu的使用

MiraiDevs

联系邮箱: contact@miraidevs.com

描述

MiraiDevs 开发了 Mirai Dropdown Menu 包。

特点

• 您可以设置一个静态对象列表或从API下载的对象列表。
• 可以搜索项目…

入门指南

首次查看：

安装

1. 在您的 pubspec.yaml 文件中添加 mirai_dropdown_menu 作为依赖项。

dependencies:
  mirai_dropdown_menu: <latest_version>

1. 导入 mirai_dropdown_menu 包。

import 'package:mirai_dropdown_menu/mirai_dropdown_menu.dart';

使用

创建 mirai_dropdown_widget.dart:

class MiraiDropdownWidget<String> extends StatelessWidget {
  const MiraiDropdownWidget({
    Key? key,
    required this.valueNotifier,
    required this.itemWidgetBuilder,
    required this.children,
    required this.onChanged,
    this.underline = false,
    this.showSeparator = true,
    this.exit = MiraiExit.fromAll,
    this.chevronDownColor,
    this.showMode = MiraiShowMode.bottom,
    this.maxHeight,
    this.showSearchTextField = false,
    this.showOtherAndItsTextField = false,
    this.other,
  }) : super(key: key);

  final ValueNotifier<String> valueNotifier;
  final MiraiDropdownBuilder<String> itemWidgetBuilder;
  final List<String> children;
  final ValueChanged<String> onChanged;
  final bool underline;
  final bool showSeparator;
  final MiraiExit exit;
  final Color? chevronDownColor;
  final MiraiShowMode showMode;
  final double? maxHeight;
  final bool showSearchTextField;
  final bool showOtherAndItsTextField;
  final Widget? other;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MiraiDropDownMenu<String>(
      key: UniqueKey(),
      enable: true,
      space: 4,
      showMode: showMode,
      exit: exit,
      showSeparator: showSeparator,
      children: children,
      itemWidgetBuilder: itemWidgetBuilder,
      onChanged: onChanged,
      maxHeight: maxHeight,
      showOtherAndItsTextField: showOtherAndItsTextField,
      showSearchTextField: showSearchTextField,
      other: other,
      child: Container(
        key: GlobalKey(),
        padding: const EdgeInsets.symmetric(
          horizontal: 14,
        ),
        decoration: BoxDecoration(
          borderRadius: underline ? null : BorderRadius.circular(5.0),
          border: underline
              ? const Border(
            bottom: BorderSide(
              width: 1.0,
              color: Colors.blueGrey,
            ),
          )
              : Border.all(
            color: Colors.blueGrey,
            width: 1.0,
          ),
        ),
        height: 40,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Flexible(
              child: ValueListenableBuilder<String>(
                valueListenable: valueNotifier,
                builder: (_, String chosenTitle, __) {
                  return AnimatedSwitcher(
                    duration: const Duration(milliseconds: 200),
                    child: Text(
                      '$chosenTitle',
                      key: ValueKey<String>(chosenTitle),
                      style: const TextStyle(
                        fontWeight: FontWeight.w600,
                      ),
                      overflow: TextOverflow.ellipsis,
                    ),
                  );
                },
              ),
            ),
            const SizedBox(width: 16),
            FaIcon(
              FontAwesomeIcons.chevronDown,
              color: chevronDownColor ?? AppTheme.keyAppColor,
              size: 12,
            ),
          ],
        ),
      ),
    );
  }
}

创建 mirai_dropdown_item_widget.dart:

class MiraiDropDownItemWidget extends StatelessWidget {
  const MiraiDropDownItemWidget({
    Key? key,
    required this.item,
    required this.isItemSelected,
  }) : super(key: key);

  final String item;
  final bool isItemSelected;
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        vertical: 10.0,
        horizontal: 16.0,
      ),
      child: Text(
        item,
        style: const TextStyle(
          color: isItemSelected ? Colors.white : Colors.black,
        ),
      ),
    );
  }
}

然后你可以这样使用 MiraiDropdownWidget:

MiraiDropdownWidget<String>(
  valueNotifier: valueNotifierFirst,
  itemWidgetBuilder: (int index, String? item, {
  bool isItemSelected = false,
}) {
    return MiraiDropDownItemWidget(item: item, isItemSelected: isItemSelected);
  },
  children: listOfItem,
  onChanged: (String value) {
  valueNotifierFirst.value = value;
  },
),

要显示搜索文本字段：

MiraiDropdownWidget<String>(
  valueNotifier: valueNotifierFirst,
  showSearchTextField: true,
  itemWidgetBuilder: (int index, String? item, {
  bool isItemSelected = false,
}) {
    return MiraiDropDownItemWidget(item: item);
  },
  children: listOfItem,
  onChanged: (String value) {
  valueNotifierFirst.value = value;
  },
),

请检查示例以获取更多信息

示例代码

支持

如果您觉得 MiraiDropDown 包符合您的需求，请支持该包。如果愿意，您可以为我买一杯咖啡。

对象列表

对象列表的一般搜索

在您的模型中添加 toString() 方法。 例如:

  [@override](/user/override)
  String toString() {
    return 'ProjectModel{number: $number, job: $job, name: $name, title: $title, date: $date, client: $client, progress: $progress, color: $color}';
  }