哥哥带你学Flutter 140+ 组件

Dart语言规范

Flutter Go 开发规范

哥哥带你学Flutter 140+ 组件_第1张图片

Elements

Form

1,Input 输入框

TextField 最常用的文本输入widget,用户修改文本信息时,onChange会被调用,获取到最新的文本信息。

已知用户输入的字段文本输入完毕时,(例如通过软件上面的按钮确认输入完毕),会调用onSubmitted回调

基本用法:

1, 默认有一个下划线进行修饰

2,可以使用decoration控制样式,例如添加标签或者图标。如果属性设置为null,将完全删除装饰,包括引入的填充。节省空间。

3,如果decoration属性非空,文本字段需要父类是material widget ,当文本字段被点击时,会有点击效果。

4,若要将textfield和其他formfield集成到form中,考虑使用textformfield.

哥哥带你学Flutter 140+ 组件_第2张图片

进阶用法:

实现稍微复杂点的效果,如textfield输入数字优先,提示文字,icon,标签文字等。

增加一个keyobardtype属性,将其设置为textinputtype.number,让textfield获得焦点的时候弹出的键盘就变成了数字优先。

2,checkboxlisttile  下拉复选框

带有复选框的listtile,带有标签的listtile

整个列表图块是交互的,点击图块中的任意位置可切换复选框。

基本用法:

和CheckBox类似的命名属性,比如onchanged 和 activecolor

和listtile类似的命名属性,比如title ,subtitle,isThressLine,dense 

selected属性和listtile.selected属性类似,但使用的颜色是activecolor属性,默认为当前theme 的颜色。

onchange回调函数为null ,显示禁用。

哥哥带你学Flutter 140+ 组件_第3张图片

3,checkbox 复选框

复选框不保持任何状态

当复选框的状态发生变化时,窗口小部件会调用onchanged回调

大多数使用复选框的小部件将侦听onchanged回调,并使用新值重建复选框以更新复选框的可视外观。

4,flatbutton 

flatbutton是显示在material widget上的文本标签

通过填充颜色对触摸做出反应在工具栏上

flatbuttons故意不具有可见边框,因此必须依赖于他们相对于其他内容的位置以用于上下文。

在对话框和卡片内,它们应该组合在一个底角中。避免使用平面按钮,会与其他内容混合,流入在列表中间。

基础用法

参数的默认的button和禁用button

如果onpressed回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按disabledcolor属性而不是color属性指定的颜色进行着色。

哥哥带你学Flutter 140+ 组件_第4张图片
哥哥带你学Flutter 140+ 组件_第5张图片

5,raisebutton 凸起按钮

基础用法

参数的默认的button和禁用button

如果onpressed回调为null,则该按钮将被禁用,不会对触摸做出反应,并且将按disabledcolor属性而不是color属性指定的颜色进行着色。

哥哥带你学Flutter 140+ 组件_第6张图片
哥哥带你学Flutter 140+ 组件_第7张图片
哥哥带你学Flutter 140+ 组件_第8张图片

6,iconbutton 图标按钮

通过填充颜色来对触摸进行反应

基本用法

图标按钮通常在appbar.action字段中使用,但也可以在许多其他地方。

如果尝试更改按钮颜色并没有任何效果,可能正在传递null onPressed处理程序。

哥哥带你学Flutter 140+ 组件_第9张图片
哥哥带你学Flutter 140+ 组件_第10张图片

7,PopupMenuButton 菜单栏弹出对话框

点击的时候弹出,选择其中一项的时候调用onSeclected方法,传递所选菜单项。

可以提供一个child widget或者提供一个icon给它,但不能两者都提供。

如果什么都没有提供,则会根据运行平台创建一个overflow icon。

基本用法

popupmenubutton通常配合popupmenuitem一起使用

enabled标识当前item是否可点击

popupmenuitem可以在chlld中传入带有icon的widget

可以指定popupmenubutton 的初始值initvalue

哥哥带你学Flutter 140+ 组件_第11张图片

8,floatingactionbutton 浮动动作按钮

每个屏幕最多使用一个浮动操作按钮。

基础用法

如果onpressed回调为null,则该button将被禁用,并且不会对触摸做出反应,不会变成灰色。

哥哥带你学Flutter 140+ 组件_第12张图片
哥哥带你学Flutter 140+ 组件_第13张图片

9,RawMaterial button 按钮

基础用法

哥哥带你学Flutter 140+ 组件_第14张图片
哥哥带你学Flutter 140+ 组件_第15张图片

10,DropDownbutton 下拉列表

哥哥带你学Flutter 140+ 组件_第16张图片

11,Outlinebutton 边框按钮

raisebutton 和flatbutton之间的交叉,一个有边框的按钮,当按下按钮时,其高度增加,背静变得不透明。

哥哥带你学Flutter 140+ 组件_第17张图片
哥哥带你学Flutter 140+ 组件_第18张图片
哥哥带你学Flutter 140+ 组件_第19张图片

12,Text 文本框 

基本用法

必填参数string

textalign 对齐方式

maxlines显示最大行数

overflow显示截断方式

textscalefactor 文本缩放比例

style显示样式

13,Richtext 多样式文本

无论是text,还是text.rich,都是由richtext构建出来的

基本用法

哥哥带你学Flutter 140+ 组件_第20张图片

14,Radio 单选按钮

基本用法

activecolor  激活时的颜色

groupvalue 选择组的值

onchanged 改变时触发

value 单选的值

哥哥带你学Flutter 140+ 组件_第21张图片

15,RadioListTile 单选按钮

点击文字的时候,将会触发radio点击效果

当groupvalue = value时代表选中状态

哥哥带你学Flutter 140+ 组件_第22张图片

16,slider

用来选择连续性或者非连续性数据,默认是在一段最大值最小值之间做任意选择,如果想选择间隔性值,需要给dividions设定一个非空整数,去分隔区间范围。

基本用法

thumb 滑块 用户可以水平拖拽移动的区域

track 滑轨 thumb 可以滑动的线条区域

value indicator值指示器 当用户拖拽thumb的时候,显示用户当前所选属性值

active 选中区

inactive 非选中区

如果onchanged为空,或者min - max 给出的范围为空,则将禁用滑块。

要知道值何时开始,何时更改,可设置onchangedstart或end。

默认情况下,滑块将尽可能宽,垂直居中,当给定无限制约束时,它将尝试使轨道宽144像素。每边有边距并垂直收缩。

哥哥带你学Flutter 140+ 组件_第23张图片

自定义slider样式,可以通过slidertheme定制复杂样式

哥哥带你学Flutter 140+ 组件_第24张图片
哥哥带你学Flutter 140+ 组件_第25张图片

17,slidertheme 更改slider样式

通过更改slidertheme.data ,修改slider总体样式。

哥哥带你学Flutter 140+ 组件_第26张图片
哥哥带你学Flutter 140+ 组件_第27张图片

18,switch 切换按钮

基本用法

哥哥带你学Flutter 140+ 组件_第28张图片

高级用法

哥哥带你学Flutter 140+ 组件_第29张图片

19,switchlsittile switch衍生组件

哥哥带你学Flutter 140+ 组件_第30张图片

20,animatedswitcher 动画效果切换按钮

哥哥带你学Flutter 140+ 组件_第31张图片
哥哥带你学Flutter 140+ 组件_第32张图片

Frame

21,align 对齐控件

能将子控件指定方式对齐,并根据控件大小调整自己大小

基本用法

aligment  aligmentgeometry

哥哥带你学Flutter 140+ 组件_第33张图片

withfactory /heightfacotry --- double

如果withfactory /heightfacotry为空,并且外部控件没有任何约束,child控件大小默认。那么控件根据自身尺寸最大化

如果--------------------------------不为空,并且外部没有约束,aligin将匹配对应点 child尺寸

ex:withfactory /heightfacotry 为2.0,那么widget宽高为child宽高的两倍

哥哥带你学Flutter 140+ 组件_第34张图片

22,stack 用于将多个childs相对于其框的边缘定位,多用于以简单的方式重叠children。

哥哥带你学Flutter 140+ 组件_第35张图片

基本用法

哥哥带你学Flutter 140+ 组件_第36张图片
哥哥带你学Flutter 140+ 组件_第37张图片
哥哥带你学Flutter 140+ 组件_第38张图片

23,indexStack  显示一个子项列表的单个子项

只显示指定位置的widget,其他位置不会显示,所以其尺寸永远和最大的子节点一样

显示的子项是给到了具体的索引选择出来的

value如果为null,不显示任何内容

基础用法

哥哥带你学Flutter 140+ 组件_第39张图片

24,row  水平布局

当看到行有黄色和黑色条纹警告时,说明行已经溢出,行之间空间没有任何空间可以扩展

基本用法

哥哥带你学Flutter 140+ 组件_第40张图片

25,column 填充竖直方向。

基本用法

哥哥带你学Flutter 140+ 组件_第41张图片

26,container 结合了绘画,定位和大小调整

基本用法

哥哥带你学Flutter 140+ 组件_第42张图片

27,center 

基础用法

哥哥带你学Flutter 140+ 组件_第43张图片

28,constrainedbox  添加额外限制条件到child

哥哥带你学Flutter 140+ 组件_第44张图片

28,overflowbox 不同于从其父控件获得的约束,可能允许child溢出父控件的空间

当overflowbox最大尺寸大于child的时,child可以完整显示,当其小于child的时候,则以最大尺寸为基准。当然这个尺寸是可以突破父节点的。

基本用法

哥哥带你学Flutter 140+ 组件_第45张图片
哥哥带你学Flutter 140+ 组件_第46张图片

29,decoratedbox

基本用法

boxdecoration 提供多种方式绘制一个框

盒子形状可以是圆形可以是矩形,用borderradius绘制角度

哥哥带你学Flutter 140+ 组件_第47张图片

30,fittedbox

基本用法

哥哥带你学Flutter 140+ 组件_第48张图片

31,limitedbox

对最大宽高进行限制(前提是limitedbox不受限制)

基本用法

哥哥带你学Flutter 140+ 组件_第49张图片

32,rotatedbox 把子widget旋转整数的四分之一

和transform不同,该对象在布局之前应用其旋转,旋转范围仅消耗子widget的所需空间。

基本用法

哥哥带你学Flutter 140+ 组件_第50张图片

33,sizeoverflowbox 特定大小的窗口部

哥哥带你学Flutter 140+ 组件_第51张图片

34,unconstrainedbox

哥哥带你学Flutter 140+ 组件_第52张图片

35,expanded 

哥哥带你学Flutter 140+ 组件_第53张图片

36,padding

哥哥带你学Flutter 140+ 组件_第54张图片

37,sliverpadding 

哥哥带你学Flutter 140+ 组件_第55张图片

38,animatedpadding

哥哥带你学Flutter 140+ 组件_第56张图片

38,table

哥哥带你学Flutter 140+ 组件_第57张图片

Media

39,assetimage

哥哥带你学Flutter 140+ 组件_第58张图片
哥哥带你学Flutter 140+ 组件_第59张图片
哥哥带你学Flutter 140+ 组件_第60张图片
哥哥带你学Flutter 140+ 组件_第61张图片

40,decorationimgage

哥哥带你学Flutter 140+ 组件_第62张图片

41,exactassetimage

哥哥带你学Flutter 140+ 组件_第63张图片

42,fadeinimage

哥哥带你学Flutter 140+ 组件_第64张图片

43,fileimage

哥哥带你学Flutter 140+ 组件_第65张图片

44,networkimage 支持scale图片缩放

45,rawimage

哥哥带你学Flutter 140+ 组件_第66张图片

46,memoryimage

将给定的unit8lsit缓冲解码为图像

甚至可以利用其来实现将base64编码的图片展示(利用unit8list。fromlist构造函数)

哥哥带你学Flutter 140+ 组件_第67张图片

47,image

哥哥带你学Flutter 140+ 组件_第68张图片
哥哥带你学Flutter 140+ 组件_第69张图片

48,icon

哥哥带你学Flutter 140+ 组件_第70张图片

49,imageicon

哥哥带你学Flutter 140+ 组件_第71张图片

50,icontheme

哥哥带你学Flutter 140+ 组件_第72张图片

51,icondata

哥哥带你学Flutter 140+ 组件_第73张图片

52,iconthemedata

哥哥带你学Flutter 140+ 组件_第74张图片

53,canvas

哥哥带你学Flutter 140+ 组件_第75张图片

53,paintersketch

哥哥带你学Flutter 140+ 组件_第76张图片

54,paintpath

canvas + paint 的应用

55,circleprogressbarpainter

哥哥带你学Flutter 140+ 组件_第77张图片

Components

56,bottomnavigationbaritem

哥哥带你学Flutter 140+ 组件_第78张图片

57,bottomnabigationbar

哥哥带你学Flutter 140+ 组件_第79张图片

58,animatedlist

哥哥带你学Flutter 140+ 组件_第80张图片

59,listview

哥哥带你学Flutter 140+ 组件_第81张图片
哥哥带你学Flutter 140+ 组件_第82张图片
哥哥带你学Flutter 140+ 组件_第83张图片
哥哥带你学Flutter 140+ 组件_第84张图片

60,listbody

哥哥带你学Flutter 140+ 组件_第85张图片

61,card

哥哥带你学Flutter 140+ 组件_第86张图片

62,appbar

哥哥带你学Flutter 140+ 组件_第87张图片
哥哥带你学Flutter 140+ 组件_第88张图片
哥哥带你学Flutter 140+ 组件_第89张图片
哥哥带你学Flutter 140+ 组件_第90张图片

63,bottomappbar

哥哥带你学Flutter 140+ 组件_第91张图片

64,bottomnavigationbaritem

哥哥带你学Flutter 140+ 组件_第92张图片

65,snackbar

哥哥带你学Flutter 140+ 组件_第93张图片

66,sliverappbar

哥哥带你学Flutter 140+ 组件_第94张图片

67,scrollbarpainter

哥哥带你学Flutter 140+ 组件_第95张图片
哥哥带你学Flutter 140+ 组件_第96张图片

68,flexiblespacebar

哥哥带你学Flutter 140+ 组件_第97张图片

69,buttonbar

哥哥带你学Flutter 140+ 组件_第98张图片

70,snackbaraction

哥哥带你学Flutter 140+ 组件_第99张图片

71,tabbar

哥哥带你学Flutter 140+ 组件_第100张图片
哥哥带你学Flutter 140+ 组件_第101张图片
哥哥带你学Flutter 140+ 组件_第102张图片

72,alertdialog

哥哥带你学Flutter 140+ 组件_第103张图片

73,dialog

哥哥带你学Flutter 140+ 组件_第104张图片
哥哥带你学Flutter 140+ 组件_第105张图片

74,aboutdialog

哥哥带你学Flutter 140+ 组件_第106张图片

75,simpledialog

哥哥带你学Flutter 140+ 组件_第107张图片

76,scafford

哥哥带你学Flutter 140+ 组件_第108张图片
哥哥带你学Flutter 140+ 组件_第109张图片

77,scaffordstate

哥哥带你学Flutter 140+ 组件_第110张图片

78,gridtile

哥哥带你学Flutter 140+ 组件_第111张图片

79,gridview

哥哥带你学Flutter 140+ 组件_第112张图片
哥哥带你学Flutter 140+ 组件_第113张图片

80,gridpaper

哥哥带你学Flutter 140+ 组件_第114张图片

81,slivergrid

哥哥带你学Flutter 140+ 组件_第115张图片

82,gridtilebar

哥哥带你学Flutter 140+ 组件_第116张图片

83,scrollview

哥哥带你学Flutter 140+ 组件_第117张图片
哥哥带你学Flutter 140+ 组件_第118张图片

84,scrollable

哥哥带你学Flutter 140+ 组件_第119张图片

85,scrollbarpainter

哥哥带你学Flutter 140+ 组件_第120张图片

86,scrollmetrics

哥哥带你学Flutter 140+ 组件_第121张图片

87,scrollphysics

哥哥带你学Flutter 140+ 组件_第122张图片
哥哥带你学Flutter 140+ 组件_第123张图片

88,boxscrollview

哥哥带你学Flutter 140+ 组件_第124张图片

89,customscrollview

哥哥带你学Flutter 140+ 组件_第125张图片

90,nestedscrollview

哥哥带你学Flutter 140+ 组件_第126张图片

91,tab

哥哥带你学Flutter 140+ 组件_第127张图片

92,checkedpopupmenuitem

哥哥带你学Flutter 140+ 组件_第128张图片

93,dropdownmenuitem

哥哥带你学Flutter 140+ 组件_第129张图片

94,popupmenubutton

哥哥带你学Flutter 140+ 组件_第130张图片
哥哥带你学Flutter 140+ 组件_第131张图片

95,popupmenudivider

哥哥带你学Flutter 140+ 组件_第132张图片

96,popupmenuentry

哥哥带你学Flutter 140+ 组件_第133张图片

97,popupmenuitem

哥哥带你学Flutter 140+ 组件_第134张图片

98,daypicker

哥哥带你学Flutter 140+ 组件_第135张图片

99,monthpicker

哥哥带你学Flutter 140+ 组件_第136张图片

100,yearpicker

哥哥带你学Flutter 140+ 组件_第137张图片

101,showdatepicker

哥哥带你学Flutter 140+ 组件_第138张图片

102,citypicker

哥哥带你学Flutter 140+ 组件_第139张图片

103,chip

哥哥带你学Flutter 140+ 组件_第140张图片

104,chiptheme

哥哥带你学Flutter 140+ 组件_第141张图片

105,chipthemedata

哥哥带你学Flutter 140+ 组件_第142张图片

106,choicechip

哥哥带你学Flutter 140+ 组件_第143张图片

107,fliterchip

哥哥带你学Flutter 140+ 组件_第144张图片

108,inputchip

哥哥带你学Flutter 140+ 组件_第145张图片

109,rawchip

哥哥带你学Flutter 140+ 组件_第146张图片

110,expansionpanellist

哥哥带你学Flutter 140+ 组件_第147张图片

111,linearprogressindicator

哥哥带你学Flutter 140+ 组件_第148张图片

112,circularprogressindicator

哥哥带你学Flutter 140+ 组件_第149张图片

Theme

113,materialapp

哥哥带你学Flutter 140+ 组件_第150张图片
哥哥带你学Flutter 140+ 组件_第151张图片

114,materialcolor

哥哥带你学Flutter 140+ 组件_第152张图片

115,materilalbutton

哥哥带你学Flutter 140+ 组件_第153张图片


哥哥带你学Flutter 140+ 组件_第154张图片

116,materialpageroute

哥哥带你学Flutter 140+ 组件_第155张图片

117,materialaccentcolor

哥哥带你学Flutter 140+ 组件_第156张图片
哥哥带你学Flutter 140+ 组件_第157张图片

118,mergeablematerialitem

哥哥带你学Flutter 140+ 组件_第158张图片

119,cupertinoapp

哥哥带你学Flutter 140+ 组件_第159张图片
哥哥带你学Flutter 140+ 组件_第160张图片

120,cupertinobutton

哥哥带你学Flutter 140+ 组件_第161张图片
哥哥带你学Flutter 140+ 组件_第162张图片

121,cuptertinocolors

哥哥带你学Flutter 140+ 组件_第163张图片

122,cupertinoicons

哥哥带你学Flutter 140+ 组件_第164张图片
哥哥带你学Flutter 140+ 组件_第165张图片
哥哥带你学Flutter 140+ 组件_第166张图片
哥哥带你学Flutter 140+ 组件_第167张图片

123,cupertinonavigationbar

哥哥带你学Flutter 140+ 组件_第168张图片
哥哥带你学Flutter 140+ 组件_第169张图片
哥哥带你学Flutter 140+ 组件_第170张图片

124,cuperpageroute

哥哥带你学Flutter 140+ 组件_第171张图片

125,cupertinopagescaffold

哥哥带你学Flutter 140+ 组件_第172张图片
哥哥带你学Flutter 140+ 组件_第173张图片

126,cupretinopicker

哥哥带你学Flutter 140+ 组件_第174张图片
哥哥带你学Flutter 140+ 组件_第175张图片

127,cupertinopopupsurface

哥哥带你学Flutter 140+ 组件_第176张图片
哥哥带你学Flutter 140+ 组件_第177张图片

128,cupertinoscrollbar

哥哥带你学Flutter 140+ 组件_第178张图片

129,cupertinoslider

哥哥带你学Flutter 140+ 组件_第179张图片
哥哥带你学Flutter 140+ 组件_第180张图片

130,cupertinosegmentedcontrol

哥哥带你学Flutter 140+ 组件_第181张图片
哥哥带你学Flutter 140+ 组件_第182张图片

131,cupertinoslider

哥哥带你学Flutter 140+ 组件_第183张图片

132,cupertinoswitch

哥哥带你学Flutter 140+ 组件_第184张图片

133,cupertinotabar

哥哥带你学Flutter 140+ 组件_第185张图片

134,cupertinotabascaffold

哥哥带你学Flutter 140+ 组件_第186张图片

135,cupertinotabview

哥哥带你学Flutter 140+ 组件_第187张图片

136,cupertinotimerpicker

哥哥带你学Flutter 140+ 组件_第188张图片
哥哥带你学Flutter 140+ 组件_第189张图片

Github:https://github.com/alibaba/flutter-go

感谢关注

你可能感兴趣的:(哥哥带你学Flutter 140+ 组件)