Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。
常见的按钮组件如下：
1. RaisedButton 凸起的按钮；
2. FlatButton 扁平化的按钮；
3. OutlineButton 线框按钮；
4. IconButton 图标按钮；
5. ButtonBar 按钮组；
6. FloatingActionButton 浮动按钮；
按钮组件常见的属性：
1. onPressed 按下按钮时触发的回调方法，为必填参数，如果值为 null 表示禁用按钮，会显示禁用相关样式；
2. child 子组件；
3. textColor 文本颜色；
4. color 按钮的颜色；
5. disabledColor 按钮禁用时的颜色；
6. disabledTextColor 按钮禁用时的文本颜色；
7. splashColor 点击按钮时水波纹的颜色；
8. highlightColor 长按按钮后按钮的颜色；
9. elevation 阴影的范围；
10. padding 内边距；
11. shape 按钮的形状。常用以下两种：
(1). RoundedRectangleBorder() 圆角形；
(2). CircleBorder() 全圆形；
代码示例：
import 'package:flutter/material.dart';
class ButtonPage extends StatelessWidget {
const ButtonPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('按钮页面'),
actions:<Widget>[
IconButton(
icon:Icon(Icons.search),
onPressed: (){
print("图标按钮");
},
)
]
),
// 浮动按钮
floatingActionButton: FloatingActionButton(
child:Icon(Icons.add,color:Colors.blue,size:40,),
// 点击事件
onPressed: (){
print('浮动按钮');
},
// 背景颜色
backgroundColor: Colors.yellow,
),
// 浮动按钮的位置
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child:Text('普通按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
onPressed: (){
print('普通按钮');
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标按钮'),
onPressed: (){
print('图标按钮');
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 通过加外层容器设定尺寸来控制按钮的大小
Container(
width: 140,
height:50,
child: RaisedButton(
child:Text('设置宽高'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
onPressed: (){
print('设置宽高');
},
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 让按钮宽度自适应
Expanded(
// 通过加外层容器设定尺寸来控制按钮的大小
child:Container(
height:80,
margin: EdgeInsets.all(10),
child: RaisedButton(
child:Text('自适应按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
onPressed: (){
print('自适应按钮');
},
),
)
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child:Text('圆角按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
// 圆角
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
onPressed: (){
print('圆角按钮');
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 80,
child: RaisedButton(
child:Text('圆形按钮'),
// 背景颜色
color:Colors.blue,
// 文字颜色
textColor: Colors.white,
// 按钮阴影
elevation: 10,
// 圆角
shape: CircleBorder(
side: BorderSide(color: Colors.black),
),
// 水波纹
splashColor:Colors.red,
onPressed: (){
print('圆形按钮');
},
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text('扁平按钮'),
color:Colors.blue,
textColor: Colors.yellow,
onPressed:(){
print('扁平按钮');
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
OutlineButton(
child: Text('边框按钮'),
textColor: Colors.yellow,
onPressed:(){
print('边框按钮');
},
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ButtonBar(
children:<Widget>[
RaisedButton(
child:Text('按钮组'),
color:Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: (){
print('按钮组');
}
),
RaisedButton(
child:Text('按钮组'),
color:Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: (){
print('按钮组');
}
),
RaisedButton(
child:Text('按钮组'),
color:Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: (){
print('按钮组');
}
)
]
)
],
),
MyButton(text:'自定义按钮',width:60.0,height:40.0,pressed:(){
print('自定义按钮');
})
],
)
);
}
}
// 自定义按钮
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton({this.text='',this.width=80.0,this.height=30.0,this.pressed=0});
@override
Widget build(BuildContext context){
return Container(
width:this.width,
height:this.height,
child: RaisedButton(
child: Text(this.text),
onPressed:this.pressed
)
);
}
}
效果图如下：
用浮动按钮实现类似闲鱼APP的底部导航条效果，以下是代码示例：
import "package:flutter/material.dart";
// 标签切换页
class Tabs extends StatefulWidget {
final index;
Tabs({Key key,this.index=1}) : super(key: key);
_TabsState createState() => _TabsState(this.index);
}
class _TabsState extends State<Tabs>{
// 当前选中标签的下标
int _currentIndex;
// 当前页面数组
List _pageList = [
Center(child:Text("这是首页页面")),
Center(child:Text("这是分类页面")),
Center(child:Text("这是设置页面")),
];
_TabsState(index){
this._currentIndex = index;
}
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
// 为了调整浮动按钮的大小，外层添加容器
floatingActionButton:Container(
height: 70,
width: 70,
padding: EdgeInsets.all(6),
margin:EdgeInsets.only(top:8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(35),
color:Colors.white,
),
child:FloatingActionButton(
child:Icon(Icons.add),
onPressed:(){
// 改变状态
setState(() {
this._currentIndex=1;
});
},
backgroundColor: this._currentIndex==1?Colors.red:Colors.white
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
// 主体
body:this._pageList[this._currentIndex],
// 底部导航条
bottomNavigationBar: BottomNavigationBar(
// 当前菜单下标
currentIndex: this._currentIndex,
// 点击事件,获取当前点击的标签下标
onTap: (int index){
// 改变状态
setState(() {
this._currentIndex=index;
});
},
// 图标大小
iconSize: 30.0,
// 选中图标的颜色
fixedColor: Colors.red,
// 多个标签页的动画效果
type: BottomNavigationBarType.fixed,
items: [
// 只能是BottomNavigationBarItem的类型
BottomNavigationBarItem(
icon:Icon(Icons.home),
label:"首页"
),
BottomNavigationBarItem(
icon:Icon(Icons.category),
label:"分类"
),
BottomNavigationBarItem(
icon:Icon(Icons.settings),
label:"设置"
)
]
),
));
}
}
效果图如下：
