Flutter RaisedButton示例

RaisedButton是一个Material Design按钮，它能够帮助用户完成一些特定的交互操作。

在本文中，我们将介绍如何使用Flutter RaisedButton小部件，并提供一些示例代码。

添加RaisedButton to MaterialApp

为了在我们的Flutter应用程序中使用RaisedButton，我们需要首先将它作为子级添加到MaterialApp中。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter RaisedButton示例',
      home: Scaffold(
        appBar: AppBar(
          title: Text('RaisedButton 示例'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {},
            child: Text('点击这里'),
          ),
        ),
      ),
    );
  }
}

这将创建一个包含一个带有文本的RaisedButton的Scaffold

添加onPressed回调

使用RaisedButton，我们可以通过为其提供一个onPressed回调来响应用户的操作。

RaisedButton(
  onPressed: () {
    print('按钮被点击');
  },
  child: Text('点击这里'),
)

当用户按下按钮时，onPressed回调中的代码将被执行。在本例中，我们只是打印了一条消息。

自定义RaisedButton样式

RaisedButton提供了一系列自定义样式，可以让你更改多个按钮外观特征。

例如，你可以更改按钮的颜色、文本颜色和形状。

以下是一个具有自定义颜色和文本颜色的按钮的示例代码：

RaisedButton(
  onPressed: () {},
  textColor: Colors.white,
  color: Colors.blue,
  child: Text('点击这里'),
)

给RaisedButton添加图标

使用RaisedButton，您可以通过将一个图标放置在文本前面来给按钮添加一个漂亮的图标。

RaisedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('添加'),
)

RaisedButton.icon方法可以将图标和标签放在同一行上。

向RaisedButton添加直角

要向RaisedButton添加直角，将shape属性设置为一个RoundedRectangleBorder。

RaisedButton(
  onPressed: () {},
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
  ),
  child: Text('点击这里'),
)

您还可以更改圆角半径以获得您想要的任何形状。

更改RaisedButton大小

通过将height和width属性传递给RaisedButton，您可以更改按钮的大小和形状。

RaisedButton(
  onPressed: () {},
  height: 50,
  minWidth: 150,
  child: Text('点击这里'),
)

这将创建一个高度为50，宽度为150的RaisedButton。

结论

现在您已经掌握了使用RaisedButton小部件的基础知识，您可以开始在Flutter应用程序中使用它了。

记住，RaisedButton是一个非常灵活的小部件，并且提供了大量的自定义样式以及与动画一起平滑过渡的功能。

有关更多Flutter小部件的示例，请查看我们的其他文章！