TextButton组件的功能与用法

我们在上一章回中介绍了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的内容就介绍到这里，欢迎大家在评论区交流与讨论!