flutter实现下拉菜单组件

#flutter实现下拉菜单组件| 来源: 网络整理| 查看: 265

flutter实现下拉菜单组件——基于PopupMenuButton 精选原创

baorant24 2023-04-11 09:32:25 博主文章分类：flutter ©著作权

文章标签下拉菜单 flutter 文章分类 Android 移动开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者baorant24的原创作品，请联系作者获取转载授权，否则将追究法律责任问题背景

客户端日常开发和学习过程，下拉菜单是一个很常见的组件，本文主要介绍flutter中实现下拉菜单组件的一个方案，基于PopupMenuButton来进行实现。

问题分析

PopupMenuButton PopupMenuButton 是一个非常常见的弹出菜单栏。属性介绍：

问题解决

话不多说，直接上代码（1）新建MenuItem.dart通用菜单项类，代码如下：

/// author baorant /// 通用菜单项 class MenuItem { // 显示的文本 String label; // 选中的值 dynamic value; // 是否选中 bool checked; MenuItem({this.label = '', this.value, this.checked = false}); }

（2）实现SelectWidget.dart下拉菜单项组件，代码如下：

import 'package:flutter/material.dart'; import 'MenuItem.dart'; /// @author baorant /// @创建时间：2024/4/11 /// 下拉菜单按钮组件 class SelectWidget extends StatefulWidget { // 显示的菜单项 final List items; // 当前选中的值 final dynamic value; // 选择框前的标题 final String? title; // 提示语 final String tooltip; // 选中数据的回调事件 final ValueChanged? valueChanged; const SelectWidget( {Key? key, this.items = const [], this.value, this.valueChanged, this.title, this.tooltip = "点击选择"}) : super(key: key); @override State createState() => _SelectWidgetState(); } class _SelectWidgetState extends State { String label = '请选择'; // 是否展开下拉按钮 bool isExpand = false; // 当前的值 dynamic currentValue; @override void initState() { currentValue = widget.value; super.initState(); } /// 根据当前的value处理当前文本显示 void initTitle() { if (currentValue != null) { // 有值查值 for (MenuItem item in widget.items) { if (item.value == currentValue) { label = item.label; return; } } } // 没值默认取第一个 if (widget.items.isNotEmpty) { label = widget.items[0].label; } } @override Widget build(BuildContext context) { initTitle(); return Wrap( children: [ if (widget.title != null) Text(widget.title!, style: TextStyle(fontSize: 18)), PopupMenuButton( // initialValue: currentValue, tooltip: widget.tooltip, offset: Offset(25, 30), enableFeedback: true, child: Listener( // 使用listener事件能够继续传递 onPointerDown: (event) { setState(() { isExpand = !isExpand; }); }, child: Wrap( children: [ Text( label, style: TextStyle(fontSize: 18), ), isExpand ? const Icon(Icons.arrow_drop_up) : const Icon(Icons.arrow_drop_down) ], ), ), onSelected: (value) { widget.valueChanged?.call(value); setState(() { currentValue = value; isExpand = !isExpand; }); }, onCanceled: () { // 取消展开 setState(() { isExpand = false; }); }, itemBuilder: (context) { return widget.items .map( (item) => item.value == currentValue ? PopupMenuItem( value: item.value, child: Text( item.label, style: TextStyle( color: Theme.of(context).primaryColor), ), ) : PopupMenuItem( value: item.value, child: Text(item.label), ), ).toList(); }, ) ], ); } }

（3）测试代码如下：

import 'package:flutter/material.dart'; import '../../../components/select_menu/MenuItem.dart'; import '../../../components/select_menu/SelectWidget.dart'; import '../../../utils/custom_appbar.dart'; class Test extends StatefulWidget { _TestState createState() => _TestState(); } class _TestState extends State { String value = "1"; /// 下拉选择值改变 selectChange(value) { print("值改变了：$value"); } @override Widget build(BuildContext context) { return Scaffold( appBar: customAppbar( title: "下拉菜单演示", ), body: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ SelectWidget( items: [ MenuItem(label: "张飞", value: '1'), MenuItem(label: "关羽", value: '2'), MenuItem(label: "刘备", value: '3'), MenuItem(label: "亚瑟", value: '4'), MenuItem(label: "妲己", value: '5'), MenuItem(label: "兰陵王", value: '6'), ], value: value, valueChanged: selectChange, ), ], ), ); } }

（4）运行结果如下:

问题总结

本文主要介绍flutter中实现下拉菜单组件的一个方案，基于PopupMenuButton来进行实现，有兴趣的同学可以进一步深入研究。

赞收藏评论分享举报

上一篇：flutter实现下拉刷新和加载更多

下一篇：flutter实现下拉框功能——基于DropdownButtonFormField

【本文地址】

公司简介

联系我们