Flutter中如何使用RaisedButton组件

在Flutter中如何使用RaisedButton组件？我想实现一个简单的按钮点击效果，但不太清楚如何设置按钮的样式、文字以及点击事件。能提供一个完整的使用示例吗？包括如何定义按钮颜色、圆角、文字大小，以及如何处理onPressed事件？

2 回复

在Flutter中，使用RaisedButton组件（已弃用，推荐使用ElevatedButton替代）：

  1. 引入material.dart包。
  2. 在build方法中添加RaisedButton，设置onPressed和child属性。
  3. 可选：自定义颜色、形状等。

示例：

RaisedButton(
  onPressed: () {},
  child: Text('按钮'),
)

更多关于Flutter中如何使用RaisedButton组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，RaisedButton 是一个常用的按钮组件，用于创建带有背景色的凸起按钮。不过，从Flutter 2.0开始，官方推荐使用 ElevatedButton 替代 RaisedButton，因为后者已被标记为过时。以下是两种组件的使用方法：

1. 使用 ElevatedButton（推荐）

ElevatedButton 是 RaisedButton 的现代替代品，用法类似但更灵活。

基本语法：

ElevatedButton(
  onPressed: () {
    // 按钮点击事件
  },
  child: Text('按钮文本'),
)

示例代码：

ElevatedButton(
  onPressed: () {
    print('按钮被点击');
  },
  child: Text('点击我'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue, // 背景色
    foregroundColor: Colors.white, // 文字颜色
    padding: EdgeInsets.all(16),   // 内边距
  ),
)

2. 使用 RaisedButton（过时方法）

如果仍在使用旧版本Flutter，可以按以下方式使用：

RaisedButton(
  onPressed: () {
    print('按钮被点击');
  },
  color: Colors.blue,      // 背景色
  textColor: Colors.white, // 文字颜色
  child: Text('点击我'),
)

主要属性说明：

  • onPressed：必填，按钮点击回调函数。设为 null 时按钮禁用。
  • child：按钮内容，通常是 Text 或 Icon。
  • style（仅 ElevatedButton）：通过 ElevatedButton.styleFrom() 自定义样式。

完整示例

ElevatedButton(
  onPressed: () {
    // 处理点击事件
  },
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
    foregroundColor: Colors.white,
  ),
  child: Text('确认'),
)

建议升级到最新Flutter版本并使用 ElevatedButton，以获得更好的兼容性和功能支持。

回到顶部