文章目录
- 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()方法,该方法只指定指定属性的内容,其它的内容保持不变;
看官们,与"如何修改按钮的形状"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!