Flutter的RawMaterialButton按钮

news2024/12/25 12:37:53

RawMaterialButton介绍

简介

Flutter的RawMaterialButton是一个具有原始材料样式的可点击的按钮控件。它可以用于创建自定义的按钮和交互元素,具有许多可自定义的属性。自定义更灵活。

重要属性

以下是RawMaterialButton的一些常用属性:

  • onPressed:必需属性,指定按钮按下时的回调函数。
  • elevation:按钮的海拔高度,控制阴影的大小。默认值为2.0。
  • highlightElevation:按钮被按下时的海拔高度,控制阴影的大小。默认值为8.0。
  • fillColor:按钮的背景颜色。
  • splashColor:水波纹的颜色。
  • highlightColor:按钮被按下时的颜色。
  • disabledColor:按钮被禁用时的颜色。
  • padding:按钮的内边距。
  • shape:按钮的形状,如圆形、矩形等。
  • clipBehavior:裁剪行为,用于指定如何裁剪溢出的内容。

shape

RawMaterialButtonshape属性可以接受多种形状,包括以下几种:

  1. BoxShape.circle:圆形按钮。
  2. RoundedRectangleBorder:圆角矩形按钮。可以通过设置borderRadius属性来控制圆角的大小。
  3. StadiumBorder:体育场形状的按钮。可以通过设置borderRadius属性来控制圆角的大小。
  4. BeveledRectangleBorder:斜角矩形按钮。可以通过设置borderRadius属性来控制斜角的大小。
  5. ContinuousRectangleBorder:普通矩形按钮。

可以根据实际需求选择合适的形状来创建自定义的按钮。例如,如果需要创建一个圆形按钮,可以这样写:

RawMaterialButton(
  onPressed: () {
    // 按钮被按下时执行的操作
  },
  shape: CircleBorder(),
  child: Text('Click me'),
)

如果需要创建一个圆角矩形按钮,可以这样写:

RawMaterialButton(
  onPressed: () {
    // 按钮被按下时执行的操作  },
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Click me'),
)

需要注意的是,shape属性必须是ShapeBorder类型的对象,因此可以使用继承自ShapeBorder的任何形状类来设置按钮的形状。

例子

下面是一个示例代码,展示了如何使用RawMaterialButton创建一个简单的按钮:

RawMaterialButton(
  onPressed: () {
    // 按钮被按下时执行的操作
  },
  elevation: 2.0,
  fillColor: Colors.blue,
  splashColor: Colors.lightBlue,
  child: Text('Click me'),
)

效果如下图:
image.png
在上面的代码中,我们创建了一个RawMaterialButton,它有一个简单的文本标签Click me,被设置为按钮的子元素。当按钮被按下时,指定的回调函数将会被执行。

我们还可以使用其他的属性来自定义按钮的外观和行为,例如使用shape属性来定义按钮的形状:

RawMaterialButton(
  onPressed: () {
    // 按钮被按下时执行的操作
  },
  elevation: 2.0,
  fillColor: Colors.red,
  splashColor: Colors.pink,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Click me'),
)

效果如下图:

在上面的代码中,我们使用RoundedRectangleBorder来设置按钮的形状为圆角矩形,并通过borderRadius属性指定了圆角的大小。
image.png

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

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

相关文章

为什么要进行业务连续性管理?

为什么要进行业务连续性管理?在现代社会中,企业日常经营所面临的风险越来越多样化、复杂化。突发事件如自然灾害、供应链中断、网络攻击等都有可能对企业生产经营带来巨大影响,甚至导致公司破产倒闭。因此,保证业务连续性显得尤为…

GPT Demo 分享|日不落直播间接入虚拟人AI互动

摘要 虚拟人和数字人是人工智能技术在现实生活中的具体应用,它们可以为人们的生活和工作带来便利和创新。在直播间场景里,虚拟人和数字人可用于直播主播、智能客服、营销推广等。接入GPT的虚拟人像是加了超强buff,具备更强大的自然语言处理能…

面试:JS运行机制

浏览器端和node端的js运行机制执行的过程,进行两者的运行机制比较,以及同步任务和异步任务的说明,两种异步任务的必要性,以及各自有哪些回调,部分回调的优先级。 JS运行机制复述 首先js执行,会有一个函数执…

深度学习--优化器篇(超详细付代码测试流程包含:SGD,SGDM,NAG,Adagrad,RMSProp,Adam,Adadelta,Nadam等常用优化器)

引言 在深度学习过程中总会在代码中遇到优化器.Adam(),在上一篇实现卷积神经网络CNN的代码分析中也提到了优化器的概念,那么优化器如何通俗的理解呢?个人通俗理解(仅供参考):为梯度下降法配置的一个的"领航员",寻找模型…

realman——控制真实的机械臂

概述 MoveIt!完成运动规划后的输出接口是一个命名为“FollowJointTrajectory”的 action,其中包含了一系列规划好的路径点轨迹,与使用 MoveIt!控制 Gazebo中的机械臂不同的是,虚拟机械臂有 gazebo 的 ros_control 插件自动帮我们获取了follow_joint_trajectory 的动作 acti…

MVI56-GSC 串行增强通信模块

通用ASCII串行增强通信模块 MVI56E-GSC/GSCXT 通用ASCII串行增强通信模块允许Rockwell Automation ControlLogix可编程自动化控制器(PACs)使用非特定ASCII字符文本串或字节值串行通信协议轻松与串行设备连接。 MVI56E-GSC增强功能包括通过模块的以太网端口进行本地和远程诊断…

2023年高性能计算就业前景如何?IT人的机遇与挑战

在当今数字化时代,高性能计算(HPC)作为一项关键技术,正迅速成为各行各业的核心需求。不论是在职程序员还是在校大学生,懂高性能计算都将大大提升工作及科研、做课题的效率。而且加之2023年大模型的风靡,人工…

MySQL 连接的使用

MySQL 连接的使用 在前几章节中,我们已经学会了如何在一张表中读取数据,这是相对简单的,但是在真正的应用中经常需要从多个数据表中读取数据。 ​ 本章节我们将向大家介绍如何使用 MySQL 的 JOIN 在两个或多个表中查询数据。 你可以在 SEL…

炸裂开源:你肯定需要的6 个中文版 ChatGPT 提示教程。

提示工程(Prompt Engineering)是一门相对较新的学科,教你你如何开发、优化提示来更好的使用 GPT 等大模型、更好的将大模型的能力接入到你的系统中。 本文整理了 GitHub 上质量最高的 6 个【中文版】提示工程教程。请收藏、转发,…

vue3-lazy图片懒加载

vue3-lazy:https://github.com/ustbhuangyi/vue3-lazy 1、npm安装 npm install vue3-lazy -S2、main.js注册 import { createApp } from vue import App from ./app import lazyPlugin from vue3-lazyconst app createApp(App) app.use(lazyPlugin, {loading: l…

Linux使用指定账户启动进程的两种思路和实现

出于安全的考虑,通常启动进程会不适用root账户,而是使用一些权限较低的账户。 例如启动nginx,在安装这个应用的时候创建nginx账户,用于启动nginx服务。 在nginx配置文件中,user选项就是指定启动nginx使用的用户名。 这里我们 看到nginx进程除了第一个是root用户,其它…

算法工程师的基本职责概述(合集)

算法工程师的基本职责概述 算法工程师的基本职责概述1 职责: 1、负责图像特征提取、运动物体跟踪算法的开发与实现。 2、负责进行各类机器学习、深度神经网络产品的研发。 3、负责设计研究相关算法,并优化算法性能。 4、负责撰写相关算法研发报告、技术方…

基于分布式ADMM算法的考虑碳排放交易的电力系统优化调度研究(matlab代码)

目录 1 主要内容 目标函数 计算步骤 节点系统 2 部分代码 3 程序结果 4 下载链接 点击直达! 1 主要内容 程序完全复现文献《A Distributed Dual Consensus ADMM Based on Partition for DC-DOPF with Carbon Emission Trading》,建立了一个考虑…

3年测试工作经验裸辞,现在有点后悔了····

2020年毕业,现在有3年的测试工作经验,刚毕业前半年在一家知名上市公司,后面则进入一家传统行业公司待到现在2年半。 由于看不到技术成长以及其他原因,上上周辞职了,目前交接中,下个月中旬就得离开了&#…

ChatGPT免费国内在线直连入口,2023持续分享中

这个国内在线版ChatGPT可以提供与OpenAI官方ChatGPT相同的使用效果,让你在不懂技术的情况下轻松接触人工智能。 国内镜像: ChatGPT国内直连版(点我)http://test.ai111.top 随着OpenAI不断推出更新版本,现在GPT3.5和…

如何成为机器学习工程师

如何成为机器学习工程师 又到一年一度的毕业季。今年的毕业季有点不同,这是迎着 AI 爆发元年的毕业季,很多同学想投身 AI 和机器学习行业,向我咨询了很多如何成为一名机器学习工程师的问题。在此,我结合自身入行十年的经理&#…

科聪控制系统助力铸造行业向“智能”实现“质”的突破!

此项目现场为传统铸造业,铸造是装备制造业发展不可或缺的重要环节,是众多主机和重大技术装备发展的重要支撑。该现场以往由人工遥控车辆来进行物资的挪动,现投运搭载科聪控制系统的AGV来代替人工用遥控车辆来移动物资。实现上位机上一键发送任…

TF卡被格式化后要如何找到照片

TF卡在日常使用时,具有体积小存储大的优势而被我们用来存储一些重要的照片,但由于内存比较小,TF卡用户需要经常对TF卡中的照片进行清理,避免内存不足等问题,接下来讲下TF卡被格式化后要如何找到照片。TF卡被格式化后要…

什么是IPAM(IP地址管理)?

我们目前生活在一个依赖IP的世界,IPAM(IP地址管理)已成为网络管理不可避免的一部分。在 IP 连接设备爆炸式增长之前,IPAM 网络通常随着连接用户数量的增加而增长。但是,现在网络必须根据我们用于工作的 IP 设备数量为每…

消防安全知识答题活动小程序v4.1.0

消防安全知识答题活动小程序v4.1.0 v4.1.0 1&#xff09;支持多选题 .wxml <checkbox-group class"checkbox-group" bindchange"checkboxChange"><label class"checkbox" wx:for"{{questionList[index].option}}" wx:for…