17 Flutter Button按钮组件
Flutter Button按钮组件
1. Button类型
MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等
一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。
RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button
FlatButton：扁平化的按钮
OutlineButton：线框按钮
IconButton：图标按钮
ButtonBar：按钮组
FloatingActionButton：浮动按钮
DropdownButton：下拉框按钮
- MaterialButton 有主题的button，官网不推荐使用此控件，推荐使用它的子类，下面的就是他们的子类，默认大小是 88 * 36 的大小
- RaisedButton 有阴影，圆角的button
- FlatButton 没有阴影 没有圆角 没有边框 ，背景透明
- OutlineButton 没有阴影 ， 有圆角边框的
- IconButton 只有一个Icon的button
- BackButton 一个 Icon 是 返回键头的IconButton，点击会调用 Navigator.maybePop 返回上一个路由 ， 默认长按提示是 back ，且不可去掉
- CloseButton 一个 Icon 是 x（关闭）的IconButton，点击会调用 Navigator.maybePop 返回上一个路由 ，默认长按提示是 back ，且不可去掉
- RawMaterialButton 不适用当前Theme或者ButtonTheme的控件 ， 如果自定义，官方推荐使用这个
- PopupMenuButton 菜单，相当于 android 中的 PopupMenu 和 ios 中的 UIMenuController
- DropdownButton 下拉列表， 相当于 android 中的 Spinner
2.属性
- onPressed: 按下之后松开的回调，也就是所谓的点击事件。其实是当用户手抬起来时的动作
- onHighlightChanged: onPressed!=null 的时候可以看出 相当于用户按下时（高亮） 或者 松开时（不高亮）的监听。
- textColor: 里面文本的颜色
- disabledTextColor: 当状态为 disable的时候 文本的颜色，onpress=null 为disable
注意点 在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ） - color: // 当是 enable （onpress != null） 背景色
- disabledColor: //onpress = null 的时候的颜色（不知道为什么测试不管用）
注意点 在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ） - highlightColor: 当用户 按下高亮时 的颜色
- elevation: Z轴阴影 默认是2 ，当 enable 的时候的阴影
- highlightElevation: 高亮时的阴影 默认是 8 button 被按下的时候
- disabledElevation: 当 disabled （onpress = null） 的阴影 默认是0 ，测试的时候 阴影还是 为0.0,也就是说不管用
注意点 在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ） - minWidth: 最小的宽度 默认是 88 。 在 ButtonTheme 规定的
- height: 高度， 默认是 36 也是在 ButtonTheme 规定的
- child: 包括的子控件
- shape 边框样式
注意点 在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
3.RaisedButton
RaisedButton.icon(
icon: Icon(Icons.search, size: 20),
label: Text('图标按钮'),
color: Colors.blue,
textColor: Colors.white,
// onPressed: null,
onPressed: () {
print("图标按钮");
})
4.定义长方矩形圆角按钮 shape
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onPressed: () {
print("圆角按钮");
}),
5.定义圆形按钮 splashColor为点击时闪烁颜色
Container(
height: 80,
child: RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
splashColor: Colors.red,
shape:
CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print("圆形按钮");
}),
),
6.自定义按钮
MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
print('自定义按钮');
})
//自定义按钮组件
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton(
{this.text = '', this.pressed = null, this.width = 80, this.height = 30});
@override
Widget build(BuildContext context) {
return Container(
height: this.height,
width: this.width,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}
7整体按钮如下
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: ButtonDemo(),
));
}
}
class ButtonDemo extends StatelessWidget {
const ButtonDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("按钮演示页面"),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
)
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text('普通按钮'),
onPressed: () {
print("普通按钮");
},
),
SizedBox(width: 5),
RaisedButton(
child: Text('颜色按钮'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("有颜色按钮");
},
),
SizedBox(width: 5),
RaisedButton(
child: Text('阴影按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("有阴影按钮");
},
),
SizedBox(width: 5),
RaisedButton.icon(
icon: Icon(Icons.search, size: 20),
label: Text('图标按钮'),
color: Colors.blue,
textColor: Colors.white,
// onPressed: null,
onPressed: () {
print("图标按钮");
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
width:200,
child: RaisedButton(
child: Text('宽度高度'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度高度");
},
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(10),
child: RaisedButton(
child: Text('自适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("自适应按钮");
},
),
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onPressed: () {
print("圆角按钮");
}),
Container(
height: 80,
child: RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
splashColor: Colors.red,
shape:
CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print("圆形按钮");
}),
),
FlatButton(
child: Text("按钮"),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {
print('FlatButton');
},
),
SizedBox(width: 10),
OutlineButton(
child: Text("按钮"),
// color: Colors.red, //没有效果
// textColor: Colors.yellow,
onPressed: () {
print('FlatButton');
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
margin: EdgeInsets.all(20),
height: 50,
child: OutlineButton(child: Text("注册"), onPressed: () {}),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ButtonBar(
children: [
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: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
print('自定义按钮');
})
],
)
],
)
],
));
}
}
//自定义按钮组件
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton(
{this.text = '', this.pressed = null, this.width = 80, this.height = 30});
@override
Widget build(BuildContext context) {
return Container(
height: this.height,
width: this.width,
child: RaisedButton(
child: Text(this.text),
onPressed: this.pressed,
),
);
}
}
注意：1.width/height，宽度double.infinity尽量不要使用，使用Expanded代替解决，不然会导致白屏问题，
常见出现地方：column/row/listview/GridView