一个 Flutter material DropdownButton Plus 包。

开始使用？

将以下内容添加到你的 pubspec.yaml

dependencies:
  dropdown_button_plus: 0.0.2

导入

import 'package:dropdown_button_plus/dropdown_plus.dart' as plus;

基础

与 Flutter SDK 的 DropdownButton 用法相同。

plus.DropdownView<String>(
  items: filters,
  itemPadding: EdgeInsets.zero,
  itemBuilder: (_, index, select) => ItemMenuString(
    label: filters[index],
    select: select,
    showIndicator: false,
    mainAxisAlignment: MainAxisAlignment.center,
  ),
  selectedItemBuilder: (_, index, select) => ItemMenuHeader(
    label: filters[index],
    select: select,
  ),
  hintBuilder: (context, focus) => hintWidgetBuilder(
    context,
    focus,
    'Dropdown',
  ),
),

basic

Plus 固定

plus.DropdownView<String>(
  isDropdown: true,
  items: filters,
  itemPadding: EdgeInsets.zero,
  itemBuilder: (_, index, select) => ItemMenuString(
    label: filterStatus[index],
    select: select,
    showIndicator: false,
    mainAxisAlignment: MainAxisAlignment.center,
  ),
  selectedItemBuilder: (_, index, select) => ItemMenuHeader(
    label: filters[index],
    select: select,
  ),
  hintBuilder: (context, focus) => hintWidgetBuilder(
    context,
    focus,
    'Pinned',
  ),
),

pinned

Plus：带有阴影的按钮上的下拉菜单。

plus.DropdownView<String>(
  onChanged: widget.onType,
  forceWidth: true,
  isDropdown: true,
  isOutsideShadow: true,
  isPinnedSelected: false,
  items: filters,
  itemBuilder: (_, index, select) => ItemMenuString(
    label: filters[index],
    select: select,
  ),
  selectedItemBuilder: (_, index, select) => ItemMenuHeader(
    label: '综合排序',
    select: select,
  ),
  hintBuilder: (context, focus) => hintWidgetBuilder(
    context,
    focus,
    '综合排序',
  ),
),

plus_basic

2.自定义

SizedBox(
  height: kMinInteractiveDimension,
  child: DropdownView<String>(
    forceWidth: true,
    isDropdown: true,
    isOutsideShadow: true,
    isPinnedSelected: false,
    itemPadding: EdgeInsets.zero,
    itemHeight: MediaQuery.of(context).size.height / 2,
    items: const [''],
    itemBuilder: (_, index, select) => ItemMenuOption(
      onChanged: widget.onOption,
    ),
    selectedItemBuilder: (_, index, select) => ItemMenuHeader(
      label: '对账单',
      select: select,
    ),
    hintBuilder: (context, focus) => hintWidgetBuilder(
      context,
      focus,
      '对账单',
      padding: const EdgeInsets.only(top: kMinInteractiveDimension / 8),
    ),
  ),
),

plus_custom

GitHub

查看 Github