当前位置: 首页 > news >正文

flutter自定义按钮-文本按钮

目录

前言

需求

实现


前言

最近闲着无聊学习了flutter的一下知识,发现flutter和安卓之间,页面开发的方式还是有较大的差异的,众所周知,android的页面开发都是写在xml文件中的,而flutter直接写在代码里(dart文件中),从目前我的认识来看,两者在UI上的“套娃”方式,flutter更能套,简直就是“套中套”啊哈哈。比如今天的手写一个最简单的自定义按钮吧,效果如下图所示

需求

  • 带文本的普通按钮,可修改字体大小和字体颜色
  • 提供修改背景色,按下后的背景色支持
  • 支持圆角和边框
  • 提供点击事件的回调

 这几个需求还是毕竟常用的,目前没考虑渐变色和图标,具体需求具体改吧

实现

本次demo的代码本身属于练手,相当于flutter的"hello world"(毕竟我才刚了解flutter没几天)

以下是具体的代码实现:

import 'package:flutter/material.dart';class CustomTextButton extends StatefulWidget {//按钮的宽度final double? width;//按钮的长度final double? height;final String text;final double? textSize;final Color textColor;final Color backgroundColor;final Color pressedBackgroundColor;final VoidCallback onClick;final double borderRadius;final Color borderColor;const CustomTextButton({super.key,required this.onClick,required this.text,this.textSize = 16,this.width = double.infinity,required this.height,this.backgroundColor = Colors.white,this.pressedBackgroundColor = Colors.white,this.borderRadius = 0.0,this.borderColor = Colors.white,this.textColor = Colors.black});@overrideState<CustomTextButton> createState() => _CustomTextButtonState();
}class _CustomTextButtonState extends State<CustomTextButton> {bool _isPressed = false;@overrideWidget build(BuildContext context) {return ConstrainedBox(constraints:BoxConstraints.expand(width: widget.width, height: widget.height),child: GestureDetector(onTap: () {widget.onClick();},onTapDown: (details) {setState(() {_isPressed = true;});},onTapUp: (details) {setState(() {_isPressed = false;});},child: Container(alignment: Alignment.center,decoration: BoxDecoration(color: _isPressed? widget.pressedBackgroundColor: widget.backgroundColor,borderRadius: BorderRadius.circular(widget.borderRadius),border: Border.fromBorderSide(BorderSide(width: 1, color: widget.borderColor))),child: Text(widget.text,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(color: widget.textColor,fontSize: widget.textSize,fontStyle: FontStyle.normal,),),),),);}
}extension HexColor on Color {/// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".static Color fromHex(String hexString) {final buffer = StringBuffer();if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');buffer.write(hexString.replaceFirst('#', ''));return Color(int.parse(buffer.toString(), radix: 16));}}

代码演示,如何使用,这个还是非常简单易懂的,有什么需要改进的地方,也请大佬指示改进。

Container(margin: const EdgeInsets.only(left: 20, right: 20),child: CustomTextButton(text: '注册',textSize: 18,textColor: Colors.white,backgroundColor: HexColor.fromHex("F9AC00"),pressedBackgroundColor: HexColor.fromHex("E0CE32"),height: 44,borderRadius: 30,onClick: () {Fluttertoast.showToast(msg: "您按了注册",toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.BOTTOM,timeInSecForIosWeb: 1,backgroundColor: Colors.black12,textColor: Colors.black,fontSize: 14.0);},),),

相关文章:

flutter自定义按钮-文本按钮

目录 前言 需求 实现 前言 最近闲着无聊学习了flutter的一下知识&#xff0c;发现flutter和安卓之间&#xff0c;页面开发的方式还是有较大的差异的&#xff0c;众所周知&#xff0c;android的页面开发都是写在xml文件中的&#xff0c;而flutter直接写在代码里&#xff08;da…...

无涯教程-Android - CheckBox函数

CheckBox是可以由用户切换的on/off开关。为用户提供一组互不排斥的可选选项时,应使用复选框。 CheckBox 复选框属性 以下是与CheckBox控件相关的重要属性。您可以查看Android官方文档以获取属性的完整列表以及可以在运行时更改这些属性的相关方法。 继承自 android.widget.T…...

[Go版]算法通关村第十五关青铜——用4KB内存寻找重复元素

目录 题目&#xff1a;用4KB内存寻找重复元素思路分析&#xff1a;使用位存储如何存储这32000个整数&#xff1f;每个整数对应在位图中的存储状态举例如何判断是重复的&#xff1f;具体的步骤 复杂度&#xff1a;时间复杂度 O ( n ) O(n) O(n)、空间复杂度 O ( 1 ) O(1) O(1)Go…...

OJ练习第159题——消灭怪物的最大数量

消灭怪物的最大数量 力扣链接&#xff1a;1921. 消灭怪物的最大数量 题目描述 你正在玩一款电子游戏&#xff0c;在游戏中你需要保护城市免受怪物侵袭。给你一个 下标从 0 开始 且长度为 n 的整数数组 dist &#xff0c;其中 dist[i] 是第 i 个怪物与城市的 初始距离&#…...

Prometheus-Rules(规则)

文章目录 一、介绍二、配置 Prometheus 使用规则文件三、 规则文件语法规则文件语法全局Recording rules(记录规则)2 Alerting rules(警报规则)3 模板化如何使用四、检查规则文件语法五、发送警报通知一、介绍 Prometheus规则是一种逻辑表达式,可用于定义有关监控数据的逻…...

打卡智能中国(六):村里出了“飞行员”

提起返乡青年&#xff0c;你的第一印象是什么&#xff1f;失败、躺平、卷不动了&#xff1f; 我们在浙江、福建、青海等地&#xff0c;参观一些农业智能化项目时&#xff0c;陪同参观的“飞手”&#xff0c;高兴地跟我们分享自己的心路历程&#xff1a; 在家门口做农业无人机操…...

自动化运维工具Ansible之playbooks剧本

自动化运维工具Ansible之playbooks剧本 一、playbooks1.playbooks简述2.playbooks剧本格式3.playbooks组成部分 二、实例1.编写脚本2.运行playbook3.定义、引用变量4.指定远程主机sudo切换用户5.when条件判断6.迭代7.Templates 模块8.tags 模块9.Roles 模块 三、编写应用模块1.…...

K8S访问控制------认证(authentication )、授权(authorization )、准入控制(admission control )体系

一、账号分类 在K8S体系中有两种账号类型:User accounts(用户账号),即针对human user的;Service accounts(服务账号),即针对pod的。这两种账号都可以访问 API server,都需要经历认证、授权、准入控制等步骤,相关逻辑图如下所示: 二、authentication (认证) 在…...

开开心心带你学习MySQL数据库之第三篇上

学校的项目组有必要加入吗? 看你的初心. ~~如果初心是通过这个经历能够提高自己的技术水平 ~~是可以考虑的 ~~如果初心是通过这个经历提高自己找工作的概率 ~~这个是不靠谱的,啥用没有 ~~如果初心是通过这个体验更美好的大学生活 ~~靠谱的 秋招,应届生,找工作是非常容易的!!! …...

Mysql批量插入大量数据的方法

使用存储过程进行插入&#xff0c; 在navicate中示例如下&#xff1a; 输入需要的参数点击完成 在begin end中输入代码&#xff0c;示例代码如下 CREATE DEFINERskip-grants userskip-grants host PROCEDURE batch_insert() BEGINdeclare i int default 0; set i0;while i<1…...

centos安装nginx实操记录(加安全配置)

1.下载与安装 yum -y install nginx2.启动命令 /usr/sbin/nginx -c /etc/nginx/nginx.conf3.新建配置文件 cd /etc/nginx/conf.d vim index.conf配了一个负责均衡&#xff0c;如不需要&#xff0c;可将 server localhost: 多余的去掉 upstream web_server{server localhost…...

【中等】49. 字母异位词分组

原题链接&#xff1a;https://leetcode.cn/problems/group-anagrams 49. 字母异位词分组 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs [“…...

Python3 条件控制

Python3 条件控制 Python 条件语句是通过一条或多条语句的执行结果&#xff08;True 或者 False&#xff09;来决定执行的代码块。 可以通过下图来简单了解条件语句的执行过程: 代码执行过程&#xff1a; if 语句 Python中if语句的一般形式如下所示&#xff1a; if conditi…...

IDEA自定义模板

IDEA自定义模板 &#xff08;1&#xff09;定义sop模板 ①在Live Templates中增加模板 ②先定义一个模板的组 ③在模板组里新建模板 ④定义模板 Abbreviation:模板的缩略名称Description:模板的描述Template text:模板的代码片段应用范围。比如点击Define。选择如下&…...

【Unity3D】UI Toolkit简介

1 前言 UI Toolkit 是一种基于 Web 技术的 GUI 框架&#xff0c;是为了解决 UGUI 效率问题而设计的新一代 UI 系统&#xff08;UGUI 的介绍详见→UGUI概述&#xff09;。与 UGUI 不同&#xff0c;UI Toolkit 没有采用 GameObject 的方式&#xff0c;而是参考了 Web 技术的 XML …...

QT 界面相关操作

1> 创建自定义类时需要指定父类 2> 第一个界面的相关操作 #include "widget.h" #include<iostream> //printf #include<QDebug> //qDebuf #include<QIcon> //图标的头文件 using namespace std; //coutWidget::Widget(QWidget *…...

nestjs:docker build时执行npm install sharp提示downloading libvips socket hang up

问题&#xff1a; 如题 参考&#xff1a; sharp - High performance Node.js image processing 参考chinese-mirror处理 原因&#xff1a; 默认是从github上下载libvips库&#xff0c;但是使用socket协议&#xff0c;linux下不挂载梯子是无法加速的&#xff0c;因此得更换下镜像…...

图像分类学习笔记(七)——MobileNet

一、MobileNetV1 传统的神经网络&#xff0c;内存需求大、运算量大&#xff0c;导致无法在移动设备以及嵌入式设备上运行。之前的VGG16模型权重大小大概有490M&#xff0c;ResNet模型权重大小大概有644M。MobileNet网络是由google团队在2017年提出的&#xff0c;专注于移动端或…...

ssm+vue宠物领养系统源码和论文

ssmvue宠物领养系统源码和论文103 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 本课题是根据用户的需要以及网络的优势建立的一个宠物领养系统&#xff0c;来满足用宠物领养的需求。 本宠物领养系统…...

阜时科技联合客户发布全固态激光雷达面阵SPAD芯片及雷达整机

引言: 首先,我们非常荣幸受邀观摩此次行业盛会。阜时科技在全固态激光雷达面阵SPAD芯片研发上所取得的卓越成果,对于激光雷达大幅降本、扩大市场应用,具有重要意义。先划重点: 1,正式发布之前,阜时科技全固态激光雷达面阵SPAD芯片已被光之矩、武汉万集等多家激光雷达厂…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

构建Docker镜像的Dockerfile文件详解

文章目录 前言Dockerfile 案例docker build1. 基本构建2. 指定 Dockerfile 路径3. 设置构建时变量4. 不使用缓存5. 删除中间容器6. 拉取最新基础镜像7. 静默输出完整示例 docker runDockerFile 入门syntax指定构造器FROM基础镜像RUN命令注释COPY复制ENV设置环境变量EXPOSE暴露端…...