Flutter——按钮

liuian 2025-05-21 14:59 118 浏览

上一节介绍了输入组件，让我们了解了输入框、单选、多选、进度条等部件。为了响应用户的点击或触摸操作，就需要学习一种新的部件-按钮。

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,
),

效果如下：