flutter开发实战-实现自定义按钮类似UIButton效果
flutter开发实战-实现自定义按钮类似UIButton效果
最近开发过程中需要实现一下UIButton效果的flutter按钮,这里使用的是监听手势点击事件。
一、GestureDetector
GestureDetector属性定义
GestureDetector({super.key,this.child,this.onTapDown,this.onTapUp,this.onTap,this.onTapCancel,this.onSecondaryTap,this.onSecondaryTapDown,this.onSecondaryTapUp,this.onSecondaryTapCancel,this.onTertiaryTapDown,this.onTertiaryTapUp,this.onTertiaryTapCancel,this.onDoubleTapDown,this.onDoubleTap,this.onDoubleTapCancel,this.onLongPressDown,this.onLongPressCancel,this.onLongPress,this.onLongPressStart,
...
由于属性太多,我们实现onTapDown、onTapUp、onTapCancel、onTap。
二、实现flutter自定义按钮
实现自定义按钮类似,我们实现onTapDown、onTapUp、onTapCancel、onTap这几个方法
return GestureDetector(onTapDown: handleTapDown,// 处理按下事件onTapUp: handleTapUp,// 处理抬起事件onTap: handleTap,onTapCancel: handleTapCancel,
}void handleTapDown(TapDownDetails details) {if (widget.enabled != null && widget.enabled == true) {setState(() {_highlighted = true;});}}void handleTapUp(TapUpDetails details) {setState(() {_highlighted = false;});}void handleTapCancel() {setState(() {_highlighted = false;});}void handleTap() {if (widget.enabled != null && widget.enabled == true) {setState(() {_highlighted = true;});Future.delayed(Duration(milliseconds: 100), () {if (mounted) {setState(() {_highlighted = false;});}});if (widget.enabled != null && widget.enabled == true) {widget.onPressed();}}}
完整代码如下
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';//枚举类的声明
enum ButtonAlignment { Center, Left, Right }class ButtonWidget extends StatefulWidget {const ButtonWidget({Key? key,this.bgColor,this.bgHighlightedColor,this.color,this.highlightedColor,this.disableColor,this.bgDisableColor,this.width,this.height,this.borderRadius,this.buttonAlignment: ButtonAlignment.Center,this.text: "",this.textFontSize,this.icon,this.iconTextPadding,required this.onPressed,this.enabled = true,required this.child,this.border,this.padding,}) : super(key: key);final Color? bgColor; // 背景颜色final Color? bgHighlightedColor; // 背景点击高亮颜色final Color? color;final Color? highlightedColor;final Color? disableColor;final Color? bgDisableColor;final double? width;final double? height;final VoidCallback onPressed;final double? borderRadius;final ButtonAlignment? buttonAlignment;final String? text;final double? textFontSize;final Icon? icon;final double? iconTextPadding;final bool? enabled;final Widget child;final Border? border;final EdgeInsetsGeometry? padding;_ButtonWidgetState createState() => _ButtonWidgetState();
}class _ButtonWidgetState extends State<ButtonWidget> {bool _highlighted = false;void initState() {// TODO: implement initStatesuper.initState();_highlighted = false;}void handleTapDown(TapDownDetails details) {if (widget.enabled != null && widget.enabled == true) {setState(() {_highlighted = true;});}}void handleTapUp(TapUpDetails details) {setState(() {_highlighted = false;});}void handleTapCancel() {setState(() {_highlighted = false;});}void handleTap() {if (widget.enabled != null && widget.enabled == true) {setState(() {_highlighted = true;});Future.delayed(Duration(milliseconds: 100), () {if (mounted) {setState(() {_highlighted = false;});}});if (widget.enabled != null && widget.enabled == true) {widget.onPressed();}}}AlignmentGeometry showAlignment(ButtonAlignment? buttonAlignment) {AlignmentGeometry alignment = Alignment.center;if (buttonAlignment != null) {if (buttonAlignment == ButtonAlignment.Left) {alignment = Alignment.centerLeft;} else if (buttonAlignment == ButtonAlignment.Right) {alignment = Alignment.centerRight;} else {alignment = Alignment.center;}}return alignment;}Widget build(BuildContext context) {return GestureDetector(onTapDown: handleTapDown,// 处理按下事件onTapUp: handleTapUp,// 处理抬起事件onTap: handleTap,onTapCancel: handleTapCancel,child: Container(padding: widget.padding,width: widget.width,height: widget.height,alignment: showAlignment(widget.buttonAlignment),decoration: BoxDecoration(color: boxDecorationBgColor(),borderRadius: BorderRadius.circular(widget.borderRadius ?? 0),border: widget.border),child: widget.child,),);}Color? boxDecorationBgColor() {if (widget.enabled != null && widget.enabled == true) {return (_highlighted ? widget.bgHighlightedColor : widget.bgColor);}return widget.bgDisableColor ?? widget.bgColor;}Color? textColor() {if (widget.enabled != null && widget.enabled == true) {return (_highlighted ? widget.highlightedColor : widget.color);}return widget.disableColor ?? widget.bgColor;}
}
三、小结
flutter开发实战-实现自定义按钮类似UIButton效果,通过监听手势GestureDetector的onTapDown、onTapUp、onTapCancel、onTap来实现按下背景变换,松开背景恢复默认等效果。
学习记录,每天不停进步。
相关文章:
flutter开发实战-实现自定义按钮类似UIButton效果
flutter开发实战-实现自定义按钮类似UIButton效果 最近开发过程中需要实现一下UIButton效果的flutter按钮,这里使用的是监听手势点击事件。 一、GestureDetector GestureDetector属性定义 GestureDetector({super.key,this.child,this.onTapDown,this.onTapUp,t…...
深度优先搜索|1034, 1020, 1254
深度优先搜索|1034. 边界着色, 机器人的运动范围,529. 扫雷游戏 边界着色机器人的运动范围扫雷问题 边界着色 把这个题分段了,先找到包括 (row, col) 的连通分量,然后再去找符合条件的边界,找到以后涂上颜色就行。 c…...
都市信息供求网servlet+jsp新闻广告出售java源代码mysql
本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 都市信息供求网servletjsp 系统1权限:管理…...
kubeadm init:failed to pull image registry.k8s.io/pause:3.6
错误信息: Unfortunately, an error has occurred: timed out waiting for the condition This error is likely caused by: - The kubelet is not running - The kubelet is unhealthy due to a misconfiguration of the node in some way…...
设计模式之简单工厂模式、工厂模式、抽象工厂模式
参考: 设计模式笔记 简单工厂模式 ● 将类的创建过程交给工厂类实现,如果需要一个类对象,则直接通过工厂创建一个类。 ● 简单工厂模式不符合开闭原则 ● 适用场景:工厂类负责创建的对象比较少;客户端只知道传入工厂…...
C# 控制台彩色深度打印 工具类
文章目录 前言Nuget 环境安装代码使用打印结果 总结 前言 有时候我们想要靠打印获得程序信息,因为Dubeg模式需要一点一点断点进入进出,但是我们觉得断点运行实在是太慢了,还是直接打印后找结果会好一点。 Nuget 环境安装 想自己写的话可以看…...
Pytorch Tensor维度变换方法
1.torch.reshape()、torch.view()可以调整Tensor的shape 2.torch.unsqueeze(index)可以为Tensor增加一个维度 3.squeeze()可以删减维度 4.expand()扩展维度 5.repeat()维度重复,不常用 6.transpose(dim1, dim2)交换dim1与dim2࿰…...
微信小程序之点击文字文字自动转语音进行播放,微信小程序文字识别转语音播放
需求 一堆题目,题干需要在点击的时候进行语音朗读,不做音频上传,不然不便于维护 解决方案 点击查看微信官方文档:微信同声传译 使用流程 后台配置 mp.weixin.qq.com 设置 > 第三方设置 > 插件管理 小程序插件使用流…...
主动学习、半监督学习、它们之间的区别?
1、主动学习(Active Learning): 含义: 有的时候,有类标的数据比较稀少而没有类标的数据是相当丰富的,但是对数据进行人工标注又非常昂贵,这时候,学习算法可以主动地提出一些标注请…...
linux快速安装Rabbitmq
linux快速安装Rabbitmq 准备yum仓库 # root执行rpm --import https://github.com/rabbitmq/signing-keys/releases/download/2.0/rabbitmq-release-signing-key.ascrpm --import https://packagecloud.io/rabbitmq/erlang/gpgkeyrpm --import https://packagecloud.io/ra…...
spconv1.2.1库的编译与安装
SpConv是一个稀疏卷积库,在点云相关的深度学习算法中用的比较多。由于目前官方升级到了2.0,然而有些算法(比如审稿人要我复现的Cylinder3D)仍需要用到1.2.1版本,因此本人花了亿点点时间折腾了一下。。。 本机安装cuda…...
java+springboot+mysql企业邮件管理系统
项目介绍: 使用javaspringbootmysql开发的企业邮件管理系统,系统包含超级管理员、管理员、员工角色,功能如下: 超级管理员:管理员管理;员工管理;反馈管理;系统公告;个人…...
[CKA]考试之一个 Pod 封装多个容器
由于最新的CKA考试改版,不允许存储书签,本博客致力怎么一步步从官网把答案找到,如何修改把题做对,下面开始我们的 CKA之旅 题目为: Task 创建一个Pod,名字为kucc1,这个Pod包含4容器ÿ…...
iphone备份用什么软件?好用的苹果数据备份工具推荐!
众所周知,如果要将iPhone的数据跟电脑进行传输备份的话,我们需要用到iTunes这个pc工具。但是对于iTunes,不少人都反映这个软件比较难用,用不习惯。于是,顺应时代命运的iPhone备份同步工具就出现了。那iphone备份用什么…...
一语道破 python 迭代器和生成器
简而言之:迭代器是一个抽象化的概念,在python中表示访问数据集合中元素的一种方式;生成器也是一个抽象化的概念,在python 中,边循环边生成所需数据,是一种时间换空间的方法。从访问数据方式上来看ÿ…...
有哪些开源和非开源的项目管理工具?
开源和非开源项目管理工具各有其特点和优势。下面是一些常见的开源和非开源项目管理工具以及它们的简要介绍。 开源项目管理工具: OpenProject:OpenProject 是一个功能强大、易于使用的开源项目管理工具。它提供了项目计划、任务管理、团队协作、文档管…...
实战 01|「编写互动式界面」
前言 实践是最好的学习方式,技术也如此。 文章目录 前言一、功能需求(一)1、功能需求描述2、知识点3、布局与程序设计 二、功能需求(二)1、功能需求描述2、知识点1)LinearLayout2)RelativeLayou…...
开源社区寻找八月创作之星!你准备好了吗~
活动页面:https://openlab.cosmoplat.com/createStarCampaign-202308卡奥斯开源社区定位打造工业互联网行业顶级开源社区生态平台,为开发者、企业等用户提供代码托管、技术交流/共享、硬件认证/接入、培训认证、大赛活动等服务,目…...
appuploader不是开发者账号
Appuploader是一款可以帮助开发者上传iOS应用到Apple App Store的工具。很多开发者都知道,在上传应用到App Store之前,需要创建开发者账号并获得苹果官方的认证才能进行上传。但是,有些开发者可能并不想去注册开发者账号,或者遇到…...
MySQL - 10、其他命令
描述表结构、使用数据库、设置变量、更改分隔符、导入SQL脚本、退出MySQL的操作: -- 描述表结构 DESCRIBE table_name;-- 使用特定数据库 USE database_name;-- 设置变量 SET variable_name value;-- 更改分隔符 DELIMITER //-- 执行SQL脚本文件 SOURCE /path/to/…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...
【笔记】AI Agent 项目 SUNA 部署 之 Docker 构建记录
#工作记录 构建过程记录 Microsoft Windows [Version 10.0.27871.1000] (c) Microsoft Corporation. All rights reserved.(suna-py3.12) F:\PythonProjects\suna>python setup.py --admin███████╗██╗ ██╗███╗ ██╗ █████╗ ██╔════╝…...
