Flutter下拉菜单插件fdropdown的使用

Flutter下拉菜单插件fdropdown的使用

fdropdown 是一个可定制的 Flutter 下拉菜单 UI 插件。本文将通过一个完整的示例来展示如何在 Flutter 应用中使用 fdropdown。

准备工作

首先，确保你已经在项目中添加了 fdropdown 依赖。你可以在 pubspec.yaml 文件中添加以下内容：

dependencies:
  fdropdown: ^版本号

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

步骤一：初始化关键组件

我们需要创建一个全局的 GlobalKey 对象，并将其与应用栏 (AppBar) 关联起来。

final GlobalKey selectAreaKey = GlobalKey();

步骤二：关联到目标组件

在 Scaffold 中设置 AppBar 的 key 属性为上面创建的 GlobalKey。

appBar: AppBar(
  key: selectAreaKey,
  backgroundColor: Colors.blue,
  title: const Text('自定义下拉菜单'),
),

步骤三：展示常用菜单

使用 FDropdown.instance.show 方法来展示常用的下拉菜单。

FDropdown.instance.show(
  distWidgetKey: selectAreaKey,
  allMarginTop: 2,
  allMarginRight: 2,
  child: ListView(
    padding: EdgeInsets.only(),
    shrinkWrap: true,
    children: items.map((e) => Container(
      height: 30,
      alignment: Alignment.center,
      color: Colors.amber,
      margin: EdgeInsets.only(
        bottom: 1
      ),
      child: Text(e),
    )).toList(),
  )
)

步骤四：展示自定义自适应菜单

如果你想展示一个自定义且自适应的下拉菜单，可以调整一些参数，例如背景颜色、对齐方式等。

FDropdown.instance.show(
  distWidgetKey: selectAreaKey,
  allMarginTop: 0,
  isSelfExpand: true,
  align: OverlayAlign.CENTER,
  allBgColor: Color(0x3f000000),
  child: ListView(
    padding: EdgeInsets.only(),
    shrinkWrap: true,
    children: items.map((e) => Container(
      height: 30,
      alignment: Alignment.centerLeft,
      color: Colors.amber,
      margin: EdgeInsets.only(
          bottom: 1
      ),
      child: Text(e),
    )).toList(),
  )
)

完整示例代码

下面是完整的示例代码，展示了如何在 Flutter 应用中使用 fdropdown 插件。

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 目标组件key，必须用到
  final GlobalKey selectAreaKey = GlobalKey();

  // 数据列表
  List<String> items = [
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'
  ];

  [@override](/user/override)
  void dispose() {
    FDropdown.instance.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: false
      ),
      home: Scaffold(
        appBar: AppBar(
          key: selectAreaKey,
          backgroundColor: Colors.blue,
          title: const Text('自定义下拉菜单'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MaterialButton(
                onPressed: () =>
                  FDropdown.instance.show(
                    distWidgetKey: selectAreaKey,
                    allMarginTop: 2,
                    allMarginRight: 2,
                    child: ListView(
                      padding: EdgeInsets.only(),
                      shrinkWrap: true,
                      children: items.map((e) => Container(
                        height: 30,
                        alignment: Alignment.center,
                        color: Colors.amber,
                        margin: EdgeInsets.only(
                          bottom: 1
                        ),
                        child: Text(e),
                      )).toList(),
                    )
                  ),
                color: Colors.blue,
                textColor: Colors.white,
                child: Text(
                  '展示常用菜单'
                ),
              ),
              SizedBox(height: 20,),
              MaterialButton(
                onPressed: () =>
                  FDropdown.instance.show(
                    distWidgetKey: selectAreaKey,
                    allMarginTop: 0,
                    isSelfExpand: true,
                    align: OverlayAlign.CENTER,
                    allBgColor: Color(0x3f000000),
                    child: ListView(
                      padding: EdgeInsets.only(),
                      shrinkWrap: true,
                      children: items.map((e) => Container(
                        height: 30,
                        alignment: Alignment.centerLeft,
                        color: Colors.amber,
                        margin: EdgeInsets.only(
                            bottom: 1
                        ),
                        child: Text(e),
                      )).toList(),
                    )
                  ),
                color: Colors.blue,
                textColor: Colors.white,
                child: Text(
                  '展示自适应菜单'
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}