本文共 10533 字，大约阅读时间需要 35 分钟。

各种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

    }

}

转载地址：http://unegi.baihongyu.com/