第二百一十一回

我们在上一章回中介绍了"如何创建以图片为背景的页面"相关的内容，本章回中将介绍如何修改按钮的形状.闲话休提，让我们一起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()方法，该方法只指定指定属性的内容，其它的内容保持不变；
  看官们，与"如何修改按钮的形状"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!