上一節介紹了輸入組件，讓我們了解了輸入框、單選、多選、進度條等部件。為了響應用戶的點擊或觸摸操作，就需要學習一種新的部件-按鈕。

Flutter 中有多種類型的按鈕，用於響應用戶的點擊或觸摸操作。接下來將通過其構造方法和代碼demo進行詳細介紹。

TextButton（文本按鈕）

TextButton 是 Flutter 提供的一種按鈕組件，用於在用戶界面中觸發操作或響應用戶的點擊事件。與其他按鈕組件相比，TextButton 最大的特點是它的外觀簡單，僅顯示文本標簽，沒有陰影或填充，通常用於不需要強調的次要操作。

構造方法

TextButton({
  Key? key,
  required VoidCallback onPressed,
  ButtonStyle? style,
  FocusNode? focusNode,
  bool autofocus = false,
  Clip clipBehavior = Clip.none,
  required Widget child,
})

主要參數的說明：

onPressed: 按鈕點擊時觸發的回調函數。
style: 按鈕的樣式，包括背景色、文本樣式等。
focusNode: 用於控制焦點的對象，通常用於處理鍵盤事件。
autofocus: 是否自動獲取焦點。
clipBehavior: 指定如何裁剪子部件的行為。
child: 按鈕上顯示的子部件，通常為 Text 小部件

ButtonStyle 類可以用於自定義按鈕的外觀，包括背景顏色、文本樣式、陰影等。你可以通過 style 參數傳遞自定義的按鈕樣式。

簡單使用

TextButton(
      onPressed: () {},
      child: Text("TextButton按鈕"),
)

效果如下：

總的來說，TextButton 是一種簡單、輕量級的按鈕組件，適用於處理簡單的用戶交互和操作，提供了簡潔明了的界面，使用戶能夠快速理解並執行相應的操作。

ElevatedButton（凸起按鈕）

ElevatedButton 是 Flutter 提供的一種按鈕組件，用於在用戶界面中觸發操作或響應用戶的點擊事件。與 TextButton 不同，ElevatedButton 具有凸起的外觀，通常用於強調主要操作或重要的用戶交互。通過 ElevatedButton，你可以在按鈕上顯示文本，並通過指定的回調函數處理按鈕的點擊事件。

構造方法

ElevatedButton({
  Key? key,
  required VoidCallback onPressed,
  ButtonStyle? style,
  FocusNode? focusNode,
  bool autofocus = false,
  Clip clipBehavior = Clip.none,
  required Widget child,
})

主要參數的說明：

onPressed: 按鈕點擊時觸發的回調函數。
style: 按鈕的樣式，包括背景顏色、文本樣式等。
focusNode: 用於控制焦點的對象，通常用於處理鍵盤事件。
autofocus: 是否自動獲取焦點。
clipBehavior: 指定如何裁剪子部件的行為。
child: 按鈕上顯示的子部件，通常為 Text 小部件。

簡單使用

ElevatedButton(
     child: Text("愛你"),
     onPressed: () {},
);

效果如下：

總的來說，ElevatedButton 是一種具有突出外觀的按鈕組件，適用於處理重要的用戶交互和操作，提供了明確的界面指引，使用戶能夠快速執行重要的操作。

OutlinedButton（輪廓按鈕）

OutlinedButton 是 Flutter 提供的一種按鈕組件，與 ElevatedButton 和 TextButton 不同，OutlinedButton 的外觀為帶有邊框但沒有填充色的按鈕。它通常用於次要操作或取消操作，以及在需要強調邊框而不是填充顏色的情況下使用。

構造方法

  Key? key,
  required VoidCallback onPressed,
  ButtonStyle? style,
  FocusNode? focusNode,
  bool autofocus = false,
  Clip clipBehavior = Clip.none,
  required Widget child,
})

主要參數的說明：

onPressed: 按鈕點擊時觸發的回調函數。
style: 按鈕的樣式，包括邊框顏色、文本樣式等。
focusNode: 用於控制焦點的對象，通常用於處理鍵盤事件。
autofocus: 是否自動獲取焦點。
clipBehavior: 指定如何裁剪子部件的行為。
child: 按鈕上顯示的子部件，通常為 Text 小部件。

簡單使用

OutlinedButton(
     child: Text("愛你"),
     onPressed: () {},
);

效果如下：

IconButton（圖標按鈕）

IconButton 是 Flutter 提供的一種按鈕組件，用於在用戶界面中觸發操作或響應用戶的點擊事件。與其他按鈕組件不同，IconButton 僅包含一個圖標，通常用於觸發與圖標相關的操作。

構造方法

IconButton({
  Key? key,
  required IconData icon,
  double iconSize = 24.0,
  Color? color,
  Color? splashColor,
  Color? highlightColor,
  double? splashRadius,
  Color? disabledColor,
  double? padding,
  VisualDensity? visualDensity,
  AlignmentGeometry alignment = Alignment.center,
  EdgeInsetsGeometry? padding,
  AlignmentGeometry? alignment,
  FocusNode? focusNode,
  bool autofocus = false,
  EdgeInsetsGeometry? padding,
  Clip clipBehavior = Clip.none,
  required void Function()? onPressed,
})

主要參數的說明：

icon: 按鈕上顯示的圖標。
iconSize: 圖標的大小，默認為 24.0。
color: 圖標的顏色。
splashColor: 按鈕按下時的水波紋顏色。
highlightColor: 按鈕按下時的高亮顏色。
splashRadius: 水波紋的半徑。
disabledColor: 按鈕禁用時的顏色。
padding: 按鈕的內邊距。
visualDensity: 按鈕的視覺密度。
alignment: 按鈕的對齊方式。
focusNode: 用於控制焦點的對象。
autofocus: 是否自動獲取焦點。
onPressed: 按鈕點擊時觸發的回調函數。

簡單使用

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

效果如下：

FloatingActionButton（浮動操作按鈕）

FloatingActionButton 是 Flutter 提供的一種特殊按鈕組件，通常位於界面的固定位置，並具有突出的樣式。它用於觸發應用程序中的主要操作，例如添加、新建、分享等。

構造方法

FloatingActionButton({
  Key? key,
  required Widget child,
  Color? backgroundColor,
  Color? foregroundColor,
  Object? heroTag,
  double elevation = 6.0,
  double disabledElevation = 0.0,
  VoidCallback? onPressed,
  MouseCursor? mouseCursor,
  String? tooltip,
  bool isExtended = false,
  ShapeBorder? shape,
  Clip? clipBehavior,
  FocusNode? focusNode,
  bool autofocus = false,
  String? focusColor,
  String? hoverColor,
  String? highlightElevation,
  String? splashColor,
  Color? focusElevation,
  Color? hoverElevation,
  double? focusSizeAdjustment,
  double? hoverSizeAdjustment,
  double? splashRadius,
})

主要參數的說明：

child: 按鈕上顯示的小部件，通常為圖標。
backgroundColor: 按鈕的背景顏色。
foregroundColor: 按鈕內部小部件的前景顏色。
heroTag: 用於指定按鈕的語義標簽。
elevation: 按鈕的突起高度。
disabledElevation: 按鈕禁用時的凸起高度。
onPressed: 按鈕點擊時觸發的回調函數。
tooltip: 按鈕的提示信息。
isExtended: 是否為擴展型按鈕。
shape: 按鈕的形狀。
clipBehavior: 按鈕的裁剪行為。
focusNode: 用於控制焦點的對象。
autofocus: 是否自動獲取焦點。
splashRadius: 水波紋的半徑。

簡單使用

floatingActionButton: FloatingActionButton(
  onPressed: () => print("FloatingActionButton"),
  child: IconButton(icon: Icon(Icons.add), onPressed: () {}),
  tooltip: "我是一個浮動按鈕",
  foregroundColor: Colors.white,
  backgroundColor: Colors.blue,
  // elevation: 6.0,
  // highlightElevation: 12.0,
  shape: CircleBorder()),

效果如下：

帶圖標按鈕

ElevatedButton、TextButton、OutlinedButton都有一個icon 構造函數，通過它可以輕松創建帶圖標的按鈕。

簡單使用

ElevatedButton.icon(
  icon: Icon(Icons.send),
  label: Text("發送"),
  onPressed: _onPressed,
),
OutlinedButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: _onPressed,
),
TextButton.icon(
  icon: Icon(Icons.info),
  label: Text("詳情"),
  onPressed: _onPressed,
),

效果如下：

小結

Flutter 中常見的按鈕組件的簡單總結：

TextButton（文本按鈕）:

適合簡單的操作，如提交表單、導航等。
外觀簡單，隻包含文本標簽。
可以通過 style 參數自定義樣式。

ElevatedButton（凸起按鈕）:

適合主要操作，如提交重要表單、確認等。
具有凸起的外觀，帶有陰影和填充顏色。
可以通過 style 參數自定義樣式。

OutlinedButton（輪廓按鈕）:

適合次要操作，如取消、返回等。
帶有邊框但沒有填充顏色。
可以通過 style 參數自定義樣式。

IconButton（圖標按鈕）:

適合需要圖標提示的操作，如切換模式、刪除等。
隻包含圖標，沒有文本標簽。
可以通過參數自定義圖標、顏色等。

FloatingActionButton（浮動操作按鈕）:

適合應用程序中的主要操作，如添加、新建等。
通常位於界面的固定位置，具有突出的樣式。
可以包含圖標和標簽，提供更多的上下文信息。

這些按鈕組件提供了各種樣式和行為選項，可以根據應用程序的設計需求和用戶體驗選擇合適的按鈕類型。通過合理的使用和組合，可以構建出直觀、易用的用戶界面，提供良好的用戶體驗。

Flutter——按鈕

TextButton（文本按鈕）

ElevatedButton（凸起按鈕）

OutlinedButton（輪廓按鈕）

IconButton（圖標按鈕）

FloatingActionButton（浮動操作按鈕）

帶圖標按鈕

小結