Flutter下拉选择按钮插件dropdown_button_plus的使用

Flutter下拉选择按钮插件dropdown_button_plus的使用

Getting started 🍺:

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  dropdown_button_plus: any

import

导入插件包：

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

Basic:

使用方式与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], // 当前选中项的标签
  ),
),

Plus :

1. 下拉按钮带阴影

plus.DropdownView<String>(
  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, // 是否选中
  ),
),

效果展示：

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, // 是否选中
    ),
  ),
),

效果展示：

完整示例代码

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

import 'dart:developer';

import 'package:dropdown_button_plus/dropdown_plus.dart' as plus;
import 'package:example/constants.dart';
import 'package:example/widget/dropdown.dart';
import 'package:flutter/material.dart';

import 'widget/menu.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 Demo',
      theme: ThemeData(
        platform: TargetPlatform.iOS,
        primarySwatch: Colors.green,
        backgroundColor: Colors.white,
        scaffoldBackgroundColor: const Color(0xF5F5F5F5),
      ),
      home: const DropdownPage(title: 'DropdownButton Plus'),
    );
  }
}

/// Plus: [DropdownPlusView]
/// Flutter SDK Material : [DropdownButton]
class DropdownPage extends StatefulWidget {
  const DropdownPage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<DropdownPage> createState() => _DropdownPageState();
}

class _DropdownPageState extends State<DropdownPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title), elevation: 0),
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            /// Basic Flutter SDK Material DropdownButton
            const Padding(
              padding: EdgeInsets.all(16),
              child: Text(
                'Basic: DropdownButton',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ),

            Material(
              color: Theme.of(context).backgroundColor,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  plus.DropdownView<String>(
                    items: filterSort, // 下拉选项列表
                    itemPadding: EdgeInsets.zero, // 设置项内边距为零
                    itemBuilder: (_, index, select) => ItemMenuString(
                      label: filterSort[index], // 每个选项的标签
                      select: select, // 是否选中
                      showIndicator: false, // 不显示指示器
                      mainAxisAlignment: MainAxisAlignment.center, // 主轴居中对齐
                    ),
                    selectedItemBuilder: (_, index, select) => ItemMenuHeader(
                      label: filterSort[index], // 当前选中项的标签
                      select: select, // 是否选中
                    ),
                    hintBuilder: (context, focus) => hintWidgetBuilder(
                      context,
                      focus,
                      'Dropdown',
                    ),
                  ),
                  plus.DropdownView<String>(
                    isDropdown: true, // 是否为下拉模式
                    items: filterStatus, // 下拉选项列表
                    itemPadding: EdgeInsets.zero, // 设置项内边距为零
                    itemBuilder: (_, index, select) => ItemMenuString(
                      label: filterStatus[index], // 每个选项的标签
                      select: select, // 是否选中
                      showIndicator: false, // 不显示指示器
                      mainAxisAlignment: MainAxisAlignment.center, // 主轴居中对齐
                    ),
                    selectedItemBuilder: (_, index, select) => ItemMenuHeader(
                      label: filterStatus[index], // 当前选中项的标签
                      select: select, // 是否选中
                    ),
                    hintBuilder: (context, focus) => hintWidgetBuilder(
                      context,
                      focus,
                      'Pinned',
                    ),
                  ),
                ],
              ),
            ),

            /// Plus
            const Padding(
              padding: EdgeInsets.all(16),
              child: Text(
                'Plus:',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ),
            DropdownPlusView(
              onType: _onType,
              onOption: _onOption,
              onStatus: _onStatus,
            ),
          ],
        ),
      ),
    );
  }

  void _onType(value) {
    log('$value');
  }

  void _onStatus(value) async {
    log('$value');
  }

  void _onOption(value) {
    log('$value');
  }
}