Flutter按钮

封面图 • 2025-10-25 • Flutter

在 Flutter 中，按钮是通过 `ElevatedButton`、`TextButton`、`OutlinedButton` 等小部件来实现的。下面是一些常用的 Flutter 按钮示例和说明：

---

## ✅ 1. `ElevatedButton`（带阴影的按钮）

这是最常用的一种按钮类型，具有默认的背景色和阴影效果。

```dart
ElevatedButton(
  onPressed: () {
    print("按钮被点击了！");
  },
  child: Text("点击我"),
)
```

---

## ✅ 2. `TextButton`（纯文本按钮）

没有背景色，只有文字，适合用于导航或次要操作。

```dart
TextButton(
  onPressed: () {
    print("文本按钮被点击了！");
  },
  child: Text("文本按钮"),
)
```

---

## ✅ 3. `OutlinedButton`（轮廓按钮）

有边框但没有填充颜色，适合强调不那么重要的操作。

```dart
OutlinedButton(
  onPressed: () {
    print("轮廓按钮被点击了！");
  },
  child: Text("轮廓按钮"),
)
```

---

## ✅ 4. 自定义按钮样式

你可以通过设置 `style` 属性来自定义按钮的颜色、字体、大小等。

```dart
ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue, // 背景色
    foregroundColor: Colors.white, // 文字颜色
    padding: EdgeInsets.symmetric(vertical: 15, horizontal: 30), // 内边距
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10), // 圆角
    ),
  ),
  onPressed: () {
    print("自定义样式按钮");
  },
  child: Text("自定义按钮"),
)
```

---

## ✅ 5. 带图标和文字的按钮

你可以结合 `Icon` 和 `Text` 来创建更丰富的按钮。

```dart
ElevatedButton.icon(
  onPressed: () {
    print("带图标的按钮");
  },
  icon: Icon(Icons.add),
  label: Text("添加"),
)
```

---

## ✅ 6. 禁用按钮

可以通过设置 `onPressed: null` 来禁用按钮。

```dart
ElevatedButton(
  onPressed: null,
  child: Text("禁用按钮"),
)
```

---

如果你需要根据不同的状态（如按下、悬停）改变按钮样式，可以使用 `InkWell` 或 `GestureDetector`，或者使用 `MaterialStateProperty` 来动态设置样式。

---

如果你想了解如何将按钮与页面跳转、表单提交等功能结合起来，也可以告诉我，我可以提供更详细的例子。