Flutter之ElevatedButton詳解

簡介

ElevatedButton 是 Flutter 中一個常用的按鈕元件,是一個功能齊全的 Material Design 按鈕元件,可以用於建立漂亮的UI和良好的使用者體驗，它具有以下主要特性:

樣式:預設情況下,ElevatedButton有一定的邊框陰影和填充顏色,給人一種抬起的3D效果。它的樣式可以透過style和color屬性來自定義。

點選效果:ElevatedButton預設有點選效果,透過highlightColor和splashColor可以自定義點選效果的顏色。

禁用狀態:可以透過enabled屬性設定ElevatedButton的禁用狀態,禁用狀態下按鈕會變灰並失去點選效果。

標籤和圖示:ElevatedButton可以設定文字標籤透過child屬性,也可以包含圖示透過icon屬性。

大小:可以透過minimumSize和padding屬性設定ElevatedButton的大小。

其他屬性:ElevatedButton還有其他屬性如shape、elevation、highlightElevation等來設定按鈕外觀。

一個簡單的ElevatedButton示例:

ElevatedButton(

  onPressed: () {

    print('Pressed');

  },

  child: Text('Click me'),

  style: ElevatedButton.styleFrom(

    primary: Colors.blue, 

    onPrimary: Colors.white,

    shadowColor: Colors.blueAccent,

    elevation: 10,

  ),

)

ElevatedButton(

  onPressed: () {

    print('Pressed');

  },

  child: Text('Click me'),

  style: ElevatedButton.styleFrom(

    primary: Colors.blue, 

    onPrimary: Colors.white,

    shadowColor: Colors.blueAccent,

    elevation: 10,

  ),

)

這個按鈕有藍色填充色和白色文字,設定了10畫素高度的陰影,並且在點選時列印“Pressed”

主要屬性說明:

onPressed:按鈕點選回撥函式,必須設定。

child:按鈕顯示的子元件,通常是Text元件。

style:按鈕的樣式,可以設定顏色、陰影、形狀等。例如:

dart

style: ElevatedButton.styleFrom(

primary: Colors.blue,

onPrimary: Colors.white,

shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),

)

color:按鈕的背景顏色,如果同時設定了style,以style為準。

disabledColor:禁用狀態下的背景顏色。

elevation:陰影高度,預設為2,可以設定為0以去除陰影效果。

highlightElevation:點選狀態下的陰影高度,預設加深了4畫素。

disabledElevation:禁用狀態下的陰影高度,預設為0。

shape:按鈕的形式,可以是圓形、方形或帶圓角的長方形,預設是直角。

padding:按鈕內邊距,可以控制按鈕的大小。

icon:按鈕前面顯示的圖示,child為文字時與文字相鄰顯示。

label:按鈕的文字,過時屬性,現在使用child代替。

splashColor:點選時的水波紋顏色。

highlightColor:按鈕點選時的高亮顏色。

onHighlightChanged:高亮狀態改變時的回撥函式。

enabled:是否啟用按鈕,預設為true,false時按鈕會被禁用。