Flutter自定义下拉选择插件modular_customizable_dropdown的使用

Flutter自定义下拉选择插件modular_customizable_dropdown的使用

概述

modular_customizable_dropdown 是一个模块化且可定制的下拉菜单包，可以与任何小部件兼容。此下拉菜单不绑定特定的小部件，您可以将其附加到任何您能想到的小部件上。

（请忽略丑陋的颜色调色板，我只是想展示它可以实现渐变效果…）

注意事项（版本 >= 2.0.0）

从版本 2.0.0 开始，下拉菜单现在支持每个值的描述。

简要说明 (TL;DR)

将您希望附加下拉菜单的小部件包装在 ModularCustomizableDropdown 中即可。默认情况下，下拉菜单会直接出现在目标小部件的正下方。

ModularCustomizableDropdown.displayOnTap(
    target: const SizedBox(width: 100, child: Text("I'm the target widget")),
    onValueSelect: (DropdownValue _selectedVal) => debugPrint(_selectedVal.toString()),
    allDropdownValues: _values,
)

上述几行代码就足以让下拉菜单正常工作。当目标小部件被点击时，下拉菜单会直接出现在其下方。

下拉菜单接受类型为 DropdownValue 的值。该类包含以下三个属性：

1. value: 将在下拉菜单行中显示的标题。
2. description: 可选属性。这将在标题正下方渲染。标题和描述之间的间距可以通过 DropdownStyle 类进行自定义。
3. meta: 您希望与此值关联的任何其他数据。

// 查看完整文件 https://github.com/Khongchai/modular_customizable_dropdown/blob/main/lib/classes_and_enums/dropdown_value.dart
class DropdownValue {
  final String value;
  final String? description;
  final dynamic metadata;

  const DropdownValue({
    required this.value,
    this.description,
    this.metadata,
  });

  static fromListOfStrings(List<String> values) {
    return values.map((e) => DropdownValue(value: e)).toList();
  }
}

完整示例

以下是一个完整的示例，展示了如何使用 modular_customizable_dropdown 插件。

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('自定义下拉菜单示例'),
        ),
        body: Center(
          child: ExampleDropdown(),
        ),
      ),
    );
  }
}

class ExampleDropdown extends StatefulWidget {
  @override
  _ExampleDropdownState createState() => _ExampleDropdownState();
}

class _ExampleDropdownState extends State<ExampleDropdown> {
  final List<DropdownValue> _dropdownValues = [
    DropdownValue(value: "选项1", description: "这是选项1的描述"),
    DropdownValue(value: "选项2", description: "这是选项2的描述"),
    DropdownValue(value: "选项3", description: "这是选项3的描述"),
  ];

  String _selectedValue = "";

  void _onValueSelect(DropdownValue selectedValue) {
    setState(() {
      _selectedValue = selectedValue.value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ModularCustomizableDropdown.displayOnTap(
      target: Container(
        padding: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Text(_selectedValue.isNotEmpty ? _selectedValue : "请选择"),
      ),
      onValueSelect: _onValueSelect,
      allDropdownValues: _dropdownValues,
      style: const DropdownStyle(
        dropdownWidth: DropdownWidth(scale: 1.5), // 设置下拉菜单宽度为目标宽度的1.5倍
        dropdownMaxHeight: DropdownMaxHeight(byRows: 4), // 最大高度为4行
        dropdownAlignment: Alignment.topCenter, // 对齐方式为顶部居中
        defaultItemColor: Colors.grey[200], // 默认项背景颜色
        onTapItemColor: Colors.blue[100], // 点击项背景颜色
        transitionInDuration: Duration(milliseconds: 300), // 展开动画持续时间
      ),
    );
  }
}

自定义下拉菜单

通过 DropdownStyle 类可以配置下拉菜单的外观。以下是它的部分功能示例：

ModularCustomizableDropdown.displayOnTap(
    target: const SizedBox(width: 100, child: Text("I'm the target widget")),
    onValueSelect: (DropdownValue _selectedVal) => debugPrint(_selectedVal.toString()),
    allDropdownValues: _values,
    style: const DropdownStyle(
        dropdownWidth: DropdownWidth(scale: 1.2), // 下拉菜单宽度为目标宽度的1.2倍
        dropdownMaxHeight: DropdownMaxHeight(byRows: 4), // 最大高度为4行
        dropdownAlignment: Alignment.topLeft, // 对齐方式为左上角
        defaultItemColor: LinearGradient(colors: [Colors.white, Colors.blue]), // 默认项背景渐变
        onTapItemColor: LinearGradient(colors: [Colors.black, Colors.black]), // 点击项背景渐变
        transitionInDuration: Duration(milliseconds: 160), // 动画持续时间
    ),
)