第三百八十一回

文章目录

  • 1. 概念介绍
  • 2. 修改方法 015buttonStyle.png
    • 2.1 修改形状
    • 2.2 修改颜色
    • 2.3 修改位置
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"如何创建以图片为背景的页面"相关的内容,本章回中将介绍如何修改按钮的形状.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在前面章回中介绍过按钮的基本用法,如果有看官忘记了可以点击这里查看。本章回中主要介绍如何修改按钮的形状以及其它的属性,比如文字颜色等。按钮默认的形
状是一个圆角矩形,当然这个默认形状使用的是默认的theme,如果换成新的Material3默认主题,那么按钮的默认形状就是椭圆,而且带有浅紫色背景。下面是一个示
例图,图中上面的按钮是Material3默认主题下的Button,下面的按钮是我们修改后的按钮,大家对比一下就会发现它们的形状,颜色,文字位置都不一样。
在实际项目中这种默认的形状和颜色通常不符合设计需求,那么如何修改呢?看官莫急,本章回中将详细介绍如何修改按钮的形状,颜色,内容的位置以及边距。

2. 修改方法 015buttonStyle.png

我们修改的内容包含形状,颜色,内容的位置,这些内容都属于按钮的外观风格,通过按钮的style属性可以修改这些风格。修改style时可以创建一个新的style,不
过这个操作比较麻烦,我们推荐的做法是使用styleFrom()方法,该方法提供了相关的属性来修改按钮的风格,而且它只修改属性中的内容,其它的内容仍然使用按钮
原来的风格。接下来我们将分别介绍修改这些风格的方法。

2.1 修改形状

我们通过shape属性来修改按钮的形状,通常使用RoundedRectangleBorder()对象给它赋值,这样可以调整圆角的大小,也可以把按钮的形状修改成圆形。我们将
在后面的小节中通过示例代码来演示具体的修改方法。

2.2 修改颜色

我们通过backgroundColor和foregroundColor属性可以修改按钮的背景颜色和按钮中文字的颜色。给这两个属性赋值时,可以使用系统提供的颜色值,也可以使用
自定义的颜色值。我们将在后面的小节中通过示例代码来演示具体的修改方法。

2.3 修改位置

我们通过alignment和padding属性可以修改按钮上显示文字的位置,这里需要注意一下,修改位置时最好同时修改这两个属性,否则效果不明显,因为按钮默认的风格
会在按钮的文字周围添加边距,修改位置时需要去掉边距才效果,不然文字无法贴到按钮边框上。我们将在后面的小节中通过示例代码来演示具体的修改方法。

3. 示例代码

///正常的button和修改style后的button,可以对比
ElevatedButton(onPressed: (){},child: const Text("ElevatedButton"),
),
ElevatedButton(onPressed: (){},style: ElevatedButton.styleFrom(///调整圆角度数shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),///调整文字位置,注意有边距,去掉边距后效果更加明显alignment: Alignment.centerRight,///调整button内文字的间隔padding:const EdgeInsets.only(left:24,top:8,right: 0,bottom:8),///调整button的颜色backgroundColor: Colors.black87,foregroundColor: Colors.white),child: const Text("ElevatedButton"),
),

我们通过上面的代码中演示了修改按钮风格的方法,编译并且运行该程序可以得到两个按钮的效果图,具体的图形可以参考文章开始的图片。

4. 内容总结

我们在本章回中说的按钮特指ElevatedButton。其它类型的按钮只是与ElevatedButton 的风格不同,它们的修改方法完全相同。我们在这里就不介绍了,大家可以
自己动手去练习,就当作是我们留给大家的课外作业。最后,我们对本章回的内容做一个全面的总结:

  • 按钮形状等风格与主题有关,不同主题的按钮风格不一样;
  • 按钮的风格通过它的style属性来控制,修改该属性值可以修改按钮的风格;
  • 修改属性值时推荐使用styleFrom()方法,该方法只指定指定属性的内容,其它的内容保持不变;
    看官们,与"如何修改按钮的形状"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

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

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

相关文章

06. Nginx进阶-Nginx代理服务

proxy代理功能 正向代理 什么是正向代理? 正向代理(forward proxy),一个位于客户端和原始服务器之间的服务器。 工作原理 为了从原始服务器获取内容,客户端向代理发送一个请求并指定目标(即原始服务器…

chatgpt-next-web搭建教程,超低成本部署属于自己的ChatGPT

随着AI的应用变广,各类AI程序已逐渐普及,尤其是在一些日常办公、学习等与撰写/翻译文稿密切相关的场景,大家都希望找到一个适合自己的稳定可靠的ChatGPT软件来使用。 ChatGPT-Next-Web就是一个很好的选择。它是一个Github上超人气的免费开源…

2核4G云服务器租用价格_2核4G云主机优惠价格_2024年报价

租用2核4G服务器费用价格,2核4G云服务器多少钱一年?1个月费用多少?阿里云2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年;腾讯云轻量2核4G服务器5M带宽165元一年、252元15个月、540元三…

Spring IOC在业务中常见的使用方式

目录 1、什么是IOC 2、java实现创建对象的方式有哪些 3、基于配置文件的di实现 3.1、什么是di 3.2、入门案例 3.3、环境搭建 接口和实现类 ioc配置文件 测试程序 3.4、案例总结 3.5、简单类型属性的赋值(set注入) set注入要求 JavaBean sp…

代码随想录day12(2)字符串:重复的子字符串(leetcode459)

题目要求:给定一个非空的字符串,判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母,并且长度不超过10000。 思路: 一、首先对于暴力解法,可以枚举所有的字串进行判断。但是枚举时实际上只需…

rt thread stdio如何同时生成bin和hex

一、rt thread stdio默认生成bin文件: rt thread stdio 软件编译时,默认生成bin文件; 二、rt thread stdio如何同时生成bin和hex 右键单击-->项目-->属性-->C/C构建-->设置-->构建步骤-->(构建后步骤)命令: …

视频如何无水印保存?这三种下载方法赶紧收藏

在互联网时代,视频已成为我们获取信息、娱乐休闲的重要途径。然而,有时我们想要保存或分享某些视频时,却发现下载起来却带有水印。为了解决这个问题,今天给大家带来几个无水印下载的方法。 方法一:水印云 水印云是一…

Python使用模块和库编程

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 路在脚下,勇往直前&#x…

Spring Boot2.2.4版本启动项目时,访问登录接口显示页面不存在

问题触发场景:IDEA 2023.3.4 SpringBoot 2.2.4 上面4张图片分别是项目结构、Spring Boot启动配置、SpringMVC配置和页面展示在项目中存放的位置,表面上看上去没有太大问题,项目应该会达到预期结果,但是bug总是在不经意间出现&…

MySQL数据库运维第一篇(日志与主从复制)

文章目录 一、错误日志二、二进制日志三、查询日志四、慢查询日志(记录超时的sql语句)五、主从复制概括六、主从复制原理七、搭建主从复制八、主从复制的测试 在这篇深入的技术文章中,作者将以明晰透彻的方式详细介绍MySQL数据库中关键的日志…

【EAI 027】Learning Interactive Real-World Simulators

Paper Card 论文标题:Learning Interactive Real-World Simulators 论文作者:Mengjiao Yang, Yilun Du, Kamyar Ghasemipour, Jonathan Tompson, Leslie Kaelbling, Dale Schuurmans, Pieter Abbeel 作者单位:UC Berkeley, Google DeepMind, …

日本发动全面侵华战争他们在怕什么?为何不敢动陕西,

日本全面侵华战争之谜:恐惧与野心的交织 在二十世纪三十年代,日本帝国主义以令人发指的暴行和残忍手段,对中国发动了全面侵华战争。然而,在这场战争中,有一个引人关注的现象:日本侵略者在进攻过程中&#…

python和nodejs一键安装当前项目所有依赖

python和nodejs一键安装当前项目所有依赖。群里有人问怎么快速安装网上下载的源码里面的依赖。所以在这里分享一下。更多问题可以自己加群917400262问我。 目录导航 1.0 python一键安装当前项目所有依赖2.0 nodejs一键安装当前项目所有依赖 1.0 python一键安装当前项目所有依赖…

聊聊国内「类Sora模型」发展现状,和 Sora 的差距到底有多大?

2024 年 2 月 16 日。 就在谷歌发布他新一代的多模态大模型 Gemini 1.5 Pro 的同一天,OpenAI 带着新一代的文生视频模型 Sora 再次抓住了全世界人们的眼球。 “颠覆”、“炸裂”、“变天”、“疯狂”,类似的形容词一夜之间簇拥在 Sora 周围,…

网络传输基本流程(封装,解包)+图解(同层直接通信的证明),报头分离问题,协议定位问题,协议多路复用

目录 网络传输基本流程 引入 封装 过程梳理 图解 报文 解包 过程梳理 图解 -- 同层直接通信的证明 总结 解包时的报头分离问题 举例 -- 倒水 介绍 自底向上传输时的协议定位问题 介绍 解决方法 协议多路复用 介绍 优势 网络传输基本流程 引入 首先,我们明确…

VS查看C++头文件(.h文件)的函数列表

这里使用的是VS2019举例 如下图查看Actor.h文件中的函数列表 设置步骤如下图

【d35】【Java】【力扣】28. 找出字符串中第一个匹配项的下标

题目 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从 0 开始)。如果 needle 不是 haystack 的一部分,则返回 -1 。 示例 1: 输入:haystac…

【大数据】通过 docker-compose 快速部署 MinIO 保姆级教程

文章目录 一、概述二、MinIO 与 Ceph 对比1)架构设计对比2)数据一致性对比3)部署和管理对比4)生态系统和兼容性对比 三、前期准备1)部署 docker2)部署 docker-compose 四、创建网络五、MinIO 编排部署1&…

【SQL】608. 树节点(流控制语句 CASE + IF语句)

前述 知识点推荐学习: sql中的 IF 条件语句的用法 MySQL:if语句、if…else语句、case语句,使用方法解析 题目描述 leetcode 题目:608. 树节点 思路 关键点:如何确定有没有子节点 根节点:父节点为空内节…

基于Redo log Undo log的MySQL的崩溃恢复

基于Redo log & Undo log的MySQL的崩溃恢复 Redo log Undo log Redo log 重做日志,记录,修改过的数据 Undo log 回滚日志,记录修改之前的数据 两个我不做详细的介绍了,redo log就是记录哪些地方被修改了 undo log是记录修改之前我们的数据长什么样 更新流程 我们来捋一…