一、基本介绍
Flutter 里有很多的 Button 组件很多，常见的按钮组件有:
- RaisedButton ：凸起的按钮，其实就是 Material Design 风格的 Button
- FlatButton ：扁平化的按钮
- OutlineButton ：线框按钮
- IconButton ：图标按钮
- ButtonBar ：按钮组
- FloatingActionButton ：浮动按钮
二、常用属性
| 属性名称 | 值类型 | 属性值 |
|---|---|---|
| onPressed | VoidCallback | 必填参数，按下按钮时触发的回调，接收一个 方法，传 null 表示按钮禁用，会显示禁用相关 样式 |
| child | Widget | 文本控件 |
| color | Color | 按钮的颜色 |
| disabledColor | Color | 按钮禁用时的颜色 |
| disabledTextColor | Color | 按钮禁用时的文本颜色 |
| splashColor | Color | 点击按钮时水波纹的颜色 |
| highlightColor | Color | 点击（长按）按钮后按钮的颜色 |
| elevation | double | 阴影的范围，值越大阴影范围越大 |
| padding | 内边距 | |
| shape | 设置按钮的形状 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10) ) shape: CircleBorder( side: BorderSide( color: Colors.white ) ) |
三、示例实现
import 'package:flutter/material.dart';
class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("按钮演示页面")
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('普通按钮'),
onPressed: () {
print('点击了普通按钮');
}
),
SizedBox(width: 20),
RaisedButton(
child: Text('有颜色的按钮'),
textColor: Colors.white,
color: Colors.blue,
onPressed: () {
print('点击了有颜色的按钮');
}
),
SizedBox(width: 20),
RaisedButton(
child: Text('阴影按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onPressed: () {
print('点击了阴影按钮');
}
)
]
),
SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 60,
width: 200,
child: RaisedButton(
child: Text('有宽高的按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onPressed: () {
print('点击了有宽高的按钮');
}
)
)
]
),
SizedBox(height: 40),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(20),
child: RaisedButton(
child: Text('全屏按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
onPressed: () {
print('点击了全屏按钮');
}
)
)
)
]
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(20),
child: RaisedButton(
child: Text('带圆角的按钮'),
textColor: Colors.white,
color: Colors.blue,
elevation:10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
onPressed: () {
print('点击了带圆角的按钮');
}
)
)
)
]
)
]
)
)
);
}
}
三、FloatingActionButton 介绍
FloatingActionButton简称FAB ,可以实现浮动按钮，也可以实现类似闲鱼app的地步凸起导航
| 属性名称 | 属性值 |
|---|---|
| child | 子视图，一般为 Icon，不推荐使用文字 |
| tooltip | FAB 被长按时显示，也是无障碍功能 |
backgroundColor |
背景颜色 |
| elevation | 未点击的时候的阴影 |
hignlightElevation |
点击时阴影值，默认 12.0 |
| onPressed | 点击事件回调 |
| shape | 可以定义 FAB 的形状等 |
| mini | 是否是 mini 类型默认 false |
四、实现闲鱼 app 底部凸起按钮
闲鱼.png
return Scaffold(
appBar: AppBar(
title: Text("Flutter App")
),
floatingActionButton:Container(
height: 80,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.white
),
margin: EdgeInsets.only(top:10),
padding: EdgeInsets.all(8),
child: FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: this._currentIndex == 1? Colors.red : Colors.yellow,
onPressed: (){
// print('点击 1'); setState(() {
this._currentIndex=1;
}
);
}
)
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked
)
