你知道吗,Flutter内置了10多种Button控件
注意:无特殊说明,flutter版本及dart版本如下:
- flutter版本: 1.12.13+hotfix.5
- dart版本: 2.7.0
flutter内置了10多种button(按钮)类控件供我们使用,了解这些控件有助于提高我们的开发速度。
raisedbutton
raisedbutton是一个material风格”凸起“的按钮,基本用法:
raisedbutton( child: text('button'), onpressed: (){ }, )
效果:
onpressed
为null或不设置时,按钮是禁用状态。
onhighlightchanged
为高亮变化回调,按下时处于高亮状态,抬起处于不高亮状态,用法如下:
raisedbutton( onhighlightchanged: (high){ }, ... )
按钮可以设置字体及各种状态颜色,总结如下:
属性 | 说明 |
---|---|
textcolor | 字体颜色 |
disabledtextcolor | 禁用状态下字体颜色 |
color | 背景颜色 |
disabledcolor | 禁用状态下背景颜色 |
highlightcolor | 高亮颜色,按下时的颜色 |
splashcolor | 水波纹颜色,按下松开会有水波纹效果 |
以textcolor为例,用法如下:
raisedbutton( textcolor: colors.red, ... )
也可以通过texttheme设置字体样式,用法如下:
raisedbutton( texttheme: buttontexttheme.primary, ... )
buttontexttheme的值介绍如下:
- normal:黑色或者白色字体,依赖于
themedata.brightness
- accent:字体颜色依赖于
themedata.accentcolor
- primary :字体颜色依赖于
themedata.primarycolor
这3个值在materialapp控件中进行全局设置,设置如下:
materialapp( title: 'flutter demo', theme: themedata( primarycolor: color(0xff42a5f5), accentcolor: colors.yellow, brightness: brightness.light ), ... )
设置按钮阴影、高亮阴影、禁用阴影,用法如下:
raisedbutton( elevation: 5.0, highlightelevation: 5.0, disabledelevation: 5.0, ... )
shape
设置按钮的形状,比如设置为圆形,代码如下:
raisedbutton( shape: circleborder(), ... )
效果如下:
和hover
相关的属性是指鼠标悬停时的状态,移动端没有效果,focus
相关的属性为获取焦点时的状态。
flatbutton
flatbutton是一个扁平的按钮,用法和raisedbutton一样,代码如下:
flatbutton( child: text('button'), color: colors.blue, onpressed: () {}, )
效果如下:
outlinebutton
outlinebutton 是一个带边框的按钮,用法和raisedbutton一样,代码如下:
outlinebutton( child: text('button'), onpressed: () {}, )
效果如下:
设置其边框样式,代码如下:
outlinebutton( borderside: borderside(color: colors.blue,width: 2), disabledbordercolor: colors.black, highlightedbordercolor: colors.red, child: text('button'), onpressed: () {}, )
效果如下:
dropdownbutton
dropdownbutton为下拉选择按钮,基本用法如下:
var _dropvalue = '语文'; _buildbutton() { return dropdownbutton( value: _dropvalue, items: [ dropdownmenuitem(child: text('语文'),value: '语文',), dropdownmenuitem(child: text('数学'),value: '数学'), dropdownmenuitem(child: text('英语'),value: '英语'), ], onchanged: (value){ setstate(() { _dropvalue = value; }); }, ); }
items
是点击时弹出选项,onchanged
选项发生变化时回调。效果如下:
如果你对选中的选项的样式不满意,可以自定义,用法如下:
dropdownbutton( selecteditembuilder: (context){ return [ text('语文',style: textstyle(color: colors.red),), text('数学',style: textstyle(color: colors.red),), text('英语',style: textstyle(color: colors.red),) ]; }, ... )
selecteditembuilder返回的组件要和items
中一一对应,选中样式如下:
当用户未选中时,即value 为null,显示''请选中",用法如下:
dropdownbutton( hint: text('请选择'), value: null, ... )
效果如下:
默认情况下,下拉选项的图标是倒立的三角,也可以进行自定义,用法如下:
dropdownbutton( icon: icon(icons.add), iconsize: 24, icondisabledcolor: colors.red, iconenabledcolor: colors.red, ... )
效果如下:
rawmaterialbutton
rawmaterialbutton是基于semantics
, material
和inkwell
创建的组件,它不使用当前的系统主题和按钮主题,用于自定义按钮或者合并现有的样式,而raisedbutton和flatbutton都是基于rawmaterialbutton配置了系统主题和按钮主题,相关属性可以参考raisedbutton,参数基本一样,基本用法如下:
rawmaterialbutton( onpressed: (){}, fillcolor: colors.blue, child: text('button'), )
效果如下:
popupmenubutton
popupmenubutton是一个菜单选中控件,用法如下:
popupmenubutton<string>( itembuilder: (context) { return <popupmenuentry<string>>[ popupmenuitem<string>( value: '语文', child: text('语文'), ), popupmenuitem<string>( value: '数学', child: text('数学'), ), popupmenuitem<string>( value: '英语', child: text('英语'), ), popupmenuitem<string>( value: '生物', child: text('生物'), ), popupmenuitem<string>( value: '化学', child: text('化学'), ), ]; }, )
效果如下:
设置其初始值:
popupmenubutton<string>( initialvalue: '语文', ... )
设置初始值后,打开菜单后,设置的值将会高亮,效果如下:
获取用户选择了某一项的值,或者用户未选中,代码如下:
popupmenubutton<string>( onselected: (value){ print('$value'); }, oncanceled: (){ print('oncanceled'); }, ... )
tooltip
是长按时弹出的提示,用法如下:
popupmenubutton<string>( tooltip: 'popupmenubutton', ... )
效果如下:
设置其阴影值、内边距和弹出菜单的背景颜色:
popupmenubutton<string>( elevation: 5, padding: edgeinsets.all(5), color: colors.red, ... )
默认情况下,popupmenubutton显示3个小圆点,我们也可以对齐进行设置,设置文字如下:
popupmenubutton<string>( child: text('学科'), ... )
child
组件将会被inkwell包裹,点击弹出菜单,效果如下:
也可以设置其他图标:
popupmenubutton<string>( icon: icon(icons.add), ... )
效果如下:
设置弹出菜单边框:
popupmenubutton<string>( shape: roundedrectangleborder( side: borderside( color: colors.red ), borderradius: borderradius.circular(10) ), ... )
效果如下:
iconbutton
iconbutton是一个图标按钮,用法如下:
iconbutton( icon: icon(icons.person), iconsize: 30, color: colors.red, onpressed: () {}, )
设置提示属性:
iconbutton( tooltip: '这是一个图标按钮', icon: icon(icons.person), iconsize: 30, color: colors.red, onpressed: () {}, )
当长按时显示提示,效果如下:
backbutton
backbutton是一个material风格的返回按钮,本身是一个iconbutton,点击时默认执行navigator.maybepop
即如果路由栈有上一页则返回到上一页。
backbutton()
android和ios平台显示的图标是不一样的,ios效果如下:
android效果如下:
closebutton
closebutton是一个material风格的关闭按钮,本身是一个iconbutton,点击时默认执行navigator.maybepop
即如果路由栈有上一页则返回到上一页。
和backbutton适用场景不同,backbutton适用于全屏的页面,而closebutton适用于弹出的dialog。
用法如下:
closebutton()
效果如下:
buttonbar
buttonbar并不是一个单独的按钮控件,而是末端对齐的容器类控件,当在水平方向上没有足够空间时候,按钮将整体垂直排列,而不是换行。基本用法如下:
buttonbar( children: <widget>[ raisedbutton(), raisedbutton(), raisedbutton(), raisedbutton(), ], )
效果如下:
设置主轴的对齐方式及主轴的尺寸:
buttonbar( alignment: mainaxisalignment.center, mainaxissize: mainaxissize.max, ... )
效果如下:
togglebuttons
togglebuttons组件将多个组件组合在一起,并让用户从中选择,togglebuttons基础用法如下:
list<bool> _selecteds = [false, false, true]; togglebuttons( isselected: _selecteds, children: <widget>[ icon(icons.local_cafe), icon(icons.fastfood), icon(icons.cake), ], onpressed: (index) { setstate(() { _selecteds[index] = !_selecteds[index]; }); }, );
isselected
属性是bool类型集合,数量和children的数量一致,onpressed
是点击回调,这时就有了不错了切换按钮行,效果如下:
我们还可以自定义外观,比如设置按钮的颜色:
togglebuttons( color: colors.green, selectedcolor: colors.orange, fillcolor: colors.red, ... )
效果如下:
fillcolor
是选中按钮的背景颜色。
如果不需要边框,可以将renderborder
设置为false:
togglebuttons( renderborder: false, )
效果如下:
当然我们也可以设置边框的圆角半径、宽度、颜色等:
togglebuttons( borderradius: borderradius.circular(30), bordercolor: colors.orange, borderwidth: 3, selectedbordercolor: colors.deeporange, )
效果如下:
甚至可以设置点击水波纹颜色(splashcolor)和按下时的高亮颜色(highlightcolor):
togglebuttons( splashcolor: colors.purple, highlightcolor: colors.yellow, )
效果如下:
如果按钮处于禁用状态,可以设置禁用状态下按钮及边框的颜色:
togglebuttons( onpressed: null, disabledcolor: colors.grey[300], disabledbordercolor: colors.bluegrey, )
效果如下:
如果开发的是web程序,我们可以设置鼠标悬停颜色:
togglebuttons( hovercolor: colors.cyan, )
欢迎加入flutter的微信交流群(mqd_zzy),一起学习,一起进步,生活不止眼前的苟且,还有诗和《远方》。
当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。
上一篇: Java运算符优先级
下一篇: 完事