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来实现按下背景变换,松开背景恢复默认等效果。

学习记录,每天不停进步。

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

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

相关文章

附件展示 点击下载

效果图 实现代码 <el-table-column prop"attachment" label"合同附件" width"250" show-overflow-tooltip><template slot-scope"scope"><div v-if"scope.row.cceedcAppendixInfoList &&scope.row.ccee…

路由的hash和history模式的区别

目录 ✅ 路由模式概述 一. 路由的hash和history模式的区别 1. hash模式 2. history模式 3. 两种模式对比 二. 如何获取页面的hash变化 ✅ 路由模式概述 单页应用是在移动互联时代诞生的&#xff0c;它的目标是不刷新整体页面&#xff0c;通过地址栏中的变化来决定内容区…

SQL 表别名 和 列别名

列表名 列表名之后 order by 可以用别名 也可以用原名&#xff0c; where 中不能用别名的 SQL语句执行顺序&#xff1a; from–>where–>group by -->having — >select --> order 第一步&#xff1a;from语句&#xff0c;选择要操作的表。 第二步&#xff1…

SpringBoot图片上传并对大小进行压缩(缩放比例)

前言 最近有个新需求&#xff0c;项目中对客户上传jpg图片的时候&#xff0c;每次都是校验大小必须≤30KB&#xff0c;但是客户实际使用的时候&#xff0c;总是会自己去进行压缩&#xff0c;压缩到30KB以内之后再上传&#xff0c;使用时间长了之后&#xff0c;客户总会觉得很麻…

react学习笔记——1. hello react

包含的包一共有4个&#xff0c;分别的作用如下&#xff1a; babel.min.js&#xff1a;可以进行ES6到ES5的语法转换&#xff1b;可以用于import&#xff1b;可以用于将jsx转换为js。注意&#xff0c;在开发的时候&#xff0c;这个转换&#xff08;jsx转换js&#xff09;不在线上…

Tcp的粘包和半包问题及解决方案

目录 粘包&#xff1a; 半包&#xff1a; 应用进程如何解读字节流&#xff1f;如何解决粘包和半包问题&#xff1f; ①&#xff1a;固定长度 ②&#xff1a;分隔符 ③&#xff1a;固定长度字段存储内容的长度信息 粘包&#xff1a; 一次接收到多个消息&#xff0c;粘包 应…

HBase概述

HBase 一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式…

mysql的update_time

CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(50) NOT NULL,age INT,update_time TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间 );具体解释如下&#xff1a; DEFAULT CURRENT_TIMESTAMP: 这部分表示当插入…

【CI/CD】图解六种分支管理模型

图解六种分支管理模型 任何一家公司乃至于一个小组织&#xff0c;只要有写代码的地方&#xff0c;就有代码版本管理的主场&#xff0c;初入职场&#xff0c;总会遇到第一个拦路虎 git 管理流程&#xff0c;但是每一个企业似乎都有自己的 git 管理流程&#xff0c;倘若我们能掌握…

如何在不使用脚本和插件的情况下手动删除 3Ds Max 中的病毒?

如何加快3D项目的渲染速度&#xff1f; 3D项目渲染慢、渲染卡顿、渲染崩溃&#xff0c;本地硬件配置不够&#xff0c;想要加速渲染&#xff0c;在不增加额外的硬件成本投入的情况下&#xff0c;最好的解决方式是使用渲云云渲染&#xff0c;在云端批量渲染&#xff0c;批量出结…

ABAP 自定义搜索功能 demo1

ABAP 自定义搜索功能 demo1 效果&#xff1a; 双击选中行则为选中对应发票 实现 1定义 定义屏幕筛选参数 SELECTION-SCREEN BEGIN OF SCREEN 9020. SELECT-OPTIONS:s1_belnr FOR rbkp-belnr, s1_gjahr FOR rbkp-gjahr, s1_lifnr FOR rbkp-lifnr, s1_erfna FOR rbkp-erfnam, …

go入门实践二-tcp服务端

文章目录 前言接口与方法并发-协程项目管理bufio包使用其他代码 前言 上一篇&#xff0c;我们通过go语言的hello-world入门&#xff0c;搭建了go的编程环境&#xff0c;并对go语法有了简单的了解。本文实现一个go的tcp服务端。借用这个示例&#xff0c;展示接口、协程、bufio的…

php运算符的短路特性

php运算符的短路特性 1、逻辑运算符&#xff1a;逻辑与&#xff08;&&)和逻辑或&#xff08;||&#xff09;&#xff0c;存在着短路特性 PHP中有以下两个运算符具有短路的特性&#xff0c;他们是逻辑运算符的逻辑与&#xff08;&&)和逻辑或&#xff08;||&am…

线程概念linux

何为线程&#xff1a; 线程是程序中负责执行的单位&#xff0c;它可以被看作是进程的一部分&#xff0c;是进程的子任务。线程与进程的区别在于&#xff0c;进程是一个资源单位&#xff0c;而线程是进程的一部分&#xff0c;它只有栈这个独立的资源&#xff0c;其他资源如代码…

Java SpringBoot集成Activiti7工作流

Activiti7 Java SpringBoot集成Activiti7工作流介绍项目集成引入依赖YML配置文件配置类 启动项目生成表结构Activiti的数据库支持 Activiti数据表介绍项目Demo地址&#xff1a; Java SpringBoot集成Activiti7工作流 本文项目Demo地址附在文章后方 官网主页&#xff1a;http://a…

Vue npm 128

npm #降低版本 npm install npm3.8.6 -g升级到最新版本 npm install -g npmvue用npm 安装指定element-ui 版本 npm i element-ui2.0.10查看当前镜像源 npm config get registry切换镜像 npm config set registry https://registry.npmmirror.com --registryhttps://registry.n…

C++ 万能引用实现完美转发示例

万能引用 万能引用的一种常见使用场景是用在模板函数中&#xff1a; template<class T> void fun(T&& t) { //... }函数参数t就是一个万能引用&#xff0c;万能引用在这里的作用&#xff0c;简单来说就是它既能够接收左值也能接受右值 验证函数 定义一个参数…

组件化、跨平台…未来前端框架将如何演进?

前端框架在过去几年间取得了显著的进步和演进。前端框架也将继续不断地演化&#xff0c;以满足日益复杂的业务需求和用户体验要求。从全球web发展角度看&#xff0c;框架竞争已经从第一阶段的前端框架之争&#xff08;比如Vue、React、Angular等&#xff09;&#xff0c;过渡到…

powerdesigner各种字体设置;preview字体设置;sql字体设置

1.设置左侧菜单&#xff1a; 步骤如下&#xff1a; tools —> general options —> fonts —> defalut UI font ,选择字体样式及大小即可&#xff0c;同下图。 2.设置preview字体大小&#xff08;sql预览&#xff09; 步骤如下&#xff1a; tools —> general o…

c语言实现简单的tcp服务端

功能&#xff1a;监听本地8888端口&#xff0c;接收到客户端连接请求后创建线程单独处理与客户端的交互&#xff0c;支持同时与多个客户端交互。 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <sys/…