引言
上一篇博文中我们学习了GestureDetector,了解到借助GestureDetector可以赋予某些本身不具备点击回调的widget点击回调能力,完成跟用户的一些简单手势交互并作出相应的逻辑处理,我们还提到了有些widget像RaisedButton和FloatingActionButton控件本身就有onPressed回调,当用户点击控件时触发回调。本篇博客中我们就把上篇博客中提及到的各种Button归类统一说明一下。
Button集合效果图
上述RaisedButton、FlatButton、OutlineButton、MaterialButton、还有RawMaterialButton、FloationgActionButton,我分三类给大家讲解,OutlineButton作为一类,RaisedButton、FlatButton、MaterialButton、RawMaterialButton不论是从构造方法还是使用上都很相似,这几个button分为一类,另外FloatingActionButton作为一类。
1.OutlineButton:
OutlineButton默认带有一个边框,我们可以通过属性指定正常状态,跟用户点击状态下的边框颜色。
我们来看下OutlineButton的构造方法,并且对它的相应属性做下使用说明。
key
onPressed
textTheme
textColor
disabledTextColor
color
highlightColor
splashColor
highlightElevation
borderSide
disabledBorderColor
highlightedBorderColor
padding
shape
clipBehavior none
child
上述OutlineButton效果图上两个button的具体代码:
未指定任何样式:
onPressed child
效果图
设置边框样式
textColor blue
highlightedBorderColor deepOrange
shape borderRadius
borderSide color blueAccent
onPressed
child
效果图
2.FloatingActionButton
FloatingActionButton做过原生安卓开发的读者应该很熟悉这个名字,在Flutter中不光引用了原生安卓的叫法,使用方法也大同小异。
构造方法
key
child
tooltip
foregroundColor
backgroundColor
heroTag
elevation
highlightElevation
onPressed
mini
shape
clipBehavior none
materialTapTargetSize
isExtended
由于使用方法跟原生安卓中类似,我就不展开详细讲解了,稍后我会把篇首效果图上的所有代码贴上,大家可参考里面对floatingactionbutton的用法。
3.RaisedButton、FlatButton、OutlineButton、MaterialButton
这几类button十分类似,所以我把他们归为一类做讲解,但是也会有细微的差别,像FlatButton不支持设置手指点击抬起后的颜色,其他常规用法几乎一致,关于具体的细微差别,读者可自行对比构造方法,自行测试,我拿RaisedButton把代码,贴上代码,为大家演示下这几类Button的常用属性配置说明。
color blueAccent
padding
textColor white
textTheme normal
onHighlightChanged bool b
disabledTextColor black54
disabledColor black54
highlightColor green
splashColor amberAccent
colorBrightness light
elevation
highlightElevation
disabledElevation
shape
borderRadius
onPressed
child
上述讲解中读者如果有不明白的地方可以参考文章开篇中贴出的各种button的效果图源码做参考,或者留言给我一块探讨,文章开篇中贴出的各种button的效果图源码如下。
home
context
appBar
title
floatingActionButton
onPressed child adb tooltip
body
children
textAlign center
style color brown fontSize
onPressed child
onPressed child
onPressed child
onPressed child
onPressed child
height
textAlign center
style color brown fontSize
color blueAccent
padding
textColor white
textTheme normal
onHighlightChanged bool b
disabledTextColor black54
disabledColor black54
highlightColor green
splashColor amberAccent
colorBrightness light
elevation
highlightElevation
disabledElevation
shape
borderRadius
onPressed
child
color lightGreen
textColor red
onPressed child
textColor blue
highlightedBorderColor deepOrange
shape borderRadius
borderSide color blueAccent
onPressed
child
color yellow
textColor red
onPressed
child
fillColor deepOrange
onPressed
child style color white
下一篇:Flutter入门进阶之旅(九)StatelessWidget & StatefullWidget
还没有评论,来说两句吧...