Flutter 内置按钮介绍及使用

Flutter 提供了多种内置按钮，可以满足不同场景的需求。本文将介绍 Flutter 中常见的按钮类型，以及它们的属性和使用方法。

按钮类型

Flutter 中常见的按钮类型包括：

• ElevatedButton: 凸起按钮，默认带有阴影和灰色背景。
• TextButton: 扁平按钮，默认背景透明并不带阴影。
• OutlineButton: 边框按钮，默认有一个边框，不带阴影且背景透明。
• IconButton: 图标按钮，仅包含一个图标。
• FloatingActionButton: 浮动按钮，通常用于显示在屏幕右下角，执行重要的操作。

按钮属性

Flutter 按钮的通用属性包括：

• onPressed: 点击按钮时触发的回调函数。
• onLongPress: 长按按钮时触发的回调函数。
• child: 按钮的内容，可以是文本、图标或其他 Widget。
• color: 按钮的颜色。
• shape: 按钮的形状。
• elevation: 按钮的阴影高度。
• highlightElevation: 按钮按下时的阴影高度。
• disabledColor: 按钮禁用时的颜色。
• splashColor: 按钮按下时出现的涟漪颜色。

按钮使用示例

以下是使用不同类型按钮的示例：

示例 1：使用 ElevatedButton

ElevatedButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Text('点击'),
),

示例 2：使用 TextButton

TextButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Text('点击'),
),

示例 3：使用 OutlineButton

OutlineButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Text('点击'),
),

示例 4：使用 IconButton

IconButton(
  onPressed: () {
    // 点击按钮时触发
  },
  icon: Icon(Icons.add),
),

示例 5：使用 FloatingActionButton

FloatingActionButton(
  onPressed: () {
    // 点击按钮时触发
  },
  child: Icon(Icons.add),
),

总结

Flutter 提供了多种内置按钮，可以满足不同场景的需求。通过设置不同的属性，可以自定义按钮的外观和行为。