Button组件的用法

我们在上一章回中介绍了CircleAvatar Widget,本章回中将介绍Button这种Widget，闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

关于Button相信大家都很熟悉，也就是我们常用的按钮。用户按下按钮后程序会触发某种事件。在Flutter中提供子多种Button Widget,我们选取常用的Button来
给大家做介绍，它们是OutlinedButton,ElevatedButton和TextButton。

2. 使用方法

这三种Button都提供了onPressed和child两个命名参数，通过这这两个参数来给Button配置按钮被按下时的事件和按钮上显示的内容。这是它们的相同点，它们的
不同点在于Button的显示形态，通俗点讲就是Button的外观。详细如下：

• OutlinedButton 它自带一个边框，边框中心默认为白色，Button上显示的文字默认为蓝色，我们称它为带边框的Button;
• ElevatedButton 它自带背景，整个Button用默认的蓝色填充，Button上显示的文字默认为白色，我们称它为带填充的Button;
• TextButton 它没有边框也没有填充，整个Button的背景是默认的白色，Button上的文字颜色默认为蓝色，我们称它为普通Button;

3. 示例代码

return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(primaryColor: Colors.blue),

    // Navigator.push(context, SecondRouter,),
    home: Scaffold(
        appBar: AppBar(
          title: const Text("Title of Hello App"),
        ),
        body: Column(
          children: [
            titleSection,
            TextButton(
              onPressed: () {},
              child: const Text(
                "This is Test Button",
                style: TextStyle(
                  color: Colors.black87,
                  fontSize: 24,
                ),
              ),
            ),
            OutlinedButton(
              onPressed: () {},
              child: const Text("OutLineButton"),
            ),
            ElevatedButton(
              onPressed: () {},
              child: Text("ElevatedButton"),
            ),
          ],
        )
        ));

在上面的代码中，我们把这三个Button放到了MaterialApp的body中，其它的代码省略不写。编译并且运行该程序可以在屏幕上看到三个Button从上到下依次排列，
我们在这里就不演示程序的运行效果了，建议大家自己动手去实践。注意：在上面的代码中没有给Button添加具体的事件内容，而是使用了空的方法给onPressed参数
赋值，因此按下Button后程序不会触发事件，不过可以看到Button被点击时的动态效果，这个效果是Button自带的。

看官们，关于Button Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!