Flutter控件--MaterialButton、RaisedButton、FlatButton、IconButton 和 PopupMenuButton
flutter控件练习demo地址：githubandroid
button种类
所谓的 button 就是都有 onPressed 属性， 能够点击响应事件的 ， 有点击的效果 ， 若是 onPressed 设置为 null 的话，button 都是 disable 的，同时 button 有 disable 的样式 ， 按下时 有高亮显示ios
- 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
一。 MaterialButton
默认的是一个最小宽度为88，高度为36,有圆角，有阴影，点击的时候高亮，有 onpress 属性的一个控件。能够响应用户点击事件。可是：官方不推荐使用这个，推荐使用它的子类 RaisedButton、FlatButton 和 OutlineButton，若是自定义 button 推荐使用 RawMaterialButtongit
1.1 属性
- 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 ）
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Button"),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// onPressed不能设置null 至关于用户按下时（高亮） 或者 松开时（不高亮）的监听。 也就是 MaterialButton 样式改变时
// onHighlightChanged: (boo) {
// Fluttertoast.showToast(
// msg: "onHighlightChanged改变了", textColor: Colors.white);
// },
child: Text("MaterialButton"),
// 按下以后松开的回调，也就是所谓的点击事件。实际上是当用户手抬起来时的动做
onPressed: () {
Fluttertoast.showToast(
msg: "点击MaterialButton", textColor: Colors.white);
},
// onPressed: null,
// 里面文本的颜色
// textColor: Colors.red,
// 当状态为 disable的时候 文本的颜色，onpress=null 为disable
// 在这里we；
//在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledTextColor: Colors.black,
// 设置边框样式 , 在MaterialButton这里没用 在它子类里面有用
// shape: Border.all(
// width: 10,
// color:Color(0xFFFF0000),
// style: BorderStyle.solid,
// ),
// 当是 enable （onpress != null） 背景 ，有阴影，有圆角
//在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
shape: Border.all(color: Color(0xFFFF0000),style: BorderStyle.solid,width: 2),
color: Colors.grey,
// onpress = null 的时候的颜色（不知道为何无论用）
// 我测试的结果是 当onPress = null 的时候 ，仍是 上面 color 属性的颜色， 只不过是没有阴影，没有圆角而已
// 在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledColor: Colors.amberAccent,
// 当用户 按下高亮时 的颜色
// highlightColor: Colors.red,
// splashColor: Colors.deepPurple,
// colorBrightness: Brightness.light,
// 高度， 阴影 默认是2
elevation: 2,
// 高亮时的阴影 默认是 8 button 被按下的时候
// highlightElevation: 14,
// 当 disabled （onpress = null） 的阴影 默认是0
// 测试的时候 阴影仍是 为0.0
//在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledElevation: 20,
// padding: EdgeInsets.all(20),
// 最小的宽度 默认是 88 。 在 ButtonTheme 规定的
// minWidth: 187,
// 高度， 默认是 36 也是在 ButtonTheme 规定的
// height: 1,
)
],
),
),
);
}
}
复制代码
1.2 RaisedButton
RaisedButton： 属性基本上和上面的父类同样，The [elevation], [highlightElevation], [disabledElevation], 和 [clipBehavior] 必须非空.github
1.2.1 构造方法
- RaisedButton()
- RaisedButton.icon(onPressed,icon,label)// 其实主要是为了让用户弄成左边一个icon 右面一个文字 固然了 这两个都是 Wight，因此均可以
1.2.2 属性
在上面我们知道 disabledTextColor、disabledColor、disabledElevation 和 shape 在这里设置才有效。如今主要讲一下 shape （边框）bash
1.3 FlatButton
FlatButton： 扁平按钮，通常没有阴影，没有边框，且大部分用在 toolbar，dialogs ， 或者 其余内容中 注意点: 必定要设置onPress属性，不然他就是不可点击的app
1.3.1 构造方法
- FlatButton()
- FlatButton.icon(onPressed,icon,label)// 其实主要是为了让用户弄成左边一个icon 右面一个文字 固然了 这两个都是 Wight，因此均可以
1.4 OutlineButton
OutlineButton： 默认有细灰色圆角边框，无阴影，且背景透明，当按下的时候，有默认highlightElevation 和 highColor 。less
1.3.1 构造方法
- OutlineButton()
- OutlineButton.icon(onPressed,icon,label)// 其实主要是为了让用户弄成左边一个icon 右面一个文字 固然了 这两个都是 Wight，因此均可以
1.3.2 独有的属性
- highlightedBorderColor // 按钮高亮时的边框颜色
- disabledBorderColor: // 按钮不可点击时的边框颜色
二。 IconButton
通常用在AppBar.actions 中，固然其余地方也可使用， [icon] 属性必须指定，通常都 Icon 或者 ImageIcon 。 响应点击的时候，是一个大圆ide
2.1 属性
- iconSize = 24.0icon的大小
- padding = const EdgeInsets.all(8.0) 围绕在 icon 周围的 padding ， 周围的padding也能够响应点击事件，手势事件
- alignment = Alignment.centericon 在 IconButton 中的位置
- icon必须的参数 通常是 Icon 或者是 ImageIcono
- coloricon的颜色 。 注意 不是背景色， 就是icon的颜色
- highlightColor 高亮时的背景颜色
- splashColor按下瞬间的颜色 加入从手指按下以后 先是 splashColor而后再是 highlightColor
- disabledColor 当disable的时候 icon 颜色
- onPressed 点击事件
- tooltip 长按的提示
三 PopupMenuButton
PopupMenuButton 至关于 android 中的 PopupMenu 和 ios 中的 UIMenuController ,测试
3.1 属性
- itemBuilder 每一个条目
- initialValue // 初始的value ， 就是打开的时候， 在这个value 里面会有不一样的样式，让你知道当前值
- onSelected选择时的回调
- onCanceled点击返回键，或者是点击外部， popupmenu关闭时的回调
- tooltip 默认有长按tip 是
- elevation = 8.0 弹出来的时候的阴影高度
- padding = const EdgeInsets.all(8.0)
- child icon 和 child 不能同时设置， 不然报错
- icon icon 和 child 不能同时设置， 不然报错
- offset = Offset.zero 根据当前控件，向右向下平移。默认是跟当前控件的左上角对齐
3.2 注意点
icon 和 child 不能同时设置， 不然报错，若是都没有设置，flutter会根据不一样的平台 给一个icon ，android 中是三个点，child 不要设置有（onpress属性）点击事件的 控件,好比 FlatButton 等等，由于影响 PopupMenuButton的点击事件ui
三 总体demo图片
四 总体代码
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Button"),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// onPressed不能设置null 至关于用户按下时（高亮） 或者 松开时（不高亮）的监听。 也就是 MaterialButton 样式改变时
// onHighlightChanged: (boo) {
// Fluttertoast.showToast(
// msg: "onHighlightChanged改变了", textColor: Colors.white);
// },
child: Text("MaterialButton"),
// 按下以后松开的回调，也就是所谓的点击事件。实际上是当用户手抬起来时的动做
onPressed: () {
Fluttertoast.showToast(
msg: "点击MaterialButton", textColor: Colors.white);
},
// onPressed: null,
// 里面文本的颜色
// textColor: Colors.red,
// 当状态为 disable的时候 文本的颜色，onpress=null 为disable
// 在这里we；
//在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledTextColor: Colors.black,
// 设置边框样式 , 在MaterialButton这里没用 在它子类里面有用
// shape: Border.all(
// width: 10,
// color:Color(0xFFFF0000),
// style: BorderStyle.solid,
// ),
// 当是 enable （onpress != null） 背景 ，有阴影，有圆角
//在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
shape: Border.all(
color: Color(0xFFFF0000), style: BorderStyle.solid, width: 2),
color: Colors.grey,
// onpress = null 的时候的颜色（不知道为何无论用）
// 我测试的结果是 当onPress = null 的时候 ，仍是 上面 color 属性的颜色， 只不过是没有阴影，没有圆角而已
// 在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledColor: Colors.amberAccent,
// 当用户 按下高亮时 的颜色
// highlightColor: Colors.red,
// splashColor: Colors.deepPurple,
// colorBrightness: Brightness.light,
// 高度， 阴影 默认是2
elevation: 2,
// 高亮时的阴影 默认是 8 button 被按下的时候
// highlightElevation: 14,
// 当 disabled （onpress = null） 的阴影 默认是0
// 测试的时候 阴影仍是 为0.0
//在这里无效 在它子类有效（RaisedButton ，FlatButton ，OutlineButton ）
// disabledElevation: 20,
// padding: EdgeInsets.all(20),
// 最小的宽度 默认是 88 。 在 ButtonTheme 规定的
// minWidth: 187,
// 高度， 默认是 36 也是在 ButtonTheme 规定的
// height: 1,
)
],
),
),
);
}
}
class RaiseButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Button"),
centerTitle: true,
),
body: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
child: Text("MaterialButton"),
// 按下以后松开的回调，也就是所谓的点击事件。实际上是当用户手抬起来时的动做
onPressed: () {
Fluttertoast.showToast(
msg: "点击MaterialButton", textColor: Colors.white);
},
// shape: Border.all(
// // 设置边框样式
// width: 10,
// color:Color(0xFFFF0000),
// style: BorderStyle.solid,
// ),
shape: Border.all(
color: Color(0xFFFF0000),
style: BorderStyle.solid,
width: 10),
color: Colors.grey,
elevation: 2,
),
RaisedButton(
disabledColor: Colors.blue,
onPressed: () {
Fluttertoast.showToast(
msg: "点击RaisedButton", textColor: Colors.white);
},
child: Text("RaisedButton 方式1"),
),
Row(
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: Border.all(
color: Colors.red, width: 2, style: BorderStyle.solid),
),
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red,
width: 2,
style: BorderStyle.solid),
borderRadius: BorderRadius.all(Radius.circular(5))),
),
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: StadiumBorder(
side: BorderSide(
color: Colors.red, width: 2, style: BorderStyle.solid),
),
),
RaisedButton(
onPressed: () {},
child: Text("1"),
shape: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
style: BorderStyle.solid,
width: 2))),
],
),
RaisedButton.icon(
onPressed: () {
Fluttertoast.showToast(
msg: "点击RaisedButton", textColor: Colors.white);
},
icon: Icon(Icons.add),
label: Text("RaisedButton.icon的方式"),
// 一个矩形边框
// shape: Border.all(
// width: 2,
// color: Colors.red,
// style: BorderStyle.solid,
// ),
// 能够设置四个角的弧度的边框
// shape: RoundedRectangleBorder(
// side: BorderSide(
// width: 2,
// color: Colors.red,
// style: BorderStyle.solid,
// ),
// borderRadius: BorderRadius.all(Radius.circular(5)),
// ),
// 只有下面一个边框
// shape: UnderlineInputBorder( borderSide:BorderSide(color: Colors.red, style: BorderStyle.solid, width: 2)),
// 圆形边框（这里会裁剪他）
// shape: CircleBorder(side: BorderSide(color: Colors.red, style: BorderStyle.solid, width: 2))
// 把高或者宽弄成半圆
// shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))),
// 剪切四个角
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
side: BorderSide(
color: Colors.red,
style: BorderStyle.solid,
width: 2))),
FlatButton(
child: Text("flatbutton"),
color: Colors.blue,
onPressed: () {}),
OutlineButton(
disabledBorderColor: Colors.grey,
highlightedBorderColor: Colors.red,
child: Text("outlinebuton"),
onPressed: () {},
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconButton(
// 必须的参数 通常是 Icon 或者是 ImageIcono
// icon: Icon(Icons.add),
icon: Icon(Icons.add),
// 点击事件
onPressed: () {},
// 按钮不可点击时的颜色
disabledColor: Colors.red,
//icon 的大小
iconSize: 40,
// 围绕在 icon 周围的 padding ， 周围的padding也能够响应点击事件，手势事件
padding: EdgeInsets.all(0),
// icon 在 IconButton 中的位置
alignment: Alignment.center,
// icon 的颜色 若是里面是 Text ，text的颜色不会改变 注意 不是背景色， 就是icon的颜色
color: Colors.red,
// 高亮时的背景颜色
highlightColor: Colors.blue,
// 按下瞬间的颜色 加入从手指按下以后 先是 splashColor而后再是 highlightColor
splashColor: Colors.black,
// 默认没有长按提示
tooltip: "长按的提示"),
// 就是一个iconbutton 设置了一返回箭头的icon
BackButton(),
// 就是一个iconbutton 设置了一 x 关闭的icon
CloseButton(),
],
),
PopupMenuButton(
// 初始的value ， 就是打开的时候， 在这个value 里面会有不一样的样式，让你知道当前值
// initialValue: "item1",
// 点击返回键，或者是点击外部， popupmenu关闭时的回调
onCanceled: () {
Fluttertoast.showToast(msg: "取消选择了", textColor: Colors.white);
},
// 选择时的回调
onSelected: (String value) {
Fluttertoast.showToast(
msg: "选择的值是：$value", textColor: Colors.white);
},
// 若是 icon 和 child 属性都没有设置值，flutter会根据不一样的平台 给一个icon ，android 中是三个点
// icon 和 child 不能同时设置， 不然报错
icon: Icon(Icons.menu),
// child: Text("打开"), 不要设置有点击事件的 控件,好比 FlatButton 等等，由于影响 PopupMenuButton的点击事件
// 当前 控件 向左 向下平移
offset: Offset(-20, 50.0),
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
PopupMenuItem(
value: "item1",
child: Row(children: <Widget>[
Icon(Icons.delete),
Text("删除")
])),
PopupMenuItem(
value: "item2",
child: Row(
children: <Widget>[Icon(Icons.add), Text("加好友")]),
//是否能够选择
enabled: true,
),
]),
],
),
),
);
}
}
复制代码
相关文章
- 1. Flutter控件--MaterialButton、RaisedButton、FlatButton、IconButton 和 PopupMenuButton
- 2. Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）
- 3. Flutter RaisedButton、FlatButton、OutlineButton 参数详解
- 4. 【Flutter 1-17】Flutter手把手教程UI控件——【多图预警】按钮RaisedButton、FlatButton、OutlineButton。
- 5. flutter控件之弹出菜单PopupmenuButton控件
- 6. Flutter系列文章：Flutter RaisedButton控件介绍
- 7. Flutter 系列文章：Flutter RaisedButton 控件介绍
- 8. flutter FlatButton有间隔
- 9. 你知道吗，Flutter内置了10多种Button控件
- 10. Flutter UI - button系 Widget
- 更多相关文章...
- • ASP.NET HtmlTableRow 控件 - ASP.NET 教程
- • ASP.NET HtmlTableCell 控件 - ASP.NET 教程
- • IntelliJ IDEA 代码格式化配置和快捷键
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Flutter控件--MaterialButton、RaisedButton、FlatButton、IconButton 和 PopupMenuButton
- 2. Flutter基础Widget之按钮（RaisedButton、FlatButton、OutlineButton，IconButton）
- 3. Flutter RaisedButton、FlatButton、OutlineButton 参数详解
- 4. 【Flutter 1-17】Flutter手把手教程UI控件——【多图预警】按钮RaisedButton、FlatButton、OutlineButton。
- 5. flutter控件之弹出菜单PopupmenuButton控件
- 6. Flutter系列文章：Flutter RaisedButton控件介绍
- 7. Flutter 系列文章：Flutter RaisedButton 控件介绍
- 8. flutter FlatButton有间隔
- 9. 你知道吗，Flutter内置了10多种Button控件
- 10. Flutter UI - button系 Widget