Flutter下拉菜单插件jd_dropdown_menu_widget的使用

Flutter下拉菜单插件jd_dropdown_menu_widget的使用

一个简单的下拉菜单，支持任意widget。

将JDDropdownMenuWidget放置到任意位置即可。

开始使用

1. 在pubspec.yaml文件中添加依赖

jd_dropdowm_menu_widget: any

2. 安装依赖

在终端运行以下命令：

flutter pub get

3. 导入包

在需要使用该插件的文件中导入：

import 'package:jd_dropdowm_menu_widget/jd_dropdowm_menu_widget.dart';

4. 使用插件

在需要显示下拉菜单的地方使用JDDropdownMenuWidget，并设置相应的参数。例如：

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, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String title1 = '城市';
  String title2 = '品牌';
  GlobalKey _key1 = GlobalKey();

  JDDropdownMenuController controller = JDDropdownMenuController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          TextButton(
              key: _key1,
              onPressed: () {
                RenderBox renderBox = _key1.currentContext.findRenderObject();
                Rect position = renderBox.localToGlobal(Offset.zero) & renderBox.size;
                showDropdownMenu(
                  position: position,
                  context: context,
                  pageBuilder: (c1) => Container(
                    color: Colors.orange,
                  ),
                );
              },
              child: Text(
                '下拉菜单',
                style: TextStyle(
                  color: Colors.white,
                ),
              ))
        ],
      ),
      body: Column(
        children: [
          Container(
            margin: EdgeInsets.only(
              top: 10,
            ),
            child: JDDropdownMenuWidget(
              controller: controller,
              itemStyle: JDDropdownMenuWidgetStyle.style2,
              click: (int index) {
                print('$index');
              },
              items: [
                JDDropdownMenuItem(
                  maxHeight: 300,
                  title: Container(
                    alignment: Alignment.topCenter,
                    margin: EdgeInsets.only(
                      left: 10,
                      right: 10,
                    ),
                    child: Text(title1),
                  ),
                  menu: CityWidget(
                    click: (String selectedValue) {
                      setState(() {
                        title1 = selectedValue;
                        controller.hide();
                      });
                      print('选择的城市为:$selectedValue');
                    },
                  ),
                ),
                JDDropdownMenuItem(
                  maxHeight: 300,
                  title: Container(
                    alignment: Alignment.topCenter,
                    margin: EdgeInsets.only(
                      left: 10,
                      right: 10,
                    ),
                    child: Text(title2),
                  ),
                  menu: MenuListWidget(
                    selectedValue: title2,
                    click: (String value) {
                      setState(() {
                        title2 = value;
                        controller.hide();
                      });
                    },
                  ),
                ),
                JDDropdownMenuItem(
                  title: Container(
                    alignment: Alignment.topCenter,
                    margin: EdgeInsets.only(
                      left: 10,
                      right: 10,
                    ),
                    child: Text('菜单3'),
                  ),
                  menu: Container(
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),
          Container(
            child: Builder(
              builder: (c) {
                return TextButton(
                    onPressed: () {
                      RenderBox renderBox = c.findRenderObject();
                      Rect position = renderBox.localToGlobal(Offset.zero) & renderBox.size;
                      showDropdownMenu(
                        position: position,
                        context: c,
                        pageBuilder: (c1) => Container(
                          color: Color(0xffff0000),
                        ),
                      );
                    },
                    child: Text('Menu1'));
              },
            ),
          ),
          Container(
            child: Builder(
              builder: (c) {
                return TextButton(
                    onPressed: () {
                      showPop(
                        backgroundColor: Colors.red,
                        barrierColor: const Color(0x00000000),
                        context: c,
                        items: [
                          Text(
                            '个人信息',
                            style: TextStyle(color: Colors.white, fontSize: 14),
                          ),
                          Text(
                            '退出',
                            style: TextStyle(color: Colors.white, fontSize: 14),
                          ),
                        ],
                      );
                    },
                    child: Text('Menu2'));
              },
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter下拉菜单插件jd_dropdown_menu_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter下拉菜单插件jd_dropdown_menu_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


jd_dropdown_menu_widget 是一个用于 Flutter 的下拉菜单插件，提供了一种简单的方式来创建类似淘宝、京东等电商应用中常见的筛选菜单。它支持多级菜单、自定义样式和事件处理等功能。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  jd_dropdown_menu_widget: ^1.0.0  # 请使用最新版本

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

基本用法

以下是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JD Dropdown Menu Example'),
        ),
        body: DropdownMenuExample(),
      ),
    );
  }
}

class DropdownMenuExample extends StatefulWidget {
  @override
  _DropdownMenuExampleState createState() => _DropdownMenuExampleState();
}

class _DropdownMenuExampleState extends State<DropdownMenuExample> {
  final List<String> _categories = ['Category 1', 'Category 2', 'Category 3'];
  final List<String> _sorts = ['Sort 1', 'Sort 2', 'Sort 3'];
  final List<String> _filters = ['Filter 1', 'Filter 2', 'Filter 3'];

  String _selectedCategory = 'Category 1';
  String _selectedSort = 'Sort 1';
  String _selectedFilter = 'Filter 1';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        JDDropdownMenu(
          menus: [
            JDDropdownMenuData(
              title: 'Category',
              items: _categories,
              onSelected: (value) {
                setState(() {
                  _selectedCategory = value;
                });
              },
            ),
            JDDropdownMenuData(
              title: 'Sort',
              items: _sorts,
              onSelected: (value) {
                setState(() {
                  _selectedSort = value;
                });
              },
            ),
            JDDropdownMenuData(
              title: 'Filter',
              items: _filters,
              onSelected: (value) {
                setState(() {
                  _selectedFilter = value;
                });
              },
            ),
          ],
        ),
        Expanded(
          child: Center(
            child: Text(
              'Selected Category: $_selectedCategory\n'
              'Selected Sort: $_selectedSort\n'
              'Selected Filter: $_selectedFilter',
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ],
    );
  }
}

参数说明

  • menus: 一个 List<JDDropdownMenuData>，用于定义下拉菜单的每一项。
    • title: 菜单项的标题。
    • items: 菜单项的可选项列表。
    • onSelected: 当用户选择一个选项时触发的回调函数。

自定义样式

你可以通过 JDDropdownMenu 的 style 参数来自定义菜单的样式，例如背景颜色、文本样式等。

JDDropdownMenu(
  style: JDDropdownMenuStyle(
    backgroundColor: Colors.white,
    titleTextStyle: TextStyle(color: Colors.black),
    itemTextStyle: TextStyle(color: Colors.grey),
  ),
  menus: [
    // Your menu items here
  ],
)
回到顶部