Flutter自定义下拉选择框dropDownMenu

利用PopupMenuButton和PopupMenuItem写了个下拉选择框，之所以不采用系统的，是因为自定义的更能适配项目需求，话不多说，直接看效果

请添加图片描述

下面直接贴出代码、代码中注释写的都很清楚，使用起来应该很方便，如果有任何问题，欢迎下方留言…
import 'package:flutter/material.dart';class DropMenuWidget extends StatefulWidget {final List<Map<String, dynamic>> data; //数据final Function(String value) selectCallBack; //选中之后回调函数final String? selectedValue; //默认选中的值final Widget? leading; //前面的widget，一般是titlefinal Widget trailing; //尾部widget，一般是自定义图片final Color? textColor;final Offset offset; //下拉框向下偏移量--手动调整间距---防止下拉框遮盖住显示的widgetfinal TextStyle normalTextStyle; //下拉框的文字样式final TextStyle selectTextStyle; //下拉框选中的文字样式final double maxHeight; //下拉框的最大高度final double maxWidth; //下拉框的最大宽度final Color? backGroundColor; //下拉框背景颜色final bool animation; //是否显示动画---尾部图片动画final int duration; //动画时长const DropMenuWidget({super.key,this.leading,required this.data,required this.selectCallBack,this.selectedValue,this.trailing = const Icon(Icons.arrow_drop_down),this.textColor = Colors.white,this.offset = const Offset(0, 30),this.normalTextStyle = const TextStyle(color: Colors.white,fontSize: 12.0,),this.selectTextStyle = const TextStyle(color: Colors.red,fontSize: 12.0,),this.maxHeight = 200.0,this.maxWidth = 200.0,this.backGroundColor = const Color.fromRGBO(28, 34, 47, 1),this.animation = true,this.duration = 200,});@overrideState<DropMenuWidget> createState() => _DropMenuWidgetState();
}class _DropMenuWidgetState extends State<DropMenuWidget>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation<double> _animation;String _selectedLabel = '';String _currentValue = '';// 是否展开下拉按钮bool _isExpand = false;@overridevoid initState() {super.initState();_currentValue = widget.selectedValue ?? '';if (widget.animation) {_animationController = AnimationController(vsync: this,duration: Duration(milliseconds: widget.duration),);_animation = Tween(begin: 0.0, end: 0.5).animate(CurvedAnimation(parent: _animationController,curve: Curves.easeInOut,),);}}@overridevoid dispose() {_animationController.dispose();super.dispose();}_toggleExpand() {setState(() {if (_isExpand) {_animationController.forward();} else {_animationController.reverse();}});}//根据传值处理显示的文字_initLabel() {if (_currentValue.isNotEmpty) {_selectedLabel = widget.data.firstWhere((item) => item['value'] == _currentValue)['label'];} else if (widget.data.isNotEmpty) {// 没值默认取第一个_selectedLabel = widget.data[0]['label'];_currentValue = widget.data[0]['value'];}}@overrideWidget build(BuildContext context) {_initLabel();return PopupMenuButton(constraints: BoxConstraints(maxHeight: widget.maxHeight,maxWidth: widget.maxWidth,),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0),),offset: widget.offset,color: widget.backGroundColor,onOpened: () {if (widget.animation) {setState(() {_isExpand = true;_toggleExpand();});}},onCanceled: () {if (widget.animation) {setState(() {_isExpand = false;_toggleExpand();});}},child: Container(alignment: Alignment.centerLeft,height: 40,child: FittedBox(//使用FittedBox是为了适配当字符串长度超过指定宽度的时候，会让字体自动缩小child: Row(children: [if (widget.leading != null) widget.leading!,Text(_selectedLabel,style: TextStyle(color: widget.textColor,fontSize: 14.0,),),if (widget.animation)AnimatedBuilder(animation: _animation,builder: (context, child) {return Transform.rotate(angle: _animation.value * 2.0 * 3.14, // 180度对应的弧度值child: widget.trailing,);},),if (!widget.animation) widget.trailing,],),),),itemBuilder: (context) {return widget.data.map((e) {return PopupMenuItem(child: Text(e['label'],style: e['value'] == _currentValue? widget.selectTextStyle: widget.normalTextStyle,),onTap: () {setState(() {_currentValue = e['value'];widget.selectCallBack(e['value']);});},);}).toList();},);}
}
使用
Container(color: Colors.grey,width: 130,alignment: Alignment.centerLeft,child: DropMenuWidget(leading: const Padding(padding: EdgeInsets.only(right: 10),child: Text('当前选中:'),),data: const [{'label': '华为', 'value': '1'},{'label': '小米', 'value': '2'},{'label': 'Apple', 'value': '3'},{'label': '乔布斯', 'value': '4'},{'label': '啦啦啦啦啦', 'value': '5'},{'label': '呵呵', 'value': '7'},{'label': '乐呵乐呵', 'value': '7'},],selectCallBack: (value) {print('选中的value是：$value');},offset: const Offset(0, 40),selectedValue: '3', //默认选中第三个),)

简书地址如果喜欢，希望给个star😄😄

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/211083.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C : DS静态查找之顺序索引查找

C : DS静态查找之顺序索引查找

Description 给出一个队列和要查找的数值&#xff0c;找出数值在队列中的位置&#xff0c;队列位置从1开始 要求使用顺序索引查找算法&#xff0c;其中索引表查找和块内查找都采用不带哨兵、从头开始的顺序查找方法。 Input 第一行输入n&#xff0c;表示主表有n个数据 第二…
阅读更多...
OpenSSL 编程指南

OpenSSL 编程指南

目录 前言初始化SSL库创建SSL 上下文接口(SSL_CTX)安装证书和私钥加载证书(客户端/服务端证书)加载私钥/公钥加载CA证书设置对端证书验证例1 SSL服务端安装证书例2 客户端安装证书创建和安装SSL结构建立TCP/IP连接客户端创建socket服务端创建连接创建SSL结构中的BIOSSL握手服务…
阅读更多...
Scrum

Scrum

Scrum是一个用于开发和维持复杂产品的框架&#xff0c;是一个增量的、迭代的开发过程。在这个框架中&#xff0c;整个开发过程由若干个短的迭代周期组成&#xff0c;一个短的迭代周期称为一个Sprint&#xff0c;每个Sprint的建议长度是2到4周(互联网产品研发可以使用1周的Sprin…
阅读更多...
【Linux】输出缓冲区和fflush刷新缓冲区

【Linux】输出缓冲区和fflush刷新缓冲区

目录 一、输出缓冲区 1.1 输出缓冲区的使用 1.2 缓冲区的刷新 1.3 输出缓冲区的作用 二、回车换行 一、输出缓冲区 C/C语言&#xff0c;当调用输出函数&#xff08;如printf()、puts()、fwrite()等&#xff09;时&#xff0c;会给我们提供默认的缓冲区。这些数据先存…
阅读更多...
虚拟机安装 hyper—v 沙盒

虚拟机安装 hyper—v 沙盒

一、下载系统镜像 1、确认电脑内存在8G及以上并提前准备完整的系统镜像 安装Hyper-V并重启电脑后打开程序选择虚拟机 选择安装位置并设置保留第一代的虚拟参数即可开始分配内存&#xff0c;根据自己的需求进行设置 右键虚拟机启动并开始运行&#xff0c;进行镜像系统的安装便完…
阅读更多...
【Flutter】创建应用顶级组件，应用根组件 (学习记录)

【Flutter】创建应用顶级组件，应用根组件 (学习记录)

前言 在 Flutter 中&#xff0c;应用的顶级组件或根组件通常是在 main() 函数中通过 runApp() 方法创建的。这个组件通常是一个 MaterialApp、CupertinoApp、GetMaterialApp 或其他类似的应用框架组件。 以下是一个创建 MaterialApp 作为根组件的示例&#xff1a; void main()…
阅读更多...
牛客算法心得——环形数组的连续子数组最大和（dp）

牛客算法心得——环形数组的连续子数组最大和（dp）

大家好&#xff0c;我是晴天学长&#xff0c; 一个找连续子数组最大和的变形题&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .环形数组的连续子数组的最大和 描述 给定一个长度为 nn 的环形整数数组&…
阅读更多...
『 MySQL数据库 』聚合统计

『 MySQL数据库 』聚合统计

文章目录 前言 &#x1f951;&#x1f95d; 聚合函数&#x1f353; COUNT( ) 查询数据数量&#x1f353; SUM( ) 查询数据总和&#x1f353; AVG( ) 查询数据平均值&#x1f353; MAX( ) 查询数据最大值&#x1f353; MIN( ) 查询数据最小值 &#x1f95d; 数据分组GROUP BY子句…
阅读更多...
湖科大计网：计算机网络概述

湖科大计网：计算机网络概述

一、计算机网络的性能指标 一、速率 有时候数据量也认为是以10为底的&#xff0c;看怎么好算。&#xff08;具体吉大考试用什么待商榷&#xff09; 二、带宽 在模拟信号系统中带宽的含义&#xff0c;本课程中用到的地方是&#xff1a;香农定理和奈奎斯特定理公式的应用之中。 …
阅读更多...
全面高压化与全面超快充，破解新能源汽车的时代难题

全面高压化与全面超快充，破解新能源汽车的时代难题

是什么让新能源车主感到疲惫与焦虑&#xff1f;是什么阻挡更多消费者选择新能源汽车&#xff1f;我们在身边进行一个简单的调查就会发现&#xff0c;问题的答案非常一致&#xff1a;充电。 充电难&#xff0c;充电慢的难题&#xff0c;始终是困扰新能源汽车产业发展&#xff0c…
阅读更多...
vue，uniapp的pdf等文件在线预览

vue，uniapp的pdf等文件在线预览

vue&#xff0c;uniapp文件在线预览方案&#xff0c;用了个稍微偏门一点的方法实现了 通过后端生成文件查看页面&#xff0c;然后前端只要展示这个网页就行&#xff0c;uniapp就用web-view来展示&#xff0c;后台系统就直接window.open()打开就行 示例查看PDF文件&#xff0c;…
阅读更多...
每日一练【四数之和】

每日一练【四数之和】

一、题目描述 18. 四数之和 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#x…
阅读更多...
基于ssm社区管理与服务的设计与实现论文

基于ssm社区管理与服务的设计与实现论文

目录 摘 要 1 Abstract 2 第一章 绪论 3 1.1研究背景 3 1.2 研究现状 3 1.3 研究内容 4 第二章 系统关键技术 5 2.1 Java简介 5 2.2 MySql数据库 5 2.3 B/S结构 6 2.4 Tomcat服务器 6 第三章 系统分析 7 3.1可行性分析 7 3.1.1技术可行性 7 3.1.2经济可行性 7 3.1.3运行可行性…
阅读更多...
uniapp自定义的日历（纯手写）

uniapp自定义的日历（纯手写）

效果图&#xff1a; html&#xff1a; <!-- 年月 --><view class"box"><view class"box_time"><view class"time"><image click"lefts" :src"url/uploads/20231206/9d1fb520b12383960dca3c214d84fa0…
阅读更多...
vue获取主机id和IP地址

vue获取主机id和IP地址

获取主机id和IP地址 在vue.config.js const os require(“os”); function getNetworkIp() { let needHost “”; // 打开的host try { // 获得网络接口列表 let network os.networkInterfaces(); for (let dev in network) { let iface network[dev]; for (let i 0; i …
阅读更多...
LLM之Agent（五）| AgentTuning：清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

LLM之Agent（五）| AgentTuning：清华大学与智谱AI提出AgentTuning提高大语言模型Agent能力

​论文地址&#xff1a;https://arxiv.org/pdf/2310.12823.pdf Github地址&#xff1a;https://github.com/THUDM/AgentTuning 在ChatGPT带来了大模型的蓬勃发展&#xff0c;开源LLM层出不穷&#xff0c;虽然这些开源的LLM在各自任务中表现出色&#xff0c;但是在真实环境下作…
阅读更多...
【Android】Glide的简单使用（下）

【Android】Glide的简单使用（下）

文章目录 缓存设置内存缓存硬盘缓存自定义磁盘缓存行为图片请求优先级缩略图旋转图片Glide的回调:TargetsBaseTargetTarget注意事项设置具体尺寸的Target 调试及Debug获取异常信息 配置第三方网络库自定义缓存 缓存设置 GlideApp .with(context).load(gifUrl).asGif().error(…
阅读更多...
MySQL_7.索引概述

MySQL_7.索引概述

1.什么是索引 在关系数据库中&#xff0c;索引是一种单独的、物理的数对数据库表中一列或多列的值进行排序的一种存储结构。 它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单 2.索引的优点 (1)通过创建唯一性索引,可以保证数据库表中每…
阅读更多...
编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞

编写Yaml文件当Poc,利用Nuclei扫描器去扫描漏洞 YAML是一种数据序列化语言&#xff0c;它的基本语法规则注意如下&#xff1a; -大小写敏感 -使用缩进表示层级关系 -缩进时不允许使用Tab键&#xff0c;只允许使用空格。 -缩进的空格数目不重要&#xff0c;只要相同层级的元…
阅读更多...
VSCode如何设置Vue前端的debug调试

VSCode如何设置Vue前端的debug调试

vscode在调试vue.代码时&#xff0c;如何进行debug? 1.安装Chrome Debug插件。 2.在launch.json中&#xff0c;将url修改成你前端项目的路径&#xff1a; 1 {2 // Use IntelliSense to learn about possible attributes.3 // Hover to view descriptions of existing att…
阅读更多...
最新文章

Copyright @ 2022~2023