flutter实现下拉菜单组件——基于PopupMenuButton

问题背景

客户端日常开发和学习过程，下拉菜单是一个很常见的组件，本文主要介绍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来进行实现，有兴趣的同学可以进一步深入研究。

来源地址：https://blog.csdn.net/weixin_39033300/article/details/130456842