Flutter 3 基础06: 添加按钮控件

我们已经有了一个不错的，具有导航功能的应用。美中不足的是，每个页面还是空荡荡的，虽然有一些漂亮的颜色。

现在开始，我们就为页面添加一些有用的部件，让页面看起来更有用一些。本文就先增加一个按钮。

启动 Android Studio，打开 hello_world 项目，运行模拟器，这样就可以实时看到编码产生的效果。现在，我们能看到红色的页面。

添加按钮

找到并打开 main.dart 文件，找到下列代码：

dart 复制代码

Container(color: Colors.green),

将其替换为以下代码：

dart 复制代码

Container(
  child:
    MaterialButton(
      onPressed: () { },
      child: const Text('显示'),
    )  
),

在这里，我们去掉了容器的背景色。为容器添加了一个子元素，按钮 MaterialButton。同时，我们对按钮进行了两个配置：

现在来看一下效果。点击部件导航图标，我们会发现，页面上多了一个不像按钮的按钮，更像一个普通文本的展示。

如果你没看到页面的变化，请点击 Android Studio 控制台上的热重启按钮：

接下来，我们对按钮做一个美化，让他看起来更像按钮。

在 main.dart 文件中，找到刚刚添加的下面一行代码：

dart 复制代码

onPressed: () { },

在这一行代码的上面，添加下列代码：

dart 复制代码

textColor: Colors.white,  
color: Colors.green,  
shape: RoundedRectangleBorder(
  borderRadius:BorderRadius.circular(30.0)
),

在这里，我们设置了按钮上文字的颜色为白色，背景色为绿色，并把按钮的边框配置为圆角矩形。

保存文件，点击 Android Studio 控制台上的热重启按钮，我们可以看到，页面上的按钮已经漂亮了很多。

如果我们现在点击显示按钮，应用不会有任何反应。这是因为，我们还没有编写任何处理代码。现在我们希望用户点击按钮时，可以在控制台输出一条信息，知道按钮被点击了。

在 main.dart 文件中，找到下面一行代码：

dart 复制代码

onPressed: () { },

将其替换为下列代码：

dart 复制代码

onPressed: () { print('按钮被点击'); },

保存文件，点击 Android Studio 控制台上的热重启按钮，再点击页面上的显示按钮。查看控制台，会发现以下输出：

bash 复制代码

I/flutter (19721): 按钮被点击

我们已经完成了在页面上添加按钮，又到达了一个小小的里程碑，应该对代码进行提交，保持良好编程习惯。

shell 复制代码

git add .
git commit -m '添加一个按钮。'