【Flutter 學習筆記】🎬 教學影片：連結
【Flutter 學習筆記】📚 文章目錄：連結
今天我們要來深入探討 Flutter 框架中的一個重要元件——ElevatedButton（漂浮按鈕）。在這篇文章中，我將逐步拆解這個元件的用法，讓大家能夠清楚理解每個部分的功能與用途。
什麼是 ElevatedButton？
在 Flutter 中，按鈕元件有多種型態，包括 TextButton（文字按鈕）、IconButton（圖示按鈕）等。而 ElevatedButton 是最常用的按鈕之一。它的特點是擁有陰影效果，讓按鈕看起來像是漂浮在畫面上，這也是它名稱中的「Elevated」所代表的意義。這種設計概念源自於 Material Design 的設計規範。ElevatedButton 的基本用法
讓我們來看看如何在 Flutter 中使用 ElevatedButton。首先，我們在 build 方法中加入一個 Center Widget，然後在 child 參數中新增一個 ElevatedButton 元件。
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () {
print('我被點擊了！');
},
child: Text('按鈕'),
),
);
}
參數解析
在 ElevatedButton 的小括號內，我們可以看到兩個必填參數：
- onPressed：這是一個函數，當按鈕被點擊時會執行的程式碼。child：這是按鈕內部顯示的內容，通常是一個 Text Widget。
這兩個參數都是具名參數，並且使用了 required 修飾詞，表示這兩個參數是必須填寫的。
使用匿名函數
在 onPressed 參數中，我們傳入了一個匿名函數。這個函數沒有參數，也沒有回傳值，因此我們使用小括號和大括號來定義它。在大括號內，我們可以寫下按鈕被點擊後要執行的程式碼。在這裡，我們只是簡單地使用 print 函數來輸出一條訊息。
如果需要更新畫面，就需要使用 StatefulWidget 並呼叫 setState 方法來更新畫面。
儲存與 Hot Reload
當我們完成程式碼後，使用快捷鍵存檔，這時候 Flutter 的 Hot Reload 功能會自動啟用。你會看到畫面正中央出現一個按鈕，點擊它後，輸出資訊區會顯示「我被點擊了！」。
如果在下方的偵錯控制台沒有看到輸出，可以點擊右上角開啟下方資訊視窗，再次點擊按鈕就能看到輸出結果。VS Code 會幫我們計數，避免資訊量過多。
設定按鈕的顏色樣式
接下來，我們來看看如何設定按鈕的顏色樣式。注意，參數之間要用逗號隔開。
ElevatedButton(
onPressed: () {
print('我被點擊了！');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue, // 設定背景顏色
foregroundColor: Colors.white, // 設定文字顏色
),
child: Text('按鈕'),
)
在 style 參數中，我們使用 ElevatedButton.styleFrom() 方法來設定按鈕的樣式。這裡我們設定了 backgroundColor 為藍色，foregroundColor 為白色。再次存檔後，按鈕的顏色樣式就會改變。
設定按鈕的形狀
除了顏色，我們還可以設定按鈕的形狀。在 ElevatedButton.styleFrom() 方法中，有一個 shape 參數可以用來設定按鈕的外框形狀。
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0), // 設定圓角半徑
),
)
在這裡，我們使用 RoundedRectangleBorder 方法來設定按鈕的外框形狀，並在 borderRadius 參數中傳入 BorderRadius.circular(8.0)，這表示按鈕的圓角半徑為 8.0。這樣的設計可以讓按鈕看起來更加柔和，符合現代 UI 設計的趨勢。
完整的 ElevatedButton 範例
以下是整個 ElevatedButton 的完整範例，包含顏色和形狀的設定：
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () {
print('我被點擊了！');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue, // 設定背景顏色
foregroundColor: Colors.white, // 設定文字顏色
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0), // 設定圓角半徑
),
),
child: Text('按鈕'),
),
);
}
小結
今天我們深入探討了 Flutter 中的 ElevatedButton 漂浮按鈕元件，學習了如何使用它的基本功能，包括設定按鈕的顏色、文字、形狀等屬性。希望這些資訊對大家在開發 Flutter 應用程式時有所幫助。
如果這篇文章對你有幫助，別忘了幫我按個讚、分享和訂閱，這是對我最大的支持！我們下次課程再見，掰掰！
