一起来学Flutter|Flutter开发日常几种Button的使用（OutlinedButton、ElevatedButton）一起来学Flutter|Flutter

【一起来学Flutter|Flutter开发日常几种Button的使用（OutlinedButton、ElevatedButton）】最近学习Flutter开发，到正式上手公司原有项目重构有段时间了，知识点零零碎碎的，还是在博客里记录更新一下吧，会根据我开发中遇到的内容不断总结更新。

无色背景，有边框的按钮，如下图所示：

文章图片

代码实现如下：

Container( padding: const EdgeInsets.all(14), child: Column( crossAxisAlignment: CrossAxisAlignment.start,//内部组件靠左对其 children: [ Container( margin: const EdgeInsets.only(left: 2), child: Text( '企业征信报告上传', style: const TextStyle( fontSize: 14, color: ColorsUtil.fontColor303133), ), ), Container( margin: const EdgeInsets.only(left: 2, top: 4, bottom: 16), child: const Text( '支持上传CSV、XLSX格式', style: TextStyle(fontSize: 14, color: ColorsUtil.fontColor919399), ), ), SizedBox( width: double.infinity, child: OutlinedButton.icon( icon: const Icon( Icons.add, color: ColorsUtil.brand100Color3376FE, ), onPressed: () { _selectFile(item); }, label: const Text( '上传附件', style: TextStyle( fontSize: 14, color: ColorsUtil.brand100Color3376FE), ), style: OutlinedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), side: const BorderSide( width: 1, color: ColorsUtil.brand100Color3376FE), ), ), ), ], ), )

OutlinedButton可直接使用，也可以加icon的方式在内部添加一个图表，就像我图里面的+号，按钮内部的文字可以在label属性里实现，在style属性里可以通过OutlinedButton.styleFrom来设定边框的样式，比如边框的圆角以及边框的颜色宽度等。

接下来是有背景色的Button，如下图所示：

一起来学Flutter|Flutter开发日常几种Button的使用（OutlinedButton、ElevatedButton）

文章图片

代码实现如下：

Container( width: double.infinity, padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10), child: ElevatedButton( onPressed: () {}, child: const Text( '保存并分析', style: TextStyle(fontSize: 16), ), style: ButtonStyle( shape: MaterialStateProperty.all(RoundedRectangleBorder( borderRadius: BorderRadius.circular(8))), padding: MaterialStateProperty.all( const EdgeInsets.symmetric(vertical: 12)), backgroundColor: MaterialStateProperty.all( ColorsUtil.brand100Color3376FE)), ), )

简单使用如上述所示，在style中通过ButtonStyle来设置相应的按钮形状、边距、背景色都属性。