携手创作，一同成长！这是我参与「日新方案 8 月更文挑战」的第6天，点击查看活动概况
前言
很高兴遇见你~
在本系列的上一篇文章中，咱们经过：作用展现 -> Widget 介绍 -> 代码完成的办法对 Image，ListView，GridView，Stack 进行了介绍，并交叉讲解了一些其它 Widget ，最终经过一个归纳事例对学习的 Widget 进行了组合运用。还没有看过上一篇文章的朋友，主张先去阅览 Flutter 系列（四）：Flutter 常用 Widget 二。接下来咱们对 Flutter 按钮 Widget 进行学习
Flutter 中的按钮 Widget 有很多，常见的按钮 Widget 有：RaisedButton，FlatButton，IconButton，OutlineButton，ButtonBar，FloatingActionButton 等，下面就介绍一下这些常用的 Widget
一、Flutter 常用按钮 Widget 介绍
1.1、Flutter 按钮 Widget 通用特点
首先介绍一下，按钮 Widget 都有的一些特点：
| 特点称号 | 特点类型 | 阐明 |
|---|---|---|
| onPressed | VoidCallback | 此项为必填参数，按下按钮时触发的回调，接纳一个办法作为参数，传 null 表明按钮禁用，会显现禁用相关款式 |
| child | Widget | 子控件，一般咱们会运用文本 Widget 来填充 |
| textColor | Color | 文本色彩 |
| color | Color | 按钮布景色彩 |
| disabledColor | Color | 按钮禁用时的布景色彩 |
| disabledTextColor | Color | 按钮禁用时的文本色彩 |
| splashColor | Color | 点击按钮时的水波纹色彩 |
| highlightColor | Color | 长按按钮后按钮的布景色彩 |
| elevation | double | 按钮暗影的规模，值越大暗影规模越大 |
| padding | EdgeInsetsGeometry | 內边距 |
| shape | ShapeBorder | 设置按钮的形状，ShapeBorder 完成类有： RoundedRectangleBorder：圆角形状 CircleBorder：圆形形状 |
介绍完了按钮 Widget 的通用特点，接下来咱们看下每个按钮初始形态的一个作用，在结合这些按钮做一个归纳事例
1.2、RaisedButton
RaisedButton 见名知意：凸起的按钮，其实就是 Flutter 给咱们提供的 Material Design 风格的按钮：
运行如下代码：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Button Widget"), //设置标题栏标题
),
body: MyBodyPage() //自界说 Widget
),
));
}
class MyBodyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
//运用 ListView 让按钮自适应屏幕宽度
return ListView(
//内距离 20
padding: EdgeInsets.all(20),
children: [
//RaisedButton 凸起按钮
RaisedButton(
onPressed:(){},
child: Text("RaisedButton"),
)
],
);
}
}
作用展现：
默认情况下是一个灰色布景的凸起按钮
1.3、FlatButton
FlatButton 见名知意：扁平的按钮，和 RaiseButton 刚好相反，没有凸起的作用。将上述 RaiseButton 换成 FlatButton 作用如下：
能够看到，它没有布景，就像一个文本 Widget 相同
1.4、OutlineButton
OutlineButton 见名知意：带线框的按钮，它就像是 FlatButton 加了一个边框。将上述 RaiseButton 换成 OutlineButton 作用如下：
1.5、IconButton
IconButton 见名知意：带 Icon 的按钮。将上述 RaiseButton 换成 IconButton 并做特点的调整：
IconButton(
icon: Icon(Icons.home),
onPressed:(){},
)
作用如下：
1.6、ButtonBar
ButtonBar 是一个按钮组，咱们能够在它的 children 特点中放入多个按钮，如下代码：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Button Widget"), //设置标题栏标题
),
body: MyBodyPage() //自界说 Widget
),
));
}
class MyBodyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ButtonBar(
//按钮组
children: [
RaisedButton( //RaisedButton
onPressed: () {},
child: Text("RaisedButton"),
),
FlatButton( //FlatButton
onPressed: () {},
child: Text("FlatButton"),
),
OutlineButton( //OutlineButton
onPressed: () {},
child: Text("OutlineButton"),
),
IconButton( //IconButton
icon: Icon(Icons.home),
onPressed: () {},
)
],
);
}
}
作用：
1.7、FloatingActionButton
FloatingActionButton 简称 FAB，能够完成起浮按钮。它常用的一些特点：
| 特点称号 | 特点类型 | 阐明 |
|---|---|---|
| onPressed | VoidCallback | 此项为必填参数，按下按钮时触发的回调，接纳一个办法作为参数，传 null 表明按钮禁用，会显现禁用相关款式 |
| child | Widget | 子控件，一般为 Icon，不引荐运用文字 |
| backgroundColor | Color | 布景色彩 |
| elevation | double | 未点击时分的暗影 |
| highlightElevation | double | 点击时的暗影值，默认为：12.0 |
| shape | ShapeBorder | 界说 FAB 的形状 |
| mini | bool | 是否是 mini 类型，默认为：false |
如下代码：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Button Widget"), //设置标题栏标题
),
body: MyBodyPage() //自界说 Widget
),
));
}
class MyBodyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.all(20),
children: [
FloatingActionButton( //FloatingActionButton 按钮
onPressed: (){},
child: Icon(Icons.search),
backgroundColor: Colors.lightGreen,
elevation: 20,
)
],
);
}
}
作用：
二、Flutter 2.x 按钮 Widget 的改变
如果你是 Flutter 2.x 的版别，你会发现之前的一些按钮 Widget 被抛弃了：
主要是上面这三个按钮的改变，取而代之的是：
| Flutter 1.x 中的按钮 Widget | Flutter 2.x 中的按钮 Widget |
|---|---|
| RaisedButton 凸起按钮 | ElevatedButton 凸起按钮 |
| FlatButton 扁平按钮 | TextButton 扁平按钮 |
| OutlinedButton 线框按钮 | OutlinedButton 线框按钮 |
另外在 1.x 中设置的一系列特点，如：color，textColor，elevation，shape等在 2.x 中都被封装到了 style 特点中，style 特点接纳一个 ButtonStyle 类型的对象，介绍一下 ButtonStyle 中的常用特点：
| 特点称号 | 特点类型 | 阐明 |
|---|---|---|
| textStyle | MaterialStateProperty | 文本的款式 可是对于色彩是不起作用的 |
| backgroundColor | MaterialStateProperty | 按钮布景色 |
| foregroundColor | MaterialStateProperty | 文本及图标色彩 |
| overlayColor | MaterialStateProperty | 高亮色，按钮处于 focused，hovered or pressed 时的色彩 |
| shadowColor | MaterialStateProperty | 暗影色彩 |
| elevation | MaterialStateProperty | 按钮暗影的规模，值越大暗影规模越大 |
| padding | MaterialStateProperty | 按钮内边距 |
| minimumSize | MaterialStateProperty | 按钮最小值 |
| fixedSize | MaterialStateProperty | 按钮巨细 |
| maximumSize | MaterialStateProperty | 按钮最大值 |
| side | MaterialStateProperty | 边框 |
| shape | MaterialStateProperty | 设置按钮的形状 |
| alignment | AlignmentGeometry | 按钮子 Widget 对齐办法 |
实践比照：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Button Widget"), //设置标题栏标题
),
body: MyBodyPage() //自界说 Widget
),
));
}
class MyBodyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: EdgeInsets.all(20),
children: [
RaisedButton( //RaisedButton
onPressed: (){},
child: Text("RaisedButton"),
textColor: Colors.white, //文本色彩
color: Colors.green, //按钮布景色彩
splashColor: Colors.red, //水波纹色彩
elevation: 20, //暗影的规模
shape: RoundedRectangleBorder( //设置 20 的圆角
borderRadius: BorderRadius.circular(20)
)
),
SizedBox(height: 40),
ElevatedButton( //ElevatedButton
onPressed: (){},
child: Text("ElevatedButton"),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.white), //文本色彩
backgroundColor: MaterialStateProperty.all(Colors.green), //按钮布景色彩
overlayColor: MaterialStateProperty.all(Colors.red), //水波纹色彩
elevation: MaterialStateProperty.all(20), //暗影的规模
shape: MaterialStateProperty.all(//设置 20 的圆角
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
)
)
),
)
],
);
}
}
作用：
三、按钮 Widget 组合之归纳事例
在讲归纳事例之前咱们先学习下 BottomNavigationBar ，一会会用到
3.1、BottomNavigationBar 介绍
BottomNavigationBar 是 Flutter 给咱们提供的底部导航栏 Widget，一般用在 Scaffold 的 bottomNavigationBar 特点中
BottomNavigationBar 常用特点介绍：
| 特点称号 | 特点类型 | 阐明 |
|---|---|---|
| items | List | 必须特点，最少要有两个子 Widget |
| onTap | ValueChanged | Widget 点击事情 |
| currentIndex | int | 当时显现的是哪个 Widget |
| elevation | double | 暗影规模 |
| type | BottomNavigationBarType | BottomNavigationBarType.fixed：固定 BottomNavigationBarType.shifting：可滑动 |
| fixedColor | Color | 相当于 selectedItemColor，可是不能跟 selectedItemColor 同时存在 |
| backgroundColor | Color | 布景色彩 |
| iconSize | double | 设置图标巨细 |
| selectedItemColor | Color | 设置 Widget 选中的色彩 |
| unselectedItemColor | Color | 设置 Widget 未选中的色彩 |
| selectedFontSize | double | 设置 Widget 选中时文字的巨细 |
| unselectedFontSize | double | 设置 Widget 未选中时文字的巨细 |
运行下面代码：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Button Widget"), //设置标题栏标题
),
bottomNavigationBar: MyBottomNavigationBar(),
),
));
}
class MyBottomNavigationBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
iconSize: 35, //图标巨细 35
fixedColor: Colors.green, //图片色彩绿色
type: BottomNavigationBarType.fixed, //item 固定显现
items: [ //设置了 3 个 子 item
BottomNavigationBarItem(icon: Icon(Icons.home), label: "主页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
]);
}
}
作用：
3.2、归纳事例
接下来咱们就运用按钮 Widget 组合来完成如下作用：
简单的剖析下这个页面：最外层有个内距离（Padding），接下来就是一个从上往下排列的笔直布局（Column），笔直布局里面有一系列运用 button 完成的按钮，简单起见，咱们这儿运用 Flutter 1.x 系列的 Button 去完成，最终底部有一个 BottomNavigationBar，BottomNavigationBar 中心有一个凸起的 FloatingActionButton，相似咸鱼中心发布按钮的作用。
接下来，咱们就用代码完成一下：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Flutter Button Practice"), //设置标题栏标题
),
body: MyBodyPage(), //自界说 body Wdiget
bottomNavigationBar: MyBottomNavigationBar(), //自界说 bottomNavigationBar Widget
floatingActionButton: MyFloatingActionButton(), //自界说 floatingActionButton Widget
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //floatingActionButton 在底部中心停靠
),
));
}
//自界说 BottomNavigationBar
class MyBottomNavigationBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
iconSize: 35, //图标巨细 35
fixedColor: Colors.green, //选中色彩为绿色
type: BottomNavigationBarType.fixed, //item 固定显现
items: [ //设置了 3 个 子 item
BottomNavigationBarItem(icon: Icon(Icons.home), label: "主页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置")
]);
}
}
//自界说 FloatingActionButton
class MyFloatingActionButton extends StatelessWidget{
@override
Widget build(BuildContext context) {
//运用 Container 包裹 FloatingActionButton 在外层加一个白色的边框
return Container(
width: 80,
height: 80,
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40)
),
child: FloatingActionButton(
backgroundColor: Colors.yellow,
onPressed: (){},
child: Icon(Icons.add),
),
);
}
}
class MyBodyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(//Padding 完成内距离 20
padding: EdgeInsets.all(20),
child: Column(
children: [
Row( //第一排：一般按钮 + 赤色按钮 + 带暗影的按钮
children: [
RaisedButton(
onPressed: (){},
child: Text("一般按钮"),
),
SizedBox(width: 20),
RaisedButton(
onPressed: (){},
child: Text("赤色按钮"),
color: Colors.red,
textColor: Colors.white,
),
SizedBox(width: 20),
RaisedButton(
onPressed: (){},
child: Text("带暗影的按钮"),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
)
],
),
SizedBox(height: 20),
Container( //第二排：自适应按钮
height: 60,
width: double.infinity,
child: RaisedButton(
onPressed: () {},
child: Text("自适应按钮"),
textColor: Colors.white,
color: Colors.blue,
),
),
SizedBox(height: 20),
Row(children: [ //第三排：icon 按钮 + 有宽高的按钮
RaisedButton.icon(
onPressed: (){},
icon: Icon(Icons.home),
label: Text(" Icon 按钮"),
color: Colors.yellow,
textColor: Colors.green,
),
SizedBox(width: 20),
Container(
height: 60,
width: 200,
child: RaisedButton(
onPressed: () {},
child: Text("有宽高的按钮"),
textColor: Colors.white,
color: Colors.orange,
),
)
]),
SizedBox(height: 20),
Container( //第四排：自适应带圆角的按钮
height: 60,
width: double.infinity,
child: RaisedButton(
onPressed: () {},
child: Text("自适应带圆角的按钮"),
textColor: Colors.white,
color: Colors.blue,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100)
),
),
),
SizedBox(height: 20),
Container( //第五排：圆形按钮
height: 100,
width: 150,
child: RaisedButton(
onPressed: () {},
child: Text('圆形按钮'),
textColor: Colors.white,
color: Colors.lightGreen,
elevation: 20,
splashColor: Colors.green,
shape: CircleBorder(side: BorderSide(color: Colors.white)),
),
),
SizedBox(height: 20),
Container( //第六排：注册按钮
width: double.infinity,
height: 50,
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
child: OutlineButton(
child: Text("注册"),
onPressed: (){},
borderSide: BorderSide(
width: 1,
color: Colors.red
),
),
),
SizedBox(height: 20),
Container( //第七排：登陆按钮
width: double.infinity,
height: 50,
margin: EdgeInsets.fromLTRB(20, 0, 20, 0),
child: RaisedButton(
child: Text("登陆"),
onPressed: (){},
color: Colors.blue,
textColor: Colors.white,
),
)
],
),
);
}
}
四、总结
本篇咱们讲了：
1、Flutter 中常用的按钮 Widget ：RaisedButton，FlatButton，IconButton，OutlineButton，ButtonBar，FloatingActionButton
2、介绍了 Flutter 1.x 和 Flutter 2.x 按钮相关的改变及运用
Flutter 2.x 中常用的特点都被封装到了 style 特点中
3、介绍了 BottomNavigationBar，并经过 Flutter 1.x 相关 Button + BottomNavigationBar + FloatingActionButton 完成了一个归纳事例
好了，本篇文章到这儿就完毕了，希望能给你带来协助
感谢你阅览这篇文章
下篇预告
下篇文章我会介绍 Flutter 表单相关 Widget ，尽请期待吧
参阅和引荐
Flutter 教程：通俗易懂的 Flutter 入门教程
你的点赞，评论，是对我巨大的鼓励！
欢迎关注我的大众号： sweetying ，文章更新可第一时间收到
如果有问题，大众号内有加我微信的进口，在技能学习、个人成长的道路上，咱们一同行进！
