【Flutter 學習筆記】ElevatedButton 按鈕元件

【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 的小括號內，我們可以看到兩個必填參數：

1. 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 應用程式時有所幫助。

如果這篇文章對你有幫助，別忘了幫我按個讚、分享和訂閱，這是對我最大的支持！我們下次課程再見，掰掰！