我們在上一章回中介紹了"如何創建以圖片為背景的頁面"相關的內容，本章回中將介紹如何修改按鈕的形狀.閑話休提，讓我們一起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()方法，該方法只指定指定屬性的內容，其它的內容保持不變；
  看官們，與"如何修改按鈕的形狀"相關的內容就介紹到這里，歡迎大家在評論區交流與討論!