第十回：如何使用 Button Widget

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

概念介绍

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

使用方法

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

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

示例代码

   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的内容就介绍到这里，欢迎大家在评论区交流与讨论!