Flutter自定义下拉视图插件custom_dropdown_view的使用

在本教程中，我们将展示如何使用 custom_dropdown_view 插件来创建一个自定义的下拉视图。此插件可以帮助开发者轻松实现具有动画效果的下拉菜单，并支持高度定制化。

使用步骤

1. 添加依赖

首先，在您的 pubspec.yaml 文件中添加 custom_dropdown_view 依赖：

dependencies:
  custom_dropdown_view: ^版本号

然后运行以下命令以获取依赖项：

flutter pub get

2. 创建自定义下拉视图

接下来，我们将通过示例代码展示如何使用 CustomDropdownView 来创建一个自定义下拉视图。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义下拉选项列表
  final List<String> list = ["Brazil", "Italia", "Tunisia", 'Canada'];
  int indexSelected = -1; // 当前选中的索引
  bool isDropdownOpened = false; // 下拉视图是否打开
  bool isNeedCloseDropDown = false; // 是否需要关闭下拉视图

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 自定义下拉视图
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: CustomDropdownView(
                // 是否需要自动关闭下拉视图
                isNeedCloseDropdown: isNeedCloseDropDown,
                // 下拉视图阴影效果
                elevationShadow: 20,
                // 下拉视图装饰
                decorationDropdown: BoxDecoration(
                  borderRadius: BorderRadius.circular(8),
                ),
                // 默认显示的视图
                defaultWidget: Container(
                  height: 50,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(4),
                    color: Color(0xFFF0F1F3),
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  child: Row(
                    children: [
                      // 显示当前选中的选项或提示文本
                      Text(
                        indexSelected != -1 ? list[indexSelected] : "点击自定义下拉",
                        style: TextStyle(color: Color(0xFF969CA8), fontSize: 14, fontWeight: FontWeight.w500),
                      ),
                      Spacer(), // 空间填充器
                      // 显示箭头图标
                      Icon(
                        isDropdownOpened ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
                        color: Color(0xFF737579),
                      ),
                    ],
                  ),
                ),
                // 处理下拉视图的打开/关闭事件
                onTapDropdown: (bool _isDropdownOpened) async {
                  await Future.delayed(Duration.zero); // 延迟处理
                  setState(() {
                    isDropdownOpened = _isDropdownOpened; // 更新状态
                    if (_isDropdownOpened == false) isNeedCloseDropDown = false; // 如果关闭，则重置标志
                  });
                },
                // 下拉选项列表
                listWidgetItem: List.generate(list.length, (index) {
                  return GestureDetector(
                    onTap: () {
                      setState(() {
                        indexSelected = index; // 更新选中的索引
                        isNeedCloseDropDown = true; // 设置为需要关闭下拉视图
                      });
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.vertical(
                          top: index == 0 ? Radius.circular(4) : Radius.zero, // 上边角圆角
                          bottom: index == list.length - 1 ? Radius.circular(4) : Radius.zero, // 下边角圆角
                        ),
                        color: indexSelected == index ? Color(0xFFE8EFFF) : Colors.white, // 选中时背景颜色变化
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 16),
                      child: Column(
                        children: [
                          SizedBox(height: 10), // 空白间距
                          Text(
                            list[index], // 显示选项文本
                            style: TextStyle(color: Color(0xFF27292F), fontSize: 14, fontWeight: FontWeight.w800),
                          ),
                          SizedBox(height: 9), // 空白间距
                          // 分割线（最后一项不显示）
                          index == list.length - 1
                              ? Container()
                              : Divider(
                                  height: 1, // 分割线高度
                                  color: Color(0xFFEDEFF3), // 分割线颜色
                                ),
                        ],
                      ),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
    );
  }
}