Flutter 所有控件widget(持续更新)

各种widget列表:

MaterialApp类:

MaterialApp:代表Material设计风格的应用,添加了特定风格的属性。title, theme, color, home, routes, inititalRoute, onGenerateRoute, localizationDelegates, locale, 

MaterialColor:

MaterialButton:

RawMaterialButton:基于Semantics, Material, InkWell 控件。padding, child, constraint, materialTapTargetSize, onPress,

MaterialPageRoute:

MaterialAccentColor:

MergeableMaterialItem:

Bar类:

AppBar:应用栏,由工具栏组成。或者工具栏和其他widget组合形成的。例如TabBar和FlexibleSpaceBar。title, bottom(顶部导航TabBar), 通常用于Scaffold.appBar属性。SliverAppBar:类似Android Toolbar滑动头部。应用栏。AppBar位置固定最上面,SliveAppBar可以随内容滚动的。leading:返回图标。

BottomAppBar:底部应用栏。通常与Scaffold.bottomNavigationBar一起使用的容器。可以在顶部有一个凹口为FloatingActionButton腾出空间。

BottomNavigationBarItem:底部导航应用栏

SnackBar:

ScrollbarPainter:用于绘制滚动条的CustomPainter,只有shouldRepaint返回true时才绘制。

FlexileSpaceBar:

ButtonBar:末端对齐的按钮容器,

SnackBarAction:

TabBar:(配合导航类的Tab),常用的横向标签,实现并行界面的横向滑动展示,通常会在AppBar的底部部分结合TabBarView来使用TabBar。tabs, controller, isScrollable, indicatorColor, indicatorWeight, indicatorPadding, labelColor, labelStyle, unselectedLabelColor, onTap。


Dialog类:

AlertDialog:

Dialog:

AboutDialog:

SimpleDialog:

Scaffold类:

Scaffold:实现基本的MaterialDesign布局结构。appBar:显示顶部AppBar,body:当前界面显示的主要内容WIdget。floatingActionButton:界面的主要功能按钮,floatingActionButtonLocation:(FloatingActionButtonLocation.endDocked),persistentFooterButtons:固定在下方显示的按钮,drawer:侧边栏控件,backgroundColor:内容的背景颜色(默认ThemeData.scaffoldBackgroundColor的值),bottomNavigationBar:显示在页面底部的导航栏。

ScaffoldState:Scaffold的state对象,用来控制SnackBars和BottomSheets和Drawer的显示隐藏。

Scroll类:

ScrollView:属于抽象类,不能直接实例化。scrollable的(ListView, PageView, GridView, CustomScrollView, SingleChildScrollView, ScrollNotification)。

Scrollable:不包含UI逻辑,很难直接构造。

SingleChildScrollView:只有一个可滑动的子widget的ScrollView.

ScrollNotfication, NotificationListener:可以用在不使用ScrollController的情况下查看滚动位置的widget. onNotification.

ScrollbarPainter:绘制滑动条的CustomPainter。shouldRepaint返回true时。不使用时调用dispose。

ScrollMetrics:抽象类,包含当前ViewPort及滚动位置等信息。pixel,maxScrollExtent,extentInside,extentAfter,atEdge.

ScrollPhysics:确定混动组件的物理属性。

BoxScrollView:使用单个子布局模型的ScrollView.(ListView线性,GridView使用二维布局,CustomScrollView多个布局)。

CustomScrollView:一个使用Slivers来创建各种自定义滚动效果的ScrollView.可展开的头部配合SliverAppBar, SliverList, SliverGrid.

NestedScrollView:可以嵌套在另一个滚动视图中的ScrollView本质上,他们滚动是连接着的。常见的包含一个SliverAppBar, 并且包含TabBar和TabBarView。headSliverBuilder: 构造出来一个包含TabBar的SliverAppBar,并且body中包含TabBarView。

controller , physics, body.

Grid类:

GridTile:GridList的一种组件,包含head,body,footer。

GridView:滚动列表。scrollDirection:滚动方向,reverse:是否反向,controller:控制child滚动时候的位置,cacheExtent:缓存区域,gridDelegate:控制GridView子节点布局的delegate.四种构造方法:GridView.builder,GridView.custom,GridView.count,GridView.extent。

GridPaper:

SliverGrid:将多个item以每行两个的形式,进行排列。

GridTileBar:

列表类:

AnimatedList:”动画滚动容器”,插入和移除项目时设定动画。

ListView:(extend BoxScrollView,BoxScrollView extend ScrollView)”滚动列表”,跟GridView相似,基本上一个slivers只包含一个SliverList的CustomScrollView。scrollDirection:Axis.horizontal。

    几种构造方式:List,ListView.builder,ListView.separated,ListView.custom。把数据Iterable添加到列表中,ListTile.divideTitles。

    ListView.builder,设置单个item属性,懒加载。itemBuilder: ,itemCount:, .

ListBody:列表组件。给定轴方向,按照顺序排列子节点。

ExpansionPanelList:

PageView:可滚动的视图列表,每个子widget都是视图窗口的大小, controller。

frame布局类:

Align:对齐控件,将子控件指定方式对齐,根据子控件调整自己大小,alignment:bottomRight,center,bottomLeft,topLeft。widthFactor,hightFactor匹配对应尺寸,长宽比例。

Stack:多个childs相对于其框的边缘定位,用于简单重叠children,alignment:默认右上角,center。fit:loose放开宽高约束,expand子节点最大可能的占用空间,允许的最大大小,passthrough不改变子节点约束。textDirection文本方向。overflow超过部分是否剪裁掉,clip/visible。

IndexdStack:显示一个子项列表的单个子项。显示指定位置widget,给出索引选择出widget,value==null不显示任何内容。

index显示child的索引,通过多个图片切换可以表示状态。

Row:填充可用的横向水平空间,一行的高度是childs的最大高度。mainAxisSize:默认max,mainAxisAlignment:children放置在主轴某位置,CrossAxisAlignment属性设定位置交叉对齐。

Column:将child显示在竖直方向数组的widget,和Row相对。竖直很多无法滚动,可以配合listView使用。mainAxisSize , mainAxisAlignment , CrossAxisAlignment:center/end/start。

Container:矩形视图,BoxDecoration可以有边框或者阴影。结合常见绘画,定位和大小调整。让child填充绘制(然后绘制前景),然后将其他约束应用到填充范围。没有child则会尽可能大,除非被width,height约束。margin, alignment: Alignment.topLeft , decoration:可以使用空间等作为背景, 

Center:放置中心,如果受到外界约束,widthFactor,heightFactor为null,则会尽可能大。不受外界约束,相应大小为null,则匹配child大小。

ConstrainedBox:添加额外的条件在child上。

OverflowBox:对child施加约束不同于获得的约束,可能允许child溢出父控件的空间。

DecoratedBox:child绘制前,或者绘制后,添加额外的限制条件到child widget上。decoration,position。

RendorDecoratedBox:

FittedBox:根据自己需要,对child进行缩放和定位。boxfit,alignment,

LimitedBox:对最大宽高进行限制的控件,前提是LimitedBox不受约束。

RotatedBox:将child旋转整数的1/4。

SizedBox:一个具有制定大小的盒子。SizedBox.expand(); SizedBox.shrink(); SizedBox.fromSize();

SizeOverflowBox:特定大小的widget,但将其原始约束传递给它的子节点,可能溢出。alignment , size .

UnconstrainedBox:一个试图让child在没有约束的情况下绘制的容器。alignment ,textDirection ,constrainedAxis。

Expanded:用于撑开布局子组件的widget,用于在Row,Column,Flex子组件内。占满所有可用空间。

Padding:widget内边距,Container+padding=Padding。

SliverPadding:是Slivers大家族中的一个,配合各种Sliver成员使用。作用于每一个item。

AnimatedPadding:动画成员的一部分,动画版本的padding。

Table:多列多行的需求,columnWidth.

Card:卡片。shape:RoundedRectangleBorder,elevation,margin,color, child.

form类:

TextField:文本输入框,修改时onchange被调用。获得最新的文本信息。输入完毕onSubmitted 被调用。

                decoration属性控制样式,添加标签或图标。

Checkbox:复选框,发生变化,onchange被调用。单个选择,一组单选。

CheckboxListTile:下拉复选框,带有复选框的ListTitle,与checkbox类似onChanged , activeColor , title , subtitle , isThree Line , dense.



FlatButton:显示在material widget上的文本标签,零高程,不可见边框,onPress==null责备禁用,disableColor,icon,可以用 ButtonTheme覆盖,clipBehavior不能为空

RaisedButton : 凸起的按钮,icon,onpress,shape更改边框样式和圆角,

IconButton:通过填充颜色对点击做出反应,通常用在AppBar.actions。

PopupMenuButton:提供提供菜单栏弹出对话框的按钮。选项被点击调用onSelected, initialValue初始值,单项有icon,enabled值。通常配合PopupMenuItem。itemBuilder。

FloatingActionButton:浮动动作按钮,常用在Scaffold.floatingActionButton字段中,FAB三种类型regular,mini,extended.onPress==null,则不可用不会变灰色。可更改边框,点击效果,内容文字,颜色,圆角。

RawMaterialButton:raw material 按钮,基于Sematics,Material,Inkwell创建的按钮。

DropdownButton:用于项目列表中进行选择的按钮,

OutlineButton:边框按钮,RaisedButton和FlatButton之间的交叉,一个有边框的按钮。



Text:单一样式文本,接近DefaultStyle,重新设置样式DefaultStyle.inherit为false,data文本内容,textAlign对齐方式,maxLines最大行数,overflow文本截断方式,textScaleFactor文本缩放比例,style颜色字体粗细背景。

RichText:具有复杂样式的文本显示组件,富文本展示不同风格文本widget.Text或Text.rich都是从RichText构建出来的。TextSpan显示不同样式。

Radio:material design风格的单选按钮,groupValue代表选中项,activeColor激活时的颜色,onChanged改变时触发,value单选的值。

RadioListTile:单选按钮附文字label.单击文字同单击radio.



Slider:进行范围选择的控件,数据可连续可非连续,在最大值和最小值之间,thumb滑块 track滑轨 value indicator值指示器 active选中区 inactive非选中区。SliderTheme定制复杂样式。

SliderTheme:用来改变Slider样式的上层部件。用来改变Slider样式的上层部件。更改sliderTheme.data修改Slider总体样式。

SliderThemeData:sliderTheme.data = SliderThemeData(), data的修饰属性。



Switch:切换按钮组件,使用Switch子类adaptive修改成iOS风格,activeColor,activeThumbImage激活时按钮的图像,activeTrackColor:按钮激活滑轨颜色,inactiveThumbColor,inactiveThumbImage,inactiveTrackColor.

SwitchListTile:Switch的一个衍生组件。支持各种自定义样式,附带文字和图标。

AnimatedSwitcher:渐变切换的组件,有动画效果。

Media类:

AssetImage:从AssetBundle中获取图像,根据上下文来确定使用的确切图像。

DecorationImage:修饰Box的图片,一般配合BoxDecoration的img 属性. 也可以配合paintImage使用。fit:BoxFit.cover;

ExactAssetImage:类似带有scale属性的AssetImage。可以理解为带有scale的AssetImage.

FadeInImage:占位图 placeHolder —> image目标图片的一种过渡widget。fadeOutDuration,fadeOutCurve控制placeholder的动画, image:NetworkCacheImage(image)。FadeInImage.memoryWork();

FileImage:用来展示本地文件,将FIle对象解码为图片,指定scale。Image.file是ImageFile的简写形式。

NetworkImage:展示网络图片的widget,Image.network是提供的简写形式。

RawImage:直接显示dart:ui.Image的widget。很少使用。通过paintImage绘制出来的。

MemoryImage:将给定的Uint8List缓冲区解码为图像的widget. ImageProvider。

Image:用来展示Image. instantiateImageCodec。绘制使用 Canvas.drawImage. //Image.asset, Image.network, Image.file, Image.memory.。

Icon:使用IconData描述的字体绘制图形图标。`

ImageIcon:来自ImageProvider的图标,例如AssetImage.

IconTheme:用于应用栏图标的颜色,不透明度和大小。backgroundColor, brightness, textTheme.

IconData:字体表示符合表示的图标说明,

IconThemeData:为图标提供的属性,必须是Icon的父级。IconTheme.of,opacity属性透明度。

Canvas:操作图形的界面,可以与SceneBuilder一起用来构建场景。

PainterSketch:操作图形的界面,canvas+paint+GestureDetector实现一个简单画板。

PainterPath:在canvas上绘制图案。

*CircleProgressBarPainter:操作图形的界面。使用canvas+Animation实现。

导航navigation类:

BottomNavigationBarItem:底部导航应用栏,嵌套使用。

BottomNavigationBar:”底部导航栏”,通常和Scaffold结合使用。作为Scaffold.bottomNavigationBar参数。

Tab:s属于Material风格的widget.配合TabBarView使用。TabController协调TabBarView和Tab之间选择和个数等。

CheckedPopupMenuItem:

DropdownMenuItem:

PopupMenuBottom:

PopupMenuDivider:

PopopMenuEntry:

PopupMenuItem:

Pick类:

DayPicker:

MonthPicker:

YearPicker:

ShowdatePicker:

CityPicker:

Chip类:

Chip:

ChipTheme:

ChipThemeData:

ChoiceChip:

FilterChip:

InputChip:

RawChip:

ClipOval:子控件裁切容器,/ClipRect, /ClipRRect, /ClipPath, /CustomClipper.  BorderRadius, child.

Progress类:

CircularPercentIndicator:

LinearProgressIndicator:

* NestedScrollViewRefreshIndicator:类似SwipeRefreshLayout。key, child, onRefresh, .

decoration类:

BoxDecoration:image(背景图), color(背景色), borderRadius(直线的圆角,包含四个), border(外框), shape(框形状), gradient(渐变色), boxShadow,.

ShapeDecoration:

InkDecoration:

FlutterLogoDecoration:

InputDecoration:

TextDecoration:

shape类:

shape : RoundedRectangleBorder, BoxShape(BoxShape.circle), CircleBorder, .

**************

Cupertino类:

CupertinoApp:

CupertinoButton:

CupertinoColors:

CupertinoIcons:

CupertinoNavigationBar:

CupertinoPageRoute:

CupertinoPageScaffold:

CupertinoPicker:

CupertinoPopupSurface:

CupertinoScrollbar:

CupertinoSlider:

CupertinoSegmentedControl:

CupertinoSliverNavigationBar:

CupertinoSwitch:

CupertinoTabBar:

CupertinoTabScafold:

CupertinoTabView:

CupertinoTimerPicker:

Sliver系列:

SliverAppBar:title, pinned, floating, snap, elevation.

SliverFixedExtentList:

SliverList:delegate, childCount, 

SliverGrid:SliverGrid.count(), SliverGrid.extent(), SliverGrid(), crossAxisCount, maxCrossAxisExtent:

SliverPersistentHeader:pinned, floating, 滑动时具有动态大小。delegate, 集成SliverPersistentHeadDelegate实现,覆载minExtent, maxExtent, shouldBuild, snapConfiguration。pinned:当达到最小时是否固定头部。

SliverFixedExtentList:

SliverToBoxAdapter:组合视图,放在CustomListVIew 中,

Localizations : Localizations.override(locale:**,child**),包裹响应多语言改变

Semantics:

Label:

Positioned:

Ink:

InkWell:

ViewController:

Drawer:

Divider:直线

GestureDetector:处理手势识别,非空回调,fit parent.onTap,

FocusScope: FocusScope.of(context).requestFocus(new FocusNode());

WillPopScope:用户退出界面时的回调

SafeArea:安全区,防止overFlow现象

Transform: Transform.translate(),


应用中的组合:

刷新列表:

NestedScrollViewRefreshIndicator(onRefresh)  -> NestedScrollView(headerSliverBuilder) -> NotificationListener(onNotification)  -> ListView(itemCount,itemBuilder).

RefreshIndicator(onRefresh) -> ListView(itemCount,itemBuilder,controller).


屏幕宽度高度:MediaQuery.of(context).size.width

                    MediaQuery.of(context).size.height

屏幕状态栏高度:MediaQueryData.fromWindow(WidgetBinding.instance.window).padding.top。

Flutter设计中,组合的优先级大于继承。。StatefullWidget,StatelessWidget.

自定义widget:

Class MyApp extends StatefulWidget{

    @override

    MySateWidget createState() => MySateWidget();

}

Class MySateWidget extends State<MyApp>{

    initState(){

        //logic

        Super.initState();

    }

    Widget build(context){

        //logic

    }

}

发布了155 篇原创文章 · 获赞 125 · 访问量 34万+

猜你喜欢

转载自blog.csdn.net/u011216417/article/details/97617294