专门做毕业设计的网站,租车做什么网站推广,南昌seo服务,wordpress中文版下载文章目录 1. 概念介绍2. 修改方法2.1 修改形状2.2 修改颜色2.3 修改位置 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何创建以图片为背景的页面相关的内容#xff0c;本章回中将介绍如何修改按钮的形状.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. … 文章目录 1. 概念介绍2. 修改方法2.1 修改形状2.2 修改颜色2.3 修改位置 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何创建以图片为背景的页面相关的内容本章回中将介绍如何修改按钮的形状.闲话休提让我们一起Talk Flutter吧。 1. 概念介绍
我们在前面章回中介绍过按钮的基本用法如果有看官忘记了可以点击这里查看。本章回中主要介绍如何修改按钮的形状以及其它的属性比如文字颜色等。按钮默认的形 状是一个圆角矩形当然这个默认形状使用的是默认的theme如果换成新的Material3默认主题那么按钮的默认形状就是椭圆而且带有浅紫色背景。下面是一个示 例图图中上面的按钮是Material3默认主题下的Button,下面的按钮是我们修改后的按钮大家对比一下就会发现它们的形状颜色文字位置都不一样。 在实际项目中这种默认的形状和颜色通常不符合设计需求那么如何修改呢看官莫急本章回中将详细介绍如何修改按钮的形状颜色内容的位置以及边距。
2. 修改方法
我们修改的内容包含形状颜色内容的位置这些内容都属于按钮的外观风格通过按钮的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()方法该方法只指定指定属性的内容其它的内容保持不变 看官们与如何修改按钮的形状相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
