diff --git a/assets/data/widget.json b/assets/data/widget.json index 8059ae5..b029ed2 100644 --- a/assets/data/widget.json +++ b/assets/data/widget.json @@ -5,9 +5,9 @@ "family": 0, "name": "Container", "nameCN": "容器组件", - "lever": 4.2, - "childCount": 1, - "info": "用于容纳单个孩子的Stateless组件。集成了若干个S28t的功能，如内外边距、形变、装饰、约束等...", + "lever": 5, + "linkWidget": "74,85,80,78,70,123", + "info": "用于容纳单个子组件的容器组件。集成了若干个单子组件的功能，如内外边距、形变、装饰、约束等...", "image": "assets/images/widgets/Container.png" }, { @@ -15,9 +15,9 @@ "family": 0, "name": "Text", "nameCN": "文字组件", - "lever": 4.5, - "childCount": 0, - "info": "用于显示文字的Stateless组件。拥有的属性非常多，足够满足你的使用需求,核心样式由TextStyle对象控制。", + "lever": 5, + "linkWidget": "101", + "info": "用于显示文字的组件。拥有的属性非常多，足够满足你的使用需求,核心样式由style属性控制。", "image": "assets/images/widgets/Text.png" }, { @@ -25,49 +25,49 @@ "family": 0, "name": "Card", "nameCN": "卡片组件", - "lever": 2.0, - "childCount": 1, - "info": " 用于将单个组件卡片化的Stateless组件。使其具有投影效果，可加外边距，也可以自定义卡片形状。", + "lever": 3, + "linkWidget": "160", + "info": " 基于Material组件实现,用于将单个组件卡片化。并使其具有投影效果，可加外边距，也可以自定义卡片形状。", "image": "assets/images/widgets/Card.png" }, { "id": 4, "family": 0, "name": "FlutterLogo", - "lever": 1.0, - "childCount": 0, + "lever": 1, + "linkWidget": "", "nameCN": "Flutter图标", - "info": "用于展示Flutter图标的Stateless组件。可定义颜色、尺寸等信息，是一个非常简单的组件。", + "info": "用于展示Flutter图标组件。可定义颜色、尺寸、展示模式等信息，是一个非常简单的组件。", "image": "assets/images/widgets/FlutterLogo.png" }, { "id": 5, "family": 0, "name": "Banner", - "lever": 1.6, - "childCount": 1, + "lever": 1, + "linkWidget": "", "nameCN": "角标组件", - "info": "用于角标显示的Stateless组件。可容纳一个子组件,可选择方位添加角标及信息文字，可设置颜色。", + "info": "用于角标显示的组件。可容纳一个子组件,可选择方位添加角标及信息文字，可设置颜色。", "image": "assets/images/widgets/Banner.png" }, { "id": 6, "family": 0, "name": "Icon", - "lever": 2.0, - "childCount": 0, + "lever": 2, + "linkWidget": "7,30,125", "nameCN": "图标组件", - "info": "用于图标显示的Stateless组件。可指定图标资源、大小、颜色。", + "info": "用于图标显示的组件。可指定图标资源、大小、颜色。非常简单，但是非常用", "image": "assets/images/widgets/Icon.png" }, { "id": 7, "family": 0, "name": "ImageIcon", + "linkWidget": "7,30,125", "nameCN": "容器", - "childCount": 0, - "lever": 1.0, - "info": "用于将一个图片变为纯色的Stateless组件。可指定大小、颜色。", + "lever": 1, + "info": "用于将一个图片变为纯色的组件。可指定大小、颜色。", "image": "assets/images/widgets/ImageIcon.png" }, { @@ -75,8 +75,8 @@ "family": 0, "name": "FadeInImage", "nameCN": "淡入图片", - "childCount": 0, - "lever": 3.6, + "linkWidget": "7,30,125", + "lever": 2, "info": "透明渐变地加载一张图片。可指定占位图片、进退的动画曲线、时间、宽高、fit类型、对齐方式、重复方式等。", "image": "assets/images/widgets/FadeInImage.png" }, @@ -85,8 +85,8 @@ "family": 0, "name": "CircleAvatar", "nameCN": "圆形组件", - "childCount": 1, - "lever": 3.5, + "linkWidget": "", + "lever": 4, "info": "可将一张图片变成圆形，并且中间可以放置一个组件。可指定半径、前景色、背景色等。", "image": "assets/images/widgets/CircleAvatar.png" }, @@ -95,8 +95,8 @@ "family": 0, "name": "Visibility", "nameCN": "显隐组件", - "childCount": 1, - "lever": 3.0, + "linkWidget": "71", + "lever": 3, "info": "控制一个组件显示或隐藏,可设置隐藏后的占位组件。与其功能相似的由OffStage组件。", "image": "assets/images/widgets/Visibility.png" }, @@ -105,8 +105,8 @@ "family": 0, "name": "Chip", "nameCN": "小条组件", - "childCount": 3, - "lever": 3.5, + "linkWidget": "12,13,14,15,153", + "lever": 4, "info": "一个横向的圆边小条，可以包含左中右三个组件。可以指定颜色、阴影色和点击事件。", "image": "assets/images/widgets/Chip.png" }, @@ -115,8 +115,8 @@ "family": 0, "name": "ChoiceChip", "nameCN": "选择小条", - "childCount": 3, - "lever": 3.3, + "lever": 3, + "linkWidget": "11,13,14,15,153", "info": "和Chip组件类似的样式，有一些选择的属性。可以指定选中时的颜色、阴影色和选择事件。", "image": "assets/images/widgets/ChoiceChip.png" }, @@ -125,8 +125,8 @@ "family": 0, "name": "ActionChip", "nameCN": "事件小条", - "childCount": 3, - "lever": 2.2, + "lever": 3, + "linkWidget": "11,12,14,15,153", "info": "和Chip组件类似的样式，有一些点击的属性。可以指定点击时的阴影深、点击事件。", "image": "assets/images/widgets/ActionChip.png" }, @@ -135,8 +135,8 @@ "family": 0, "name": "InputChip", "nameCN": "综合小条", - "childCount": 3, - "lever": 4.2, + "linkWidget": "11,12,13,15,153", + "lever": 4, "info": "和Chip组件类似的样式，集成了点击、删除、选择事件为一体。注意:点击事件和选择事件不能同时存在。", "image": "assets/images/widgets/InputChip.png" }, @@ -144,9 +144,9 @@ "id": 15, "family": 0, "name": "FilterChip", + "linkWidget": "11,12,13,14,153", "nameCN": "过滤小条", - "childCount": 3, - "lever": 4.0, + "lever": 4, "info": "和Chip组件类似的样式，具有选中与否的属性和选中事件。当选中时左侧组件上层会被✔️遮罩。", "image": "assets/images/widgets/FilterChip.png" }, @@ -155,8 +155,8 @@ "family": 0, "name": "ListTile", "nameCN": "列表瓦片", - "childCount": 4, - "lever": 3.5, + "linkWidget": "162", + "lever": 3, "info": "Flutter提供的一个通用列表条目结构，为左中右结构。相应位置可插入组件，可以很方便地应对特定的条目。", "image": "assets/images/widgets/ListTile.png" }, @@ -165,8 +165,8 @@ "family": 0, "name": "CheckboxListTile", "nameCN": "复选瓦片", - "childCount": 3, - "lever": 3.0, + "linkWidget": "39", + "lever": 3, "info": "Flutter提供的一个通用列表条目结构，为左中结构,尾部是一个CheckBox。相应位置可插入组件，可以很方便地应对特定的条目。", "image": "assets/images/widgets/CheckBoxListTile.png" }, @@ -175,8 +175,8 @@ "family": 0, "name": "SwitchListTile", "nameCN": "切钮瓦片", - "childCount": 3, - "lever": 3.8, + "linkWidget": "40", + "lever": 3, "info": "Flutter提供的一个通用列表条目结构，为左中结构,尾部是一个Switch。相应位置可插入组件，可以很方便地应对特定的条目。", "image": "assets/images/widgets/SwitchListTile.png" }, @@ -185,8 +185,8 @@ "family": 0, "name": "RadioListTile", "nameCN": "选钮瓦片", - "childCount": 3, - "lever": 3.8, + "linkWidget": "45", + "lever": 3, "info": "Flutter提供的一个通用列表条目结构，为中右结构,尾部是一个Radio。相应位置可插入组件，可以很方便地应对特定的条目。", "image": "assets/images/widgets/RadioListTile.png" }, @@ -195,8 +195,8 @@ "family": 0, "name": "GridTileBar", "nameCN": "网格瓦片头", - "childCount": 4, - "lever": 3.0, + "linkWidget": "21", + "lever": 2, "info": "Flutter提供的一个通用头结构，为左中右结构。相应位置可插入组件，可以很方便地应对特定的条目，相比ListTile而言，属性较少。", "image": "assets/images/widgets/GridTileBar.png" }, @@ -205,9 +205,9 @@ "family": 0, "name": "GridTile", "nameCN": "网格瓦片", - "childCount": 4, - "lever": 3.0, - "info": "Flutter提供的一个通用列表条目结构，可指定头、尾、子组件，常用与网格列表。", + "linkWidget": "20", + "lever": 3, + "info": "Flutter提供的一个通用列表条目结构，可指定头、尾、子组件，常用于网格列表。", "image": "assets/images/widgets/GridTile.png" }, { @@ -215,9 +215,9 @@ "family": 0, "name": "UserAccountsDrawerHeader", "nameCN": "展示头", - "childCount": 4, + "linkWidget": "154", "lever": 3.8, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目,常用于Drawer中。", "image": "assets/images/widgets/UserAccountsDrawerHeader.png" }, { @@ -225,19 +225,19 @@ "family": 0, "name": "MaterialButton", "nameCN": "材料按钮", - "childCount": 1, - "lever": 3.8, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "25,26,27,154", + "lever": 4, + "info": "基于RawMaterialButton实现的通用Material按钮。可盛放一个子组件,能定义颜色、形状等表现,可接收点击和长按事件。", "image": "" }, { "id": 24, "family": 1, "name": "CupertinoButton", - "nameCN": "ios按钮", - "childCount": 1, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "nameCN": "iOS按钮", + "linkWidget": "23", + "lever": 3, + "info": "iOS风格的按钮。可指定颜色、点击时透明度、内边距、圆角等。可接收点击事件。", "image": "" }, { @@ -245,9 +245,9 @@ "family": 0, "name": "FlatButton", "nameCN": "平按钮", - "childCount": 1, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "24,26,27,154", + "lever": 3, + "info": "无阴影的平按钮，基于MaterialButton实现，所有属性和MaterialButton类似。", "image": "" }, { @@ -255,9 +255,9 @@ "family": 0, "name": "RaisedButton", "nameCN": "浮起按钮", - "childCount": 1, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "24,25,27,154", + "lever": 3, + "info": "有阴影的浮起按钮，基于MaterialButton实现，所有属性和MaterialButton类似。", "image": "" }, { @@ -265,9 +265,9 @@ "family": 0, "name": "OutlineButton", "nameCN": "线框按钮", - "childCount": 1, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "23,24,25,154", + "lever": 3, + "info": "边框样式按钮，基于MaterialButton实现，所有属性和MaterialButton类似。", "image": "" }, { @@ -275,9 +275,9 @@ "family": 0, "name": "FloatingActionButton", "nameCN": "浮动按钮", - "childCount": 1, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "64", + "lever": 4, + "info": "浮动按钮，一般用于Scaffold中，可摆放在特定位置。可盛放一个子组件,接收点击、可定义颜色、形状等。", "image": "" }, { @@ -285,9 +285,9 @@ "family": 0, "name": "ButtonBar", "nameCN": "按钮栏", - "childCount": 1, - "lever": 2.8, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "", + "lever": 3, + "info": "接收组件列表，常用于盛放若干个按钮。可指定对齐方式、边距等信息。", "image": "" }, { @@ -295,19 +295,18 @@ "family": 0, "name": "IconButton", "nameCN": "图标按钮", - "childCount": 1, - "lever": 2.0, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "", + "lever": 2, + "info": "可点击的图标按钮，可指定图标信息、内边距、大小、颜色等，接收点击事件。", "image": "" }, { "id": 31, "family": 0, "name": "BackButton", - "nameCN": "返回按钮", - "childCount": 1, - "lever": 1.3, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "30", + "lever": 1, + "info": "一个具有返回功能的IconButton,返回图标不可更改。在iOS和Android中表现不同", "image": "" }, { @@ -315,9 +314,9 @@ "family": 0, "name": "CloseButton", "nameCN": "关闭按钮", - "childCount": 0, + "linkWidget": "30", "lever": 1.0, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "info": "一个具有关闭功能的IconButton,关闭图标不可更改。", "image": "" }, { @@ -325,9 +324,9 @@ "family": 0, "name": "ToggleButtons", "nameCN": "切换按钮组", - "childCount": 0, - "lever": 4.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "", + "lever": 4, + "info": "接收组件列表，可指定边线、圆角、颜色等属性。根据具体逻辑，可以实现多个按钮单选或多选的需求。", "image": "" }, { @@ -335,9 +334,9 @@ "family": 0, "name": "Divider", "nameCN": "水平分割线", - "childCount": 0, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "35", + "lever": 2, + "info": "水平分割线，可指定颜色、高度、粗细、左右边距信息，常用与列表的item分割线。", "image": "" }, { @@ -345,9 +344,9 @@ "family": 0, "name": "VerticalDivider", "nameCN": "竖直分割线", - "childCount": 0, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "34", + "lever": 2, + "info": "竖直分割线，可指定颜色、宽度、粗细、上下边距信息，常用与列表的item分割线。", "image": "" }, { @@ -355,9 +354,9 @@ "family": 0, "name": "Placeholder", "nameCN": "占位组件", - "childCount": 0, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "", + "lever": 1, + "info": "一个矩形和叉叉的占位组件,可指定颜色、线宽、宽高等属性。", "image": "" }, { @@ -365,9 +364,9 @@ "family": 0, "name": "GridPager", "nameCN": "网格线组件", - "childCount": 0, - "lever": 2.5, - "info": "Flutter提供的一个通用展示结构，相应位置可插入组件，可以很方便地应对特定的条目。", + "linkWidget": "", + "lever": 2, + "info": "可容纳一个组件，在其上绘制网格。可指定颜色、线宽、间距等属性。", "image": "" }, { @@ -375,8 +374,8 @@ "family": 1, "name": "Image", "nameCN": "图片组件", - "childCount": 0, - "lever": 2.5, + "linkWidget": "8,87", + "lever": 5, "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", "image": "" }, @@ -385,9 +384,9 @@ "family": 1, "name": "Checkbox", "nameCN": "复选框", - "childCount": 0, - "lever": 2.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "17", + "lever": 4, + "info": "复选框组件，常用于配置的切换，可指定颜色，接收状态变化回调，也可指定三态。", "image": "" }, { @@ -395,9 +394,9 @@ "family": 1, "name": "Switch", "nameCN": "切钮", - "childCount": 0, - "lever": 3.0, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "41,18", + "lever": 4, + "info": "切换选钮,常用于配置的切换，可指定小圆颜色、图片，滑槽颜色等，接收状态变化回调。", "image": "" }, { @@ -405,9 +404,9 @@ "family": 1, "name": "CupertinoSwitch", "nameCN": "iOS切钮", - "childCount": 0, - "lever": 3.0, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "40", + "lever": 3, + "info": "iOS风格的切换选钮,常用于配置的切换，可指定颜色，接收状态变化回调。", "image": "" }, { @@ -415,19 +414,19 @@ "family": 1, "name": "Slider", "nameCN": "滑块", - "childCount": 0, - "lever": 3.0, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "43,44", + "lever": 4, + "info": "滑块组件，可以在指定的最大值和最小值之间拖动选择。可指定颜色、分段数及显示的标签，接收进度变化回调。", "image": "" }, { "id": 43, "family": 1, "name": "CupertinoSlider", + "linkWidget": "42", "nameCN": "iOS滑块", - "childCount": 0, - "lever": 3.0, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "lever": 3, + "info": "iOS风格的滑块组件，可以在指定的最大值和最小值之间拖动选择。可指定颜色，接收进度变化回调。", "image": "" }, { @@ -435,9 +434,9 @@ "family": 1, "name": "RangeSlider", "nameCN": "范围滑块", - "childCount": 0, - "lever": 3.0, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "42", + "lever": 4, + "info": "范围滑块组件，支持两点拖动，获取之间的范围。可指定颜色、分段数及显示的标签，接收进度变化回调。", "image": "" }, { @@ -445,9 +444,9 @@ "family": 1, "name": "Radio", "nameCN": "选钮", - "childCount": 0, - "lever": 3.0, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "19", + "lever": 4, + "info": "由于选中和未选择状态的圆钮，多个Radio根据逻辑可以实现单选或多选的需求。可指定颜色，接收状态变化回调。", "image": "" }, { @@ -455,9 +454,9 @@ "family": 1, "name": "CircularProgressIndicator", "nameCN": "圆形进度", - "childCount": 0, - "lever": 2.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "47,48", + "lever": 3, + "info": "圆形的进度显示,可指定颜色、线宽、进度等属性。value为null时会不停旋转。", "image": "" }, { @@ -465,9 +464,9 @@ "family": 1, "name": "LinearProgressIndicator", "nameCN": "水平进度", - "childCount": 0, - "lever": 2.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "46,48", + "lever": 3, + "info": "直线型的进度显示,可指定颜色、进度等属性。value为null时会不停旋转。", "image": "" }, { @@ -475,9 +474,9 @@ "family": 1, "name": "CupertinoActivityIndicator", "nameCN": "iOS指示器", - "childCount": 0, - "lever": 2.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "46,47", + "lever": 2, + "info": "iOS样式的loading显示组件，可指定半径和是否旋转。", "image": "" }, { @@ -485,9 +484,9 @@ "family": 1, "name": "RefreshIndicator", "nameCN": "刷新指示器", - "childCount": 0, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "", + "lever": 4, + "info": "内部嵌套可滑动区域，下滑时会显示刷新图标，松手后可以执行指定的异步方法。可指定颜色、到顶端距离等属性。", "image": "" }, { @@ -495,9 +494,9 @@ "family": 1, "name": "Tooltip", "nameCN": "提示工具", - "childCount": 1, - "lever": 2.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "", + "lever": 3, + "info": "由于显示提示信息的组件，长按时显示信息。可指定边距、显示时长、文字样式、装饰灯属性。", "image": "" }, { @@ -505,9 +504,9 @@ "family": 1, "name": "ExpandIcon", "nameCN": "展开图标", - "childCount": 1, - "lever": 2.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "66,125", + "lever": 1, + "info": "一个展开按钮，点击时会自己执行旋转180的动画。可指定颜色、大小、边距，接收点击事件。", "image": "" }, { @@ -515,9 +514,9 @@ "family": 1, "name": "ExpansionTile", "nameCN": "展开瓦片", - "childCount": 1, - "lever": 2.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "178", + "lever": 3, + "info": "一个通用的展开栏,可在指定的部位安放组件,点击时会折叠显隐下方组件。接收折叠时事件。", "image": "" }, { @@ -525,9 +524,9 @@ "family": 1, "name": "SelectableText", "nameCN": "可选择文字", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "2", + "lever": 3, + "info": "可选择的文字，可以选择、复制。可指定浮标的颜色、大小、文字样式、对齐方式等。", "image": "" }, { @@ -535,9 +534,9 @@ "family": 1, "name": "TextField", "nameCN": "输入框", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "199", + "lever": 5, + "info": "由于输入的组件，拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。接收输入变化、完成输入等事件。", "image": "" }, { @@ -545,9 +544,9 @@ "family": 1, "name": "DropdownButton", "nameCN": "下拉按钮", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "181", + "lever": 4, + "info": "用于下拉选择的按钮，可指定图标、影深、提示等属性，接收选中变化的事件。", "image": "" }, { @@ -555,9 +554,9 @@ "family": 1, "name": "PopupMenuButton", "nameCN": "菜单按钮", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "174", + "lever": 4, + "info": "弹出菜单栏,可指定偏移、颜色、影深、形状等属性。接收item选中的事件和取消选择事件。", "image": "" }, { @@ -565,9 +564,9 @@ "family": 1, "name": "AppBar", "nameCN": "应用头栏", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "64", + "lever": 4, + "info": "一个应用顶部栏的通用结构，可在指定的部位放置相应的组件，常用于Scaffold组件中。", "image": "" }, { @@ -575,9 +574,9 @@ "family": 1, "name": "TabBar", "nameCN": "标签栏", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "57,59,148", + "lever": 3, + "info": "可滑动和点击标签栏，通常用于AppBar的底部,可与TabBarView联用，实现滑页的效果。", "image": "" }, { @@ -585,9 +584,9 @@ "family": 1, "name": "TabBarView", "nameCN": "标签页", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "58", + "lever": 2, + "info": "通常与TabBar联用，实现滑页的效果。一般不单独使用。", "image": "" }, { @@ -595,9 +594,9 @@ "family": 1, "name": "BottomNavigationBar", "nameCN": "底部导航", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "61", + "lever": 4, + "info": "一个底部导航栏，通常用于Scaffold组件的底部，可指定颜色和模式，接受点击回调，可与PageView实现切页效果。", "image": "" }, { @@ -605,9 +604,9 @@ "family": 1, "name": "BottomAppBar", "nameCN": "底部导航", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "60", + "lever": 4, + "info": "一个可凹嵌的底部导航栏，通常用于Scaffold组件的底部，可指定颜色、影深、形状等属性，可与PageView实现切页效果。", "image": "" }, { @@ -615,9 +614,9 @@ "family": 1, "name": "CupertinoNavigationBar", "nameCN": "iOS导航", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "", + "lever": 3, + "info": "一个iOS风格的应用顶部栏的通用结构，可在指定的部位放置相应的组件。可指定背景色、间距、边线等属性。", "image": "" }, { @@ -625,9 +624,9 @@ "family": 1, "name": "CupertinoTabBar", "nameCN": "iOS页签", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "158", + "lever": 3, + "info": "一个iOS风格的TabBar,通常用于CupertinoTabScaffold。可指定颜色、图标大小、边线等数据。接收item的点击事件。", "image": "" }, { @@ -635,19 +634,19 @@ "family": 1, "name": "Scaffold", "nameCN": "脚手架", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "linkWidget": "57,60,61", + "lever": 4, + "info": "一个通用app结构，包括上、下、左、右、中、浮动按钮部位，对应位置可盛放组件。", "image": "" }, { "id": 65, "family": 1, "name": "MaterialApp", - "nameCN": "脚手架", - "childCount": 1, - "lever": 3.8, - "info": "用于显示一张图片，可以从文件、内存、网络、资源里加载。可以指定适应方式、样式、颜色混合模式、重复模式等", + "nameCN": "Material应用", + "linkWidget": "64", + "lever": 5, + "info": "Material应用的顶级组件，包含路由生成器、主题、语言、主页等属性。", "image": "" }, { @@ -655,9 +654,9 @@ "family": 2, "name": "ClipOval", "nameCN": "椭圆裁剪", - "childCount": 1, - "lever": 2.8, - "info": "将一个组件以宽高为长轴和短轴进行椭圆裁切。", + "linkWidget": "67,68,69", + "lever": 3, + "info": "可容纳一个子组件，并将其以宽高为长轴和短轴进行椭圆裁切。", "image": "" }, { @@ -665,9 +664,9 @@ "family": 2, "name": "ClipRect", "nameCN": "矩形裁剪", - "childCount": 1, - "lever": 2.8, - "info": "将一个组件进行矩形裁切。可借助SizedBox、Align、AspectRadio等限定组件进行定域。", + "linkWidget": "66,68,69", + "lever": 3, + "info": "可容纳一个子组件，并将其进行矩形裁切。可借助SizedBox、Align、AspectRadio等限定组件进行定域。", "image": "" }, { @@ -675,9 +674,9 @@ "family": 2, "name": "ClipRRect", "nameCN": "圆角矩形裁剪", - "childCount": 1, - "lever": 2.8, - "info": "将一个组件进行圆角矩形裁剪。指定borderRadius作为边角半径。", + "linkWidget": "66,67,69", + "lever": 3, + "info": "可容纳一个子组件，并将其进行圆角矩形裁剪。指定borderRadius作为边角半径。", "image": "" }, { @@ -685,9 +684,9 @@ "family": 2, "name": "ClipPath", "nameCN": "路径裁剪", - "childCount": 1, - "lever": 3.8, - "info": "将一个组件按指定路径进行裁剪。可以自定义路径形状，是一个很灵活的裁剪组件。", + "linkWidget": "66,67,68", + "lever": 5, + "info": "可容纳一个子组件，并将其按指定路径进行裁剪。可以自定义路径形状，是一个很灵活的裁剪组件。", "image": "" }, { @@ -695,9 +694,9 @@ "family": 2, "name": "DecoratedBox", "nameCN": "装饰盒", - "childCount": 1, - "lever": 3.8, - "info": "将一个组件按进行装饰。核心属性为decoration可设置边线、渐变、阴影、背景图等。", + "linkWidget": "", + "lever": 3, + "info": "可容纳一个子组件，可将其进行装饰。核心属性为decoration,可设置边线、渐变、阴影、背景图等。", "image": "" }, { @@ -705,9 +704,9 @@ "family": 2, "name": "Offstage", "nameCN": "装饰盒", - "childCount": 1, - "lever": 3.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "10", + "lever": 3, + "info": "可容纳一个子组件，可更改其的消失与否。offstage属性为true表示隐藏。", "image": "" }, { @@ -715,9 +714,9 @@ "family": 2, "name": "RotatedBox", "nameCN": "旋转盒", - "childCount": 1, - "lever": 1.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "90", + "lever": 2, + "info": "可容纳一个子组件，将其沿顺时针旋转quarterTurns*90°。", "image": "" }, { @@ -725,9 +724,9 @@ "family": 2, "name": "Opacity", "nameCN": "透明化", - "childCount": 1, - "lever": 1.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "89,118", + "lever": 3, + "info": "可容纳一个子组件，将其透明度变为opacity值, opacity在0~1之间。", "image": "" }, { @@ -735,9 +734,9 @@ "family": 2, "name": "Padding", "nameCN": "边距组件", - "childCount": 1, - "lever": 1.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "1,191", + "lever": 4, + "info": "可容纳一个子组件，添加自身内边距来限制孩子组件的占位,核心属性为padding。", "image": "" }, { @@ -745,9 +744,9 @@ "family": 2, "name": "Baseline", "nameCN": "基线组件", - "childCount": 1, - "lever": 1.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "2", + "lever": 2, + "info": "可容纳一个子组件，通过控制基线高度来控制子组件的位置。一般用于文字组件。", "image": "" }, { @@ -755,9 +754,9 @@ "family": 2, "name": "SizedBox", "nameCN": "定尺寸盒", - "childCount": 1, - "lever": 1.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "1", + "lever": 4, + "info": "可容纳一个子组件，通过指定宽高限定子组件容身区域。", "image": "" }, { @@ -765,9 +764,9 @@ "family": 2, "name": "AspectRatio", "nameCN": "比例盒", - "childCount": 1, - "lever": 1.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "82", + "lever": 3, + "info": "可容纳一个子组件，通过指定宽高比aspectRatio，来限定子组件容身区域。", "image": "" }, { @@ -775,9 +774,9 @@ "family": 2, "name": "Transform", "nameCN": "变换", - "childCount": 1, - "lever": 1.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "1", + "lever": 4, + "info": "可容纳一个子组件，可以通过一个4*4的变换矩阵对子组件进行变换。", "image": "" }, { @@ -785,9 +784,9 @@ "family": 2, "name": "LimitedBox", "nameCN": "限制盒", - "childCount": 1, - "lever": 2.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "80", + "lever": 3, + "info": "可容纳一个子组件，通过指定最大宽高来限定子组件容身区域。", "image": "" }, { @@ -795,9 +794,9 @@ "family": 2, "name": "ConstrainedBox", "nameCN": "约束盒", - "childCount": 1, - "lever": 2.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "79,81", + "lever": 3, + "info": "可容纳一个子组件，通过指定最大、最小宽高,来限定子组件容身区域。", "image": "" }, { @@ -805,9 +804,9 @@ "family": 2, "name": "UnconstrainedBox", "nameCN": "约束盒", - "childCount": 1, - "lever": 2.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "80", + "lever": 3, + "info": "可容纳一个子组件，并解除该组件的所有区域约束,展现自我尺寸。", "image": "" }, { @@ -815,9 +814,9 @@ "family": 2, "name": "FractionallySizedBox", "nameCN": "分率盒", - "childCount": 1, - "lever": 2.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "77", + "lever": 3, + "info": "可容纳一个子组件，指定宽高分率,限定子组件区域为父容器宽高*各分率，及对齐方式alignment。", "image": "" }, { @@ -825,9 +824,9 @@ "family": 2, "name": "OverflowBox", "nameCN": "溢出盒", - "childCount": 1, - "lever": 2.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "84", + "lever": 4, + "info": "可容纳一个子组件，且子组件允许溢出父组件区域，可以指定宽高的最大最小区域进行限定，拥有对齐属性alignment。", "image": "" }, { @@ -835,9 +834,9 @@ "family": 2, "name": "SizedOverflowBox", "nameCN": "尺寸溢出盒", - "childCount": 1, + "linkWidget": "83", "lever": 2.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "info": "可容纳一个子组件，且子组件允许溢出父组件区域，可以通过size属性对子组件进行偏移，拥有对齐属性alignment。", "image": "" }, { @@ -845,9 +844,9 @@ "family": 2, "name": "Align", "nameCN": "对齐组件", - "childCount": 1, - "lever": 4.8, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "86,111,120", + "lever": 5, + "info": "可容纳一个子组件，可以通过alignment让子组件，定位在父组件宽高的任何指定分率出。", "image": "" }, { @@ -855,9 +854,9 @@ "family": 2, "name": "Center", "nameCN": "居中组件", - "childCount": 1, - "lever": 1.5, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "linkWidget": "85", + "lever": 3, + "info": "可容纳一个子组件，并使其居中于父组件，是Align组件的一种精简模式。", "image": "" }, { @@ -865,9 +864,9 @@ "family": 2, "name": "FittedBox", "nameCN": "适应盒", - "childCount": 1, + "linkWidget": "38", "lever": 1.5, - "info": "更改一个组件的消失与否。offstage属性为true表示隐藏。", + "info": "可容纳一个子组件，使用fit属性决定子组件区域相当于父组件的适应模式，拥有对齐属性alignment。", "image": "" }, { @@ -875,9 +874,9 @@ "family": 2, "name": "ColorFiltered", "nameCN": "滤色器", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "", + "lever": 5, + "info": "可容纳一个子组件，可以并将组件按照29中叠色模式和任意组件混合，强大到我不知道该说什么好。app一键全灰了解一下。", "image": "" }, { @@ -885,9 +884,9 @@ "family": 2, "name": "FadeTransition", "nameCN": "透明变换", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "73,118", + "lever": 3, + "info": "可容纳一个子组件，并使其进行透明度渐变动画，需要提供动画器opacity。", "image": "" }, { @@ -895,9 +894,9 @@ "family": 1, "name": "RotationTransition", "nameCN": "旋转变换", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "72", + "lever": 3, + "info": "可容纳一个子组件，并使其进行旋转动画，需要提供动画器turns，拥有alignment属性。", "image": "" }, { @@ -905,9 +904,9 @@ "family": 1, "name": "ScaleTransition", "nameCN": "缩放变换", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "", + "lever": 3, + "info": "可容纳一个子组件，并使其进行缩放动画，需要提供动画器scale，拥有alignment属性。", "image": "" }, { @@ -915,9 +914,9 @@ "family": 1, "name": "SizeTransition", "nameCN": "尺寸变换", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "201", + "lever": 3, + "info": "可容纳一个子组件，并使其进行尺寸动画，需要提供动画器sizeFactor，可指定尺寸变化轴及轴向的axisAlignment。", "image": "" }, { @@ -925,9 +924,9 @@ "family": 1, "name": "PositionedTransition", "nameCN": "位置变换", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "97", + "lever": 3, + "info": "只能用于Stack中,可容纳一个子组件，让其在两个矩形间进行位置动画，需要提供动画器rect。", "image": "" }, { @@ -935,9 +934,9 @@ "family": 3, "name": "Flex", "nameCN": "弹性布局", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "95,96,106,107,109", + "lever": 5, + "info": "Row和Column的父类,Flutter中最强大的布局方式。可容纳多个组件，可与Spacer、Expended、Flexible组件联用进行灵活布局", "image": "" }, { @@ -945,9 +944,9 @@ "family": 3, "name": "Row", "nameCN": "行布局", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "94,96", + "lever": 4, + "info": "排布方向为横向的Flex布局，可容纳多个组件。其他属性全部一致，详见Flex。", "image": "" }, { @@ -955,9 +954,9 @@ "family": 3, "name": "Column", "nameCN": "列布局", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "94,95", + "lever": 4, + "info": "排布方向为竖向的Flex布局，可容纳多个组件。其他属性全部一致，详见Flex。", "image": "" }, { @@ -965,9 +964,9 @@ "family": 3, "name": "Stack", "nameCN": "堆叠布局", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "94,95,161", + "lever":5, + "info": "可容纳多个组件,以堆叠的方式摆放子组件，后者居上。拥有alignment属性，可与Positioned组件联合使用，精确定位。", "image": "" }, { @@ -975,9 +974,9 @@ "family": 3, "name": "Wrap", "nameCN": "包裹布局", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "94,95", + "lever": 5, + "info": "可容纳多个组件,按照指定方向依次排布，可以很方便处理孩子的间距,当越界时可以自动换行。拥有主轴和交叉轴的对齐方式，比较灵活。", "image": "" }, { @@ -985,9 +984,9 @@ "family": 3, "name": "Flow", "nameCN": "流动布局", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "98,94", + "lever": 5, + "info": "可容纳多个组件, 需要自己制定排布的代理，可以高强度自定义组件的排布，实现普通布局无法达到的效果。布局王者，当之无愧。", "image": "" }, { @@ -995,9 +994,9 @@ "family": 1, "name": "AnimatedCrossFade", "nameCN": "组件切换", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "116", + "lever": 5, + "info": "将两个组件切换时呈现动画效果，可指定动画曲线、时长、对齐方式等属性。是一个非常有用的组件。", "image": "" }, { @@ -1005,9 +1004,9 @@ "family": 3, "name": "RichText", "nameCN": "富文本", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "2", + "lever": 5, + "info": "可以容纳多种文字样式或各种组件的富文本组件，应用较为广泛。", "image": "" }, { @@ -1015,9 +1014,9 @@ "family": 0, "name": "DataTable", "nameCN": "数据表格", - "childCount": 1, - "lever": 3.5, - "info": "将一个组件与一个颜色进行叠合。主要是29种BlendMode类型。", + "linkWidget": "110", + "lever": 3, + "info": "一个表格组件，可以制订逻辑进行点击、修改、排序等操作。", "image": "" }, { @@ -1025,8 +1024,8 @@ "family": 1, "name": "Draggable", "nameCN": "可拖拽组件", - "childCount": 1, - "lever": 5.0, + "linkWidget": "104,105", + "lever": 4, "info": "可以让组件在界面上任意拖拽,可存放一个泛型T的数据。通常和DragTarget组合使用，来完成拖拽效果。", "image": "" }, @@ -1035,8 +1034,8 @@ "family": 1, "name": "DragTarget", "nameCN": "拖拽目标", - "childCount": 1, - "lever": 5.0, + "linkWidget": "103,105", + "lever": 4, "info": "一个拖拽的目标区域，可接收Draggable组件的信息。可以获取拖拽时的回调。", "image": "" }, @@ -1045,9 +1044,9 @@ "family": 1, "name": "LongPressDraggable", "nameCN": "拖拽目标", - "childCount": 1, - "lever": 5.0, - "info": "长按时让组件在界面上任意拖拽,可存放一个泛型T的数据。通常和DragTarget组合使用，来完成拖拽效果。。", + "linkWidget": "103,104", + "lever": 4, + "info": "长按时让组件在界面上任意拖拽,可存放一个泛型T的数据。通常和DragTarget组合使用，来完成拖拽效果。", "image": "" }, { @@ -1055,8 +1054,8 @@ "family": 5, "name": "Expended", "nameCN": "延展组件", - "childCount": 1, - "lever": 3.0, + "linkWidget": "94,109", + "lever": 4, "info": "父类是Flexible，相当于一个fit类型为tight的Flexible组件。可嵌套孩子利用剩余空间对占位空间进行延展。", "image": "" }, @@ -1065,8 +1064,8 @@ "family": 0, "name": "Spacer", "nameCN": "空间组件", - "childCount": 0, - "lever": 3.0, + "linkWidget": "94", + "lever": 3, "info": "只能用于Row、Column和Flex布局中,可利用剩余空间进行占位，没有子组件。", "image": "" }, @@ -1075,8 +1074,8 @@ "family": 5, "name": "Positioned", "nameCN": "定位组件", - "childCount": 0, - "lever": 3.0, + "linkWidget": "97,159,121", + "lever": 3, "info": "只能用于Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。", "image": "" }, @@ -1085,8 +1084,8 @@ "family": 5, "name": "Flexible", "nameCN": "灵活组件", - "childCount": 0, - "lever": 3.0, + "linkWidget": "94,106", + "lever": 3, "info": "只能用于只能用于Row、Column和Flex布局中，可嵌套孩子利用剩余空间对占位空间进行延展,也可指定适应类型。", "image": "" }, @@ -1095,9 +1094,9 @@ "family": 6, "name": "Table", "nameCN": "表格组件", - "childCount": 0, - "lever": 3.0, - "info": "只能用于只能用于Row、Column和Flex布局中，可嵌套孩子利用剩余空间对占位空间进行延展,也可指定适应类型。", + "linkWidget": "102", + "lever": 4, + "info": "用于展示表格的组件,可指定边线、列宽、文字方向等属性,核心对象类型是TableRow。", "image": "" }, { @@ -1105,8 +1104,8 @@ "family": 1, "name": "AlignTransition", "nameCN": "对齐变换", - "childCount": 0, - "lever": 3.0, + "linkWidget": "85,120", + "lever": 3, "info": "AnimatedWidget的子类,使用Alignment类型的动画器让子组件在两个Alignment对象之间进行过渡动画。", "image": "" }, @@ -1114,9 +1113,9 @@ "id": 112, "family": 1, "name": "SlideTransition", - "nameCN": "对齐变换", - "childCount": 0, - "lever": 3.0, + "nameCN": "滑动变换", + "linkWidget": "", + "lever": 3, "info": "AnimatedWidget的子类,使用Offset类型的动画器让子组件在两个Offset对象之间进行过渡动画。", "image": "" }, @@ -1125,8 +1124,8 @@ "family": 1, "name": "DecoratedBoxTransition", "nameCN": "装饰变换", - "childCount": 0, - "lever": 4.0, + "linkWidget": "70", + "lever": 3, "info": "AnimatedWidget的子类,使用Decorated类型的动画器让子组件在两个Decorated对象之间进行过渡动画。", "image": "" }, @@ -1135,8 +1134,8 @@ "family": 1, "name": "DefaultTextStyleTransition", "nameCN": "文字样式变换", - "childCount": 0, - "lever": 4.0, + "linkWidget": "124", + "lever": 3, "info": "AnimatedWidget的子类,使用TextStyle类型的动画器让文字组件在两个TextStyle对象之间进行过渡动画。", "image": "" }, @@ -1145,8 +1144,8 @@ "family": 1, "name": "RelativePositionedTransition", "nameCN": "矩形位置变换", - "childCount": 0, - "lever": 4.0, + "linkWidget": "70", + "lever": 3, "info": "AnimatedWidget的子类,使用Rect类型的动画器让子组件在两个Rect对象之间进行过渡动画。", "image": "" }, @@ -1155,9 +1154,9 @@ "family": 1, "name": "AnimatedSwitcher", "nameCN": "动画切换", - "childCount": 0, - "lever": 4.0, - "info": "AnimatedWidget的子类,使用Rect类型的动画器让子组件在两个Rect对象之间进行过渡动画。", + "linkWidget": "100", + "lever": 4, + "info": "当子组件变化时执行动画，需要指定子组件的key进行标识。动画方式可以自定义,能指定动画时长、动画曲线等属性。", "image": "" }, { @@ -1165,9 +1164,9 @@ "family": 1, "name": "AnimatedList", "nameCN": "动画列表", - "childCount": 0, - "lever": 5.0, - "info": "强化版的ListView,可以对item进行动画处理。如在添加、删除是item的动画。", + "linkWidget": "162", + "lever": 3, + "info": "强化版的ListView,可以对item进行动画处理。比如在添加、删除是item的动画。", "image": "" }, { @@ -1175,8 +1174,8 @@ "family": 1, "name": "AnimatedOpacity", "nameCN": "透明动画", - "childCount": 0, - "lever": 4.0, + "linkWidget": "89,73", + "lever": 3, "info": "能让子组件进行Opacity(透明度)动画，可指定时长和曲线，有动画结束事件。", "image": "" }, @@ -1185,8 +1184,8 @@ "family": 1, "name": "AnimatedPadding", "nameCN": "边距动画", - "childCount": 0, - "lever": 3.0, + "linkWidget": "74", + "lever": 3, "info": "能让子组件进行Padding(内边距)动画，可指定时长和曲线，有动画结束事件。", "image": "" }, @@ -1195,8 +1194,8 @@ "family": 1, "name": "AnimatedAlign", "nameCN": "对齐动画", - "childCount": 0, - "lever": 3.0, + "linkWidget": "85,111", + "lever": 3, "info": "能让子组件进行Align(对齐)动画，可指定时长和曲线，有动画结束事件。", "image": "" }, @@ -1205,8 +1204,8 @@ "family": 1, "name": "AnimatedPositioned", "nameCN": "定位动画", - "childCount": 0, - "lever": 3.0, + "linkWidget": "108,93,122", + "lever": 3, "info": "能让子组件进行Positioned(定位)动画，可指定时长和曲线，有动画结束事件。只能用于Stack之中。", "image": "" }, @@ -1215,8 +1214,8 @@ "family": 1, "name": "AnimatedPositionedDirectional", "nameCN": "方向定位动画", - "childCount": 0, - "lever": 3.0, + "linkWidget": "121,159", + "lever": 3, "info": "能让子组件进行PositionedDirectional(方向定位)动画，可指定时长和曲线，有动画结束事件。只能用于Stack之中。", "image": "" }, @@ -1225,8 +1224,8 @@ "family": 1, "name": "AnimatedContainer", "nameCN": "容器动画", - "childCount": 0, - "lever": 3.0, + "linkWidget": "1", + "lever": 5, "info": "集合alignment、padding、color、decoration、width、height、constraints、margin、transform于一身，这些属性皆可动画，可指定时长和曲线，有动画结束事件。", "image": "" }, @@ -1235,8 +1234,8 @@ "family": 1, "name": "AnimatedDefaultTextStyle", "nameCN": "容器动画", - "childCount": 0, - "lever": 3.0, + "linkWidget": "114", + "lever": 3, "info": "能让子文字组件进行TextStyle(文字样式)动画，可指定时长和曲线，有动画结束事件。", "image": "" }, @@ -1245,8 +1244,8 @@ "family": 0, "name": "AnimatedIcon", "nameCN": "图标动画", - "childCount": 0, - "lever": 3.0, + "linkWidget": "6", + "lever": 3, "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", "image": "" }, @@ -1255,9 +1254,9 @@ "family": 0, "name": "Dialog", "nameCN": "对话框", - "childCount": 1, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "linkWidget": "", + "lever": 2, + "info": "最简易的对话框面板,包含一个内容组件,可指定影深、背景色、形状等属性。", "image": "" }, { @@ -1265,29 +1264,29 @@ "family": 0, "name": "AlertDialog", "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "linkWidget": "129", + "lever": 3, + "info": "一个通用的对话框结构，可指定头、中、尾处的组件。拥有标题、内容的文字样式和边距，影深、形状等属性。", "image": "" }, { "id": 128, "family": 0, "name": "SimpleDialog", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "简单对话框", + "linkWidget": "133", + "lever": 3, + "info": "一个简单的对话框结构，可指定头、中处的组件。拥有拥有标题、内容的文字样式和边距，影深、形状等属性。常与SimpleDialogOption联用。", "image": "" }, { "id": 129, "family": 0, "name": "CupertinoAlertDialog", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "iOS对话框", + "linkWidget": "127", + "lever": 3, + "info": "iOS风格的通用的对话框结构，可指定头、中、尾处的组件。", "image": "" }, { @@ -1295,138 +1294,138 @@ "family": 0, "name": "AboutDialog", "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "linkWidget": "193", + "lever": 1, + "info": "应用的简介对话框，可指定应用图标、应用名、应用版本号等信息和内部的子组件列表，点击左侧按钮可以跳转到证书页。", "image": "" }, { "id": 131, "family": 0, "name": "CupertinoActionSheet", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "iOS行为单", + "linkWidget": "132", + "lever": 3, + "info": "iOS风格的弹出选择结构，可放多的按钮，一般与CupertinoActionSheetAction联用。", "image": "" }, { "id": 132, "family": 0, "name": "CupertinoActionSheetAction", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "iOS行为单按键", + "linkWidget": "131", + "lever": 1, + "info": "一个按钮，应用场景很少，通常用于CupertinoActionSheet中，接收点击事件。", "image": "" }, { "id": 133, "family": 0, "name": "SimpleDialogOption", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "简单对话框选项", + "linkWidget": "128", + "lever": 1, + "info": "一个按钮，应用场景很少，通常用于SimpleDialog中，接收点击事件。", "image": "" }, { "id": 134, "family": 0, "name": "DayPicker", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "日期选择器", + "linkWidget": "135,136", + "lever": 3, + "info": "日期的选择组件，可指定当前日期、选中日期、展示月份等，接收日期选中事件。", "image": "" }, { "id": 135, "family": 1, "name": "MonthPicker", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "月份选择器", + "linkWidget": "134,136", + "lever": 3, + "info": "月份的选择组件，自带上下月切换的监听。可指定选择的日期范围、选中日期等，接收日期选中事件。", "image": "" }, { "id": 136, "family": 1, "name": "YearPicker", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "年份选择器", + "linkWidget": "134,135", + "lever": 3, + "info": "年份的选择组件，长相比较寒酸。可指定选择的日期范围、选中日期等，接收每份选中事件", "image": "" }, { "id": 137, "family": 1, "name": "CupertinoDatePicker", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "iOS日期选择器", + "linkWidget": "138", + "lever": 3, + "info": "高大上的滑滚日期选择器，可指定选择的类型、日期范围等，接收日期选中事件。", "image": "" }, { "id": 138, "family": 1, "name": "CupertinoTimerPicker", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "iOS时间选择器", + "linkWidget": "137", + "lever": 3, + "info": "高大上的滑滚时间选择器，可指定选择的类型、初始时间、背景色等，接收时间选中事件。", "image": "" }, { "id": 139, "family": 1, "name": "CupertinoPicker", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "iOS选择器", + "linkWidget": "179", + "lever": 3, + "info": "高大上的柱面滑动选择器，精妙十足，可指定很多配置属性，接收滑动时选中事件。", "image": "" }, { "id": 140, "family": 1, "name": "SnackBar", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "信息提示条", + "linkWidget": "141,142", + "lever": 4, + "info": "作为组件来说是一个简单的结构组件，可指定形状、影深、背景色等。一般通过ScaffoldState的showSnackBar方法从底部弹出。", "image": "" }, { "id": 141, "family": 1, "name": "SnackBarAction", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "信息提示条按钮", + "linkWidget": "140", + "lever": 1, + "info": "一般只用于SnackBar中，接受点击事件。点击一次后该按钮就会被禁用，可以指定颜色和禁用时颜色。", "image": "" }, { "id": 142, "family": 1, "name": "BottomSheet", - "nameCN": "弹出对话框", - "childCount": 0, - "lever": 3.0, - "info": "使用AnimatedIcons的图标数据，可以根据一个动画控制器来使图标进行动画效果。可指定图标大小、颜色等。", + "nameCN": "底部抽屉", + "linkWidget": "140", + "lever": 4, + "info": "作为组件来说是一个简单的结构组件,可指定形状、影深、背景色、内部组件构造器等。一般通过ScaffoldState的showBottomSheet方法从底部弹出。", "image": "" }, { "id": 143, "family": 1, "name": "CupertinoContextMenu", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, + "nameCN": "ios弹出菜单", + "linkWidget": "144", + "lever": 5, "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", "image": "" }, @@ -1434,360 +1433,580 @@ "id": 144, "family": 1, "name": "CupertinoContextMenuAction", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "ios弹出菜单按钮", + "linkWidget": "143", + "lever": 1, + "info": "一般只用于CupertinoContextMenu中的点击按钮。可指定孩子和尾部图标，接收点击事件。", "image": "" }, { "id": 145, "family": 1, "name": "LicensePage", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "证书页", + "linkWidget": "130,193", + "lever": 1, + "info": "应用的证书页,可指定应用图标、应用名、应用版本号等信息，其他由Flutter自动生成。", "image": "" }, { "id": 146, "family": 0, "name": "GestureDetector", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "手势监听器", + "linkWidget": "147,150", + "lever": 5, + "info": "组件手势事件的检测器,可接受点击、长按、双击，按下、松开、移动等事件，并可以获取触点信息，居家旅行必备组件。", "image": "" }, { "id": 147, "family": 0, "name": "Listener", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "事件监听器", + "linkWidget": "146", + "lever": 3, + "info": "组件事件的监听器,可接受按下、松开、移动、取消等事件。较GestureDetector比较原始，可获取的信息也更多。", "image": "" }, { "id": 148, "family": 0, "name": "Tab", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "标签", + "linkWidget": "58", + "lever": 1, + "info": "一般用于TabBar中的item，上下结构，可指定图标和一个内容组件。", "image": "" }, { "id": 149, "family": 1, "name": "InkResponse", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "水波纹响应", + "linkWidget": "150,152", + "lever": 1, + "info": "水波纹的点击效果，接收点击、双击、长按、取消、高亮变化事件，可指定水波纹颜色、半径、高亮形状等属性。", "image": "" }, { "id": 150, "family": 1, "name": "InkWell", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "水波纹", + "linkWidget": "149,152", + "lever": 4, + "info": "InkResponse的子类，基本属性同InkResponse。一个矩形区域的水波纹，可以知道圆角半径，边线形状等。", "image": "" }, { "id": 151, "family": 1, "name": "TableRowInkWell", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "表格水波纹", + "linkWidget": "110", + "lever": 1, + "info": "只能用于Table的水波纹，接收点击、双击、长按、高亮变化事件，水波纹会作用于表格的一行。", "image": "" }, { "id": 152, "family": 1, "name": "Ink", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "水波", + "linkWidget": "149,150", + "lever": 3, + "info": "使InkWell和InkResponse的水波纹有效,用于绘制图像或其他装饰的Material组件。", "image": "" }, { "id": 153, "family": 1, "name": "RawChip", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "原生小条", + "linkWidget": "11,12,13,14,15", + "lever": 5, + "info": "各自Chip组件的始祖，拥有各自Chip表现的能力，支持选中、点击、删除等事件。详见Chip、FilterChip、ActionChip、InputChip、ChoiceChip。", "image": "" }, { "id": 154, "family": 0, "name": "Drawer", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "滑页栏", + "linkWidget": "64,155", + "lever": 2, + "info": "一般用于Scaffold中的draw和endDraw属性作为左右的滑页栏，可以容纳一个子组件，能指定影深。", "image": "" }, { "id": 155, "family": 0, "name": "DrawerHeader", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "滑页栏", + "linkWidget": "154", + "lever": 2, + "info": "一般用于Drawer中，作为滑页栏的头部。可以指定内外边距、装饰、子组件等属性。", "image": "" }, { "id": 156, "family": 1, "name": "CupertinoApp", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "iOS应用", + "linkWidget": "157,158", + "lever": 4, + "info": "iOS风格应用的顶级组件，包含路由生成器、主题、语言、主页等属性。", "image": "" }, { "id": 157, "family": 1, "name": "CupertinoPageScaffold", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "iOS页面脚手架", + "linkWidget": "62", + "lever": 3, + "info": "iOS风格的页面布局脚手架结构,可指定顶部的导航栏和页面背景色。", "image": "" }, { "id": 158, "family": 1, "name": "CupertinoTabScaffold", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "iOS页签脚手架", + "linkWidget": "63", + "lever": 3, + "info": "iOS风格的页面布局脚手架结构,可指定最底部的导航切换栏可主体内容页。", "image": "" }, { "id": 159, "family": 0, "name": "PositionedDirectional", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "方向定位", + "linkWidget": "108,122", + "lever": 3, + "info": "和Positioned组件功能一样，属性名不同。只能用于Stack中，可以指定左上右下的距离对某个组件进行位置精确安放。", "image": "" }, { "id": 160, "family": 1, "name": "Material", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "材料组件", + "linkWidget": "3", + "lever": 5, + "info": "Material风格组件的领军人物，灵魂核心。可指定颜色、影深、类型、阴影颜色、形状等属性。", "image": "" }, { "id": 161, "family": 3, "name": "IndexedStack", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "索引堆叠", + "linkWidget": "97", + "lever": 4, + "info": "Stack组件的子类,可以堆叠多个组件，并通过index来指定展示的组件索引，其余的会被隐藏。", "image": "" }, { "id": 162, "family": 0, "name": "ListView", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "列表组件", + "linkWidget": "16,163", + "lever": 5, + "info": "列表显示的领军人物，容纳多个子组件，可以通过builder、separated、custom等构造。有内边距、是否反向、滑动控制器等属性。", "image": "" }, { "id": 163, "family": 0, "name": "GridView", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "网格组件", + "linkWidget": "21,162", + "lever": 5, + "info": "容纳多个组件，并以网格的方式。可以通过count、extent、custom、builder等构造。有内边距、是否反向、滑动控制器等属性。", "image": "" }, { "id": 164, "family": 0, "name": "SingleChildScrollView", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "nameCN": "单子滑动", + "linkWidget": "", + "lever": 5, + "info": "使一个组件具有滑动的效果，可指定滑动的方向、是否反向、滑动控制器等属性。", "image": "" }, { "id": 165, "family": 0, - "name": "PageView", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "PageView", + "nameCN": "滑页", + "linkWidget": "", + "lever": 5, + "info": "容纳多个组件页面，可对它们进行滑动切换，可指定滑动的方向、是否反向、滑动控制器等属性。", "image": "" }, { "id": 166, "family": 0, - "name": "CustomPaint", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "CustomPaint", + "nameCN": "绘制组件", + "linkWidget": "", + "lever": 5, + "info": "通过CustomPainter进行绘制，可实现一些复杂的自定义绘制组件，是Flutter中自定义组件的灵魂人物。", "image": "" }, { "id": 167, "family": 5, - "name": "MediaQuery", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "MediaQuery", + "nameCN": "媒体查询", + "linkWidget": "", + "lever": 4, + "info": "可通过MediaQuery.of来获取屏幕尺寸、设备密度、文字缩放比例、边距等信息。", "image": "" }, { "id": 168, "family": 0, - "name": "Theme", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "Theme", + "nameCN": "主题", + "linkWidget": "169", + "lever": 4, + "info": "可通过Theme.of获取ThemeData对象。也可以指定主题应用于Theme的后代组件。", "image": "" }, { "id": 169, "family": 0, - "name": "CupertinoTheme", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "CupertinoTheme", + "nameCN": "iOS主题", + "linkWidget": "168", + "lever": 3, + "info": "可通过CupertinoTheme.of获取CupertinoThemeData对象。也可以指定主题应用于CupertinoTheme的后代组件。", "image": "" }, { "id": 170, "family": 1, - "name": "WillPopScope", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "WillPopScope", + "nameCN": "返回拦截", + "linkWidget": "", + "lever": 5, + "info": "当一个界面中有WillPopScope组件时，在页面返回时会触发回调，决定是否返回。可用于二次确认退出的场景。", "image": "" }, { "id": 171, "family": 1, - "name": "Hero", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "Hero", + "nameCN": "共享动画", + "linkWidget": "28", + "lever": 5, + "info": "可指定标签名，两个界面跳转时具有相同标签的组件会进行共享动画。一个界面中不能存在两个同名的Hero标签", "image": "" }, { "id": 172, "family": 1, - "name": "FutureBuilder", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "FutureBuilder", + "nameCN": "异步构造器", + "linkWidget": "173", + "lever": 5, + "info": "可指定一个Future对象，能够监听异步执行的状态，并在构造器中根据状态构建不同的界面。注意该Future对象不能和FutureBuilder同时创建，否则可能过渡刷新。", "image": "" }, { "id": 173, "family": 1, - "name": "StreamBuilder", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "StreamBuilder", + "nameCN": "流构造器", + "linkWidget": "172", + "lever": 5, + "info": "可指定一个stream对象，能够监听异步执行的状态，并在构造器中根据状态构建不同的界面。", "image": "" }, { "id": 174, "family": 1, - "name": "PopupMenuDivider", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "PopupMenuDivider", + "nameCN": "弹出菜单分割线", + "linkWidget": "56,34", + "lever": 1, + "info": "PopupMenuButton的分割线,一般不单独使用，可指定高度。", "image": "" }, { "id": 175, "family": 1, - "name": "RawMaterialButton", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "RawMaterialButton", + "nameCN": "原始按钮", + "linkWidget": "23,25,26,27", + "lever": 5, + "info": "原始的Material按钮,按钮界的幕后大佬，可接受点击、长按、高亮变化事件，可指定颜色、形状。影深、内边距等属性。", "image": "" }, { "id": 176, "family": 1, - "name": "Dismissible", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "Dismissible", + "nameCN": "滑动消失", + "linkWidget": "162", + "lever": 4, + "info": "滑动时可显示底部组件，可指定滑动的方向和交叉轴的偏移量。接收确认消失和消失时的回调。", "image": "" }, { "id": 177, "family": 1, - "name": "ReorderableListView", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "ReorderableListView", + "nameCN": "可重排序列表", + "linkWidget": "162", + "lever": 4, + "info": "可以进行长按排序的ListView，可指定滑动方向、是否反向、滑动控制器等属性。", "image": "" }, { "id": 178, "family": 1, - "name": "ExpansionPanelList", - "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "name": "ExpansionPanelList", + "nameCN": "展开列表", + "linkWidget": "52", + "lever": 3, + "info": "可展开的列表组件，可根据逻辑来实现单展开或多展开。可指定展开动画时长，接收展开回调", "image": "" }, { "id": 179, "family": 1, - "name": "ListWheelScrollView", + "name": "ListWheelScrollView", + "nameCN": "滚轮列表", + "linkWidget": "139", + "lever": 4, + "info": "高大上的柱面滑动列表,精妙十足，可指定item高度、透视、挤压等属性，接收滑动时选中事件。", + "image": "" + }, + { + "id": 180, + "family": 5, + "name": "ScrollConfiguration", "nameCN": "ios菜单按钮", - "childCount": 0, - "lever": 3.0, - "info": "一个华丽的iOS风格按钮弹出框,长按时会以动画的形式弹出菜单面板，通常和CupertinoContextMenuAction联用。", + "linkWidget": "162,163,164", + "lever": 3, + "info": "需要包裹一个可滑动的组件，并通过behavior属性控制滑动的效果，可以去除滑动的蓝色阴影等。", + "image": "" + }, + { + "id": 181, + "family": 5, + "name": "DropdownButtonHideUnderline", + "nameCN": "下拉按钮隐藏线", + "linkWidget": "55", + "lever": 1, + "info": "用于去除DropdownButton的下划线，本身没有什么应用价值。", + "image": "" + }, + { + "id": 182, + "family": 1, + "name": "Overlay", + "nameCN": "悬浮组件", + "linkWidget": "", + "lever": 5, + "info": "可以将组件在全应用中进行悬浮显示，能够添加或移除组件，它们有独立管理的栈。", + "image": "" + }, + { + "id": 183, + "family": 4, + "name": "CustomScrollView", + "nameCN": "通用滑动视图", + "linkWidget": "184,185,188", + "lever": 5, + "info": "一个通用的滑动结构，可以指定滑动方向、是否反向、滑动控制器等属性。其中包含的子组件们必须是Sliver家族。", + "image": "" + }, + { + "id": 184, + "family": 4, + "name": "SliverAppBar", + "nameCN": "Sliver头部栏", + "linkWidget": "183,196", + "lever": 4, + "info": "Sliver家族的顶部栏通用结构，可以指定左中右组件、收缩空间、影深、固定模式、背景色等属性。", + "image": "" + }, + { + "id": 185, + "family": 4, + "name": "SliverList", + "nameCN": "Sliver列表", + "linkWidget": "183,186,187", + "lever": 5, + "info": "Sliver家族的列表组件，通过指定delegate构造子组件。通常用于CustomScrollView中。", + "image": "" + }, + { + "id": 186, + "family": 4, + "name": "SliverFixedExtentList", + "nameCN": "Sliver固定延展列表", + "linkWidget": "183,185,187", + "lever": 3, + "info": "Sliver家族的列表组件，通过delegate构造子组件，可以指定item的高度。通常用于CustomScrollView中。", + "image": "" + }, + { + "id": 187, + "family": 4, + "name": "SliverFillViewport", + "nameCN": "Sliver填充视图列表", + "linkWidget": "183,185,186", + "lever": 3, + "info": "Sliver家族的列表组件，通过delegate构造子组件，item的高度会填空视口，可以指定是否的分率。", + "image": "" + }, + { + "id": 188, + "family": 4, + "name": "SliverGird", + "nameCN": "Sliver网格", + "linkWidget": "183", + "lever": 4, + "info": "Sliver家族的网格列表组件，和GirdView类似，通过count和extent构造。通常用于CustomScrollView中。", + "image": "" + }, + { + "id": 189, + "family": 4, + "name": "SliverToBoxAdapter", + "nameCN": "Sliver适配器", + "linkWidget": "183", + "lever": 4, + "info": "可以容纳一个普通的组件，并将其转化成Sliver家族组件的适配器。", + "image": "" + }, + { + "id": 190, + "family": 4, + "name": "SliverPersistentHeader", + "nameCN": "Sliver存留头", + "linkWidget": "183", + "lever": 5, + "info": "通常用于CustomScrollView中，可以让一个组件在滑动中停留在顶部，不会滑动消失。", + "image": "" + }, + { + "id": 191, + "family": 4, + "name": "SliverPadding", + "nameCN": "Sliver内间距", + "linkWidget": "74", + "lever": 3, + "info": "可容纳一个Sliver家族的子组件，添加自身内边距来限制孩子组件的占位,核心属性为padding。", + "image": "" + }, + { + "id": 192, + "family": 4, + "name": "SliverOpacity", + "nameCN": "Sliver透明度", + "linkWidget": "73", + "lever": 3, + "info": "可容纳一个Sliver家族的子组件，并通过opacity来指定子组件的透明度。", + "image": "" + }, + { + "id": 193, + "family": 0, + "name": "AboutListTile", + "nameCN": "关于应用条目", + "linkWidget": "130,145", + "lever": 3, + "info": "一个点击条目，点击时可以弹出应用相关信息，可指定应用图标、应用名、应用版本号等信息和内部的子组件列表。", + "image": "" + }, + { + "id": 194, + "family": 1, + "name": "Scrollbar", + "nameCN": "滑动指示栏", + "linkWidget": "195,164,162", + "lever": 3, + "info": "需要包裹一个可滑动区域，当可滑动时，会显示滑动的bar用于指示。", + "image": "" + }, + { + "id": 195, + "family": 1, + "name": "CupertinoScrollbar", + "nameCN": "iOS滑动指示栏", + "linkWidget": "194,164,162", + "lever": 3, + "info": "iOS风格的滑动指示栏，需要包裹一个可滑动区域，当可滑动时，会显示滑动的bar用于指示。", + "image": "" + }, + { + "id": 196, + "family": 4, + "name": "FlexibleSpaceBar", + "nameCN": "ios菜单按钮", + "linkWidget": "184", + "lever": 3, + "info": "通常用于SliverAppBar中的可伸展区域，可指定标题、标题间距、背景、折叠模式等。", + "image": "" + }, + { + "id": 197, + "family": 6, + "name": "ErrorWidget", + "nameCN": "错误组件", + "linkWidget": "", + "lever": 1, + "info": "用于显示一个错误信息的组件，红底黄字，在开发过程中经常看到，一般不使用。", + "image": "" + }, + { + "id": 198, + "family": 1, + "name": "Form", + "nameCN": "表单组件", + "linkWidget": "199", + "lever": 4, + "info": "表单组件，可以接收其下的FormField组件的变化回调，通过onWillPop拦截页面返回，通过FormState可对表单字段进行保存或校验。", + "image": "" + }, + { + "id": 199, + "family": 1, + "name": "TextFormField", + "nameCN": "文字表单输入", + "linkWidget": "54,198", + "lever": 4, + "info": "和TextField属性基本一致，在其基础上增加字段的校验和提交的回调，FormState的save会触发onSaved回调。", + "image": "" + }, + { + "id": 200, + "family": 1, + "name": "Stepper", + "nameCN": "步骤组件", + "linkWidget": "", + "lever": 5, + "info": "步骤组件，可指定一步步的操作，可以自定义步骤的内容，确认和返回的按钮以及步骤排列的方向。", + "image": "" + }, + { + "id": 201, + "family": 1, + "name": "AnimatedSize", + "nameCN": "ios菜单按钮", + "linkWidget": "92", + "lever": 3, + "info": "子组件大小发生变化是，进行动画渐变，可指定时长、对齐方式、曲线、vsync等属性。", "image": "" } ] diff --git a/lib/app/res/node_data.dart b/lib/app/res/node_data.dart index 39fa98a..7300aa6 100644 --- a/lib/app/res/node_data.dart +++ b/lib/app/res/node_data.dart @@ -1724,6 +1724,62 @@ class LongPressMaterialButton extends StatelessWidget { onLongPress: () => DialogAbout.show(context), onPressed: () => DialogAbout.show(context)); } +}""" + }, + { + "widgetId": 23, + "priority": 3, + "name": "MaterialButton的自定义形状", + "subtitle": + "【shape】: 形状 【ShapeBorder】", + "code": """class ShapeMaterialButton extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Wrap( + spacing: 20, + children: [ + Container( + width: 40, + height: 40, + child: MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.blue, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.add, + color: Colors.white, + ), + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onLongPress: () => DialogAbout.show(context), + onPressed: () => DialogAbout.show(context)), + ), + Container( + width: 100, + height: 40, + child: MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.blue, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.remove, + color: Colors.white, + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(15))), + onLongPress: () => DialogAbout.show(context), + onPressed: () => DialogAbout.show(context)), + ), + ], + ); + } }""" }, ], @@ -2641,7 +2697,21 @@ class _FitImageState extends State { "widgetId": 38, "name": '图片实现局部放大', "priority": 6, - "subtitle": "【centerSlice】 : 保留的区域 【Rect】" + "subtitle": "【centerSlice】 : 保留的区域 【Rect】", "code": """class CenterSliceImage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + width: 300, + height: 80, + child: Image.asset( + "assets/images/right_chat.png", + centerSlice: Rect.fromLTRB(9, 27, 60, 27 + 1.0), + fit: BoxFit.fill, + ), + ); + } +} +""", }, ], "Checkbox": [ @@ -2717,7 +2787,7 @@ class _TristateCheckBokState extends State { "Switch": [ { "widgetId": 40, - "name": 'Switch基础语法', + "name": 'Switch基础用法', "priority": 1, "subtitle": "【inactiveThumbColor】 : 未选中小圈颜色 【Color】\n" "【inactiveTrackColor】 : 未选中滑槽颜色 【Color】\n" @@ -2937,7 +3007,7 @@ class _CustomCupertinoSliderState extends State { min: 0.0, max: 360.0, activeColor: Colors.green, - thumbColor: Colors.orange, + thumbColor: Colors.white, onChangeStart: (value) { print('开始滑动:\$value'); }, @@ -3046,8 +3116,7 @@ class _CustomRadioState extends State { "subtitle": "【value】 : 进度 【double】\n" "【backgroundColor】 : 背景色 【Color】\n" "【valueColor】 : 进度颜色 【Animation】\n" - "【strokeWidth】 : 线宽 【double】\n" - " value为null时会不停旋转", + "【strokeWidth】 : 线宽 【double】", "code": """class CustomCircularProgressIndicator extends StatefulWidget { @override _CustomCircularProgressIndicatorState createState() => @@ -3432,7 +3501,7 @@ class _AlignSelectableTextState extends State { "TextField": [ { "widgetId": 54, - "name": 'TextField基本语法', + "name": 'TextField基本用法', "priority": 1, "subtitle": "【controller】 : 控制器 【TextEditingController】\n" "【style】 : 文字样式 【TextStyle】\n" @@ -3489,7 +3558,7 @@ class _CustomTextFieldState extends State { }, { "widgetId": 54, - "name": 'TextField基本语法', + "name": 'TextField基本用法', "priority": 2, "subtitle": "【minLines】 : 最小行数 【int】\n" "【maxLines】 : 最大行数 【int】\n" @@ -3617,7 +3686,7 @@ class _CursorTextFieldState extends State { "DropdownButton": [ { "widgetId": 55, - "name": 'DropdownButton基本语法', + "name": 'DropdownButton基本用法', "priority": 1, "subtitle": "【value】 : 当前值 【T】\n" "【items】 : 下拉选框 【List>】\n" @@ -3671,7 +3740,7 @@ class _CustomDropDownButtonState extends State { }, { "widgetId": 55, - "name": 'DropdownButton基本语法', + "name": 'DropdownButton基本用法', "priority": 2, "subtitle": "【isDense】 : 是否紧排 【bool】\n" "【iconSize】 : 图标大小 【double】\n" @@ -3683,7 +3752,7 @@ class _CustomDropDownButtonState extends State { } class _StyleDropDownButtonState extends State { - Color _color; + Color _color = Colors.red; final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green]; final _info = ["红色", "黄色", "蓝色", "绿色"]; @@ -3731,7 +3800,6 @@ class _StyleDropDownButtonState extends State { "【color】 : 背景颜色 【Color】\n" "【shape】 : 形状 【ShapeBorder】\n" "【elevation】 : 影深 【double】\n" - "【showCursor】 : 是否显示光标 【bool】\n" "【onCanceled】 : 取消事件 【Function()】\n" "【onSelected】 : 选择事件 【Function(T)】", "code": @@ -4020,7 +4088,7 @@ class _NSTabBarState extends State ], "TabBarView": [ { - "widgetId": 58, + "widgetId": 59, "name": 'TabBarView需要与TabBar联用', "priority": 1, "subtitle": "【controller】 : 控制器 【TabController】\n" @@ -4271,7 +4339,7 @@ class _BottomNavigationBarWithPageViewState title: Text( key, ), - icon: Icon(Cons.ICONS_MAP[key]), + icon: Icon(iconsMap[key]), backgroundColor: _colors[_position])) .toList(), ); @@ -6429,10 +6497,7 @@ class _CustomScaleTransitionState extends State @override void initState() { - _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2)) - ..addListener(() { - print(_ctrl.value); - }); + _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2)); _ctrl.forward(); super.initState(); } @@ -6484,10 +6549,7 @@ class _CustomSizeTransitionState extends State @override void initState() { - _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1)) - ..addListener(() { - print(_ctrl.value); - }); + _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1)); _ctrl.forward(); super.initState(); } @@ -7648,11 +7710,122 @@ class _CurveAnimatedCrossFadeState extends State { }, ], "RichText": [ - {"code": """"""}, + {"widgetId": 101, + "name": 'RichText基本使用', + "priority": 1, + "subtitle": + "【text】 : 文字 【TextSpan】", + "code": """class CustomRichText extends StatelessWidget { + final str = + " 发光强度简称光强，国际单位是（坎德拉）简写cd。" + "1cd是指光源在指定方向的单位立体角内发出的光通量。" + "光源辐射是均匀时，则光强为I=F/Ω，Ω为立体角，单位为球面度（sr）,F为光通量，" + "单位是流明，对于点光源由I=F/4π 。光亮度是表示发光面明亮程度的，" + "指发光表面在指定方向的发光强度与垂直且指定方向的发光面的面积之比，" + "单位是坎德拉/平方米。对于一个漫散射面，尽管各个方向的光强和光通量不同，" + "但各个方向的亮度都是相等的。电视机的荧光屏就是近似于这样的漫散射面，" + "所以从各个方向上观看图像，都有相同的亮度感。"; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.all(8.0), + child: RichText( + text: TextSpan( + children: str + .split("") + .map((str) => TextSpan( + text: str, + style: TextStyle( + fontSize: 14, color: ColorUtils.randomColor()))) + .toList())), + ); + } +}"""}, ], "DataTable": [ - {"code": """"""}, - {"code": """"""}, + {"widgetId": 102, + "name": 'DataTable基本使用', + "priority": 1, + "subtitle": + "【columns】 : 列 【List】\n" + "【rows】 : 行 【List】", + "code": """class CustomDataTable extends StatelessWidget { + @override + Widget build(BuildContext context) { + return DataTable(columns: [ + DataColumn(label: Text('id')), + DataColumn(label: Text('名称')), + DataColumn(label: Text('类型')), + DataColumn(label: Text('子数目')), + ], rows: [ + DataRow(cells: [ + DataCell(Text('101')), + DataCell(Text('DataTable')), + DataCell(Text('StatelessWidget')), + DataCell(Text('n')), + ]), + DataRow(cells: [ + DataCell(Text('1')), + DataCell(Text('Container')), + DataCell(Text('StatelessWidget')), + DataCell(Text('1')), + ]), + DataRow(cells: [ + DataCell(Text('98')), + DataCell(Text('Wrap')), + DataCell(Text('MultiChildRenderObjectWidget')), + DataCell(Text('n')), + ]), + ]); + } +}"""}, + {"widgetId": 102, + "name": 'DataTable的sort', + "priority": 1, + "subtitle": + "【sortColumnIndex】 : 列号 【int】\n" + "【sortAscending】 : 是否顺序 【bool】", + "code": """class SortDataTable extends StatelessWidget { + @override + Widget build(BuildContext context) { + return DataTable( + sortColumnIndex: 0, + sortAscending: true, + columns: [ + DataColumn( + label: Text('id'), + numeric: false, + onSort: (int columnIndex, bool ascending) { + print('\$columnIndex----\$ascending'); + }), + DataColumn(label: Text('名称')), + DataColumn(label: Text('类型')), + DataColumn(label: Text('子数目')), + ], rows: [ + DataRow(cells: [ + DataCell(Text('101')), + DataCell(Text('DataTable')), + DataCell(Text('StatelessWidget')), + DataCell(Text('n')), + ]), + DataRow(selected: true, cells: [ + DataCell(Text('1')), + DataCell(Text('Container'), showEditIcon: true,onTap: (){ + + }), + DataCell(Text('StatelessWidget')), + DataCell(Text('1')), + ]), + DataRow(cells: [ + DataCell(Text('98')), + DataCell(Text('Wrap')), + DataCell(Text('MultiChildRenderObjectWidget')), + DataCell(Text('n')), + ]), + ]); + } +}"""}, ], "Draggable": [ { @@ -8733,28 +8906,64 @@ class _CustomAnimatedSwitcherState extends State { @override Widget build(BuildContext context) { return Container( - child: Column( + child: Wrap( + crossAxisAlignment: WrapCrossAlignment.center, children: [ - AnimatedSwitcher( - duration: const Duration(milliseconds: 500), - transitionBuilder: (Widget child, Animation animation) => - ScaleTransition( - child: RotationTransition(turns: animation, child: child), - scale: animation), - child: Text( - '\$_count', - key: ValueKey(_count), - style: Theme.of(context).textTheme.display3, - ), - ), - RaisedButton( - child: const Text('Increment'), - onPressed: () => setState(() => _count += 1), - ), + _buildMinusBtn(), + SizedBox(width:80,child: _buildAnimatedSwitcher(context)), + _buildAddBtn() ], ), ); } + + Widget _buildAnimatedSwitcher(BuildContext context) => + AnimatedSwitcher( + duration: const Duration(milliseconds: 400), + transitionBuilder: (Widget child, Animation animation) => + ScaleTransition( + child: RotationTransition(turns: animation, child: child), + scale: animation), + child: Text( + '\$_count', + key: ValueKey(_count), + style: Theme.of(context).textTheme.display3, + ), + ); + + Widget _buildMinusBtn() { + return MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.red, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.remove, + color: Colors.white, + ), + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: () => setState(() => _count -= 1)); + } + + Widget _buildAddBtn() => MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.blue, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.add, + color: Colors.white, + ), + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: () => setState(() => _count += 1)); }""" }, ], @@ -9061,6 +9270,7 @@ class _CustomAnimatedPaddingState extends State { "priority": 1, "subtitle": "【child】 : 孩子组件 【Widget】\n" "【duration】 : 动画时长 【Duration】\n" + "【alignment】 : 对齐方式 【AlignmentGeometry】\n" "【onEnd】 : 动画结束回调 【Function()】\n" "【curve】 : 动画曲线 【Duration】\n" "【padding】 : 内边距 【EdgeInsetsGeometry】", @@ -9560,7 +9770,7 @@ class _CustomAnimatedIconState extends State showDialog(context: context, builder: (ctx) => _buildDialog()); }, child: Text( - 'Just Show It!', + 'Just Show It !', style: TextStyle(color: Colors.white), ), @@ -9593,7 +9803,7 @@ class DeleteDialog extends StatelessWidget { Widget _buildContent() { return Padding( - padding: const EdgeInsets.all(10.0), + padding: const EdgeInsets.all(15.0), child: Text( ' Hi toly! If you push the conform buttom ,' ' You will lose this file. Are you sure wand to do that?', @@ -9605,18 +9815,18 @@ class DeleteDialog extends StatelessWidget { Widget _buildFooter(context) { return Padding( - padding: const EdgeInsets.only(bottom: 15.0, top: 10), + padding: const EdgeInsets.only(bottom: 15.0, top: 10,left: 10,right: 10), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container( alignment: Alignment.center, height: 40, - width: 120, + width: 100, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(30)), color: Color(0xff73D1EE)), - child: Text('Yes, Delete', + child: Text('Yes', style: TextStyle(color: Colors.white, fontSize: 16)), ), InkWell( @@ -9624,7 +9834,7 @@ class DeleteDialog extends StatelessWidget { child: Container( alignment: Alignment.center, height: 40, - width: 120, + width: 100, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(30)), color: Colors.orangeAccent), @@ -9963,7 +10173,7 @@ class DeleteDialog extends StatelessWidget { "AboutDialog": [ { "widgetId": 130, - "name": 'Dialog基本使用', + "name": 'AboutDialog基本使用', "priority": 1, "subtitle": "【applicationIcon】 : 左上图标 【Widget】\n" "【applicationVersion】 : 版本号 【String】\n" @@ -10039,6 +10249,7 @@ class DeleteDialog extends StatelessWidget { @override Widget build(BuildContext context) { return Column( + mainAxisSize: MainAxisSize.min, children: [ _buildRaisedButton(context), _buildCupertinoActionSheet(context), @@ -10047,19 +10258,22 @@ class DeleteDialog extends StatelessWidget { } Widget _buildCupertinoActionSheet(BuildContext context) => - CupertinoActionSheet( - title: Text("Please chose a language"), - message: Text('the language you use in this application.'), - cancelButton: CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text("Cancel")), - actions: [ - CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text('Dart')), - CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text('Java')), - CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text('Kotlin')), - ], + Container( + alignment: Alignment.bottomCenter, + child: CupertinoActionSheet( + title: Text("Please chose a language"), + message: Text('the language you use in this application.'), + cancelButton: CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text("Cancel")), + actions: [ + CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text('Dart')), + CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text('Java')), + CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text('Kotlin')), + ], + ), ); Widget _buildRaisedButton(BuildContext context) => RaisedButton( @@ -10788,7 +11002,7 @@ class _PanGestureDetectorState extends State { "【onPointerDown】 : 按下事件 【Function(PointerDownEvent)】\n" "【onPointerMove】 : 移动事件 【Function(PointerMoveEvent)】\n" "【onPointerMove】 : 抬起事件 【Function(PointerUpEvent)】\n" - "【onPointerCancel】 : 抬起事件 【Function(PointerUpEvent)】", + "【onPointerCancel】 : 取消事件 【Function(PointerUpEvent)】", "code": """class CustomListener extends StatefulWidget { @override _CustomListenerState createState() => _CustomListenerState(); @@ -11600,8 +11814,7 @@ class _CustomCupertinoTabScaffoldState "widgetId": 160, "name": 'Material的shape属性', "priority": 2, - "subtitle": "【shape】 : 形状 【ShapeBorder】\n" - "【type】 : 类型 【MaterialType】", + "subtitle": "【shape】 : 形状 【ShapeBorder】", "code": """class ShapeMaterial extends StatelessWidget { final shapeMap = { @@ -11664,7 +11877,7 @@ class _CustomCupertinoTabScaffoldState "priority": 1, "subtitle": "【children】 : 子组件列表 【Lis】\n" "【alignment】 : 对齐方式 【AlignmentGeometry】\n" - "【index】 : 当前显示所有 【Function()】", + "【index】 : 当前显示组件 【int】", "code": """class CustomIndexedStack extends StatefulWidget { @override _CustomIndexedStackState createState() => _CustomIndexedStackState(); @@ -13152,7 +13365,7 @@ class CountGenerator { "widgetId": 174, "name": 'PopupMenuDivider基本使用', "priority": 1, - "subtitle": "【child】 : 子组件 【Widget】\n" + "subtitle": "【height】 : 高度 【double】", "code": """class CustomPopupMenuDivider extends StatelessWidget { final map = { @@ -13743,15 +13956,20 @@ class _CustomExpansionPanelListState extends State { }, ], "ListWheelScrollView": [ - {"widgetId": 179, + { + "widgetId": 179, "name": 'ListWheelScrollView基本使用', "priority": 1, - "subtitle": - "【children】 : 子组件列表 【List】\n" + "subtitle": "【children】 : 子组件列表 【List】\n" "【perspective】 : 透视度 【double】\n" "【itemExtent】 : item高 【EdgeInsets】\n" "【onSelectedItemChanged】 : 选中回调 【ValueChanged 】", - "code": """class CustomListWheelScrollView extends StatelessWidget { + "code": """class CustomListWheelScrollView extends StatefulWidget { + @override + _CustomListWheelScrollViewState createState() => _CustomListWheelScrollViewState(); +} + +class _CustomListWheelScrollViewState extends State { var data = [ Colors.orange[50], Colors.orange[100], @@ -13765,23 +13983,40 @@ class _CustomExpansionPanelListState extends State { Colors.orange[900], ]; + Color _color = Colors.blue; @override Widget build(BuildContext context) { - return Container( - height: 150, - width: 300, - child: ListWheelScrollView( - perspective: 0.006, - itemExtent: 50, - onSelectedItemChanged: (index){ - print('onSelectedItemChanged:\$index'); - }, - children: data.map((color) => _buildItem(color)).toList(), - ), + return Column( + children: [ + _buildCircle(), + Container( + height: 150, + width: 300, + child: ListWheelScrollView( + perspective: 0.006, + itemExtent: 50, + onSelectedItemChanged: (index){ + print('onSelectedItemChanged:\$index'); + setState(() => _color=data[index]); + }, + children: data.map((color) => _buildItem(color)).toList(), + ), + ), + ], ); } + Widget _buildCircle() => Container( + margin: EdgeInsets.only(bottom: 5), + width: 30, + height: 30, + decoration: BoxDecoration( + color: _color, + shape: BoxShape.circle + ), + ); + Widget _buildItem(Color color) { return Container( key: ValueKey(color) , @@ -13799,47 +14034,2048 @@ class _CustomExpansionPanelListState extends State { String colorString(Color color) => "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "ScrollConfiguration": [ + { + "widgetId": 180, + "name": 'ScrollConfiguration基本使用', + "priority": 1, + "subtitle": "【child】 : 子组件 【Widget】\n" + "【behavior】 : 滑动行为 【ScrollBehavior】\n" + " 可以使用ScrollConfiguration让ListView无蓝色阴影", + "code": """class CustomScrollConfiguration extends StatelessWidget { + final data = [ + Colors.cyan[50], + Colors.cyan[100], + Colors.cyan[200], + Colors.cyan[300], + Colors.cyan[400], + Colors.cyan[500], + Colors.cyan[600], + Colors.cyan[700], + Colors.cyan[800], + Colors.cyan[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: ScrollConfiguration( + behavior: NoScrollBehavior(), child: _buildListView()), + ); + } + + Widget _buildListView() => ListView( + padding: EdgeInsets.symmetric(horizontal: 5), + children: data + .map((color) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: color, + child: Text( + colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} + +class NoScrollBehavior extends ScrollBehavior { + @override + Widget buildViewportChrome( + BuildContext context, Widget child, AxisDirection axisDirection) => + child; +}""" + }, + ], + "DropdownButtonHideUnderline": [ + { + "widgetId": 181, + "name": 'DropDownButtonHideUnderline使用', + "priority": 1, + "subtitle": "【child】 : 子组件 【Widget】\n", + "code": + """class CustomDropDownButtonHideUnderline extends StatefulWidget { + @override + _CustomDropDownButtonHideUnderlineState createState() => + _CustomDropDownButtonHideUnderlineState(); +} + +class _CustomDropDownButtonHideUnderlineState + extends State { + Color _color = Colors.red; + final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green]; + final _info = ["红色", "黄色", "蓝色", "绿色"]; + + @override + Widget build(BuildContext context) { + return Wrap( + children: [ + Container( + margin: EdgeInsets.symmetric(horizontal: 20), + width: 50, + height: 50, + color: _color, + ), + DropdownButtonHideUnderline( + child: DropdownButton( + value: _color, + elevation: 1, + icon: Icon( + Icons.expand_more, + size: 20, + color: _color, + ), + items: _buildItems(), + onChanged: (v) => setState(() => _color = v)), + ), + ], + ); + } + + List> _buildItems() => _colors + .map((e) => DropdownMenuItem( + value: e, + child: Text( + _info[_colors.indexOf(e)], + style: TextStyle(color: e), + ))) + .toList(); +}""" + }, + ], + "Overlay": [ + { + "widgetId": 182, + "name": 'Overlay基本使用', + "priority": 1, + "subtitle": " Overlay.of(context).insert插入全局组件", + "code": """bool show = false; +Offset offset = Offset(200, 200); + +final double radius = 60; +var entry = OverlayEntry( + builder: (context) => Stack( + children: [ + Positioned( + left: offset.dx, + top: offset.dy, + child: _buildFloating(), + ), + ], + )); + +///绘制悬浮控件 +_buildFloating() => GestureDetector( + onPanDown: (details) { + offset = details.globalPosition - Offset(radius / 2, radius / 2); + entry.markNeedsBuild(); + }, + onPanUpdate: (DragUpdateDetails details) { + offset = offset + details.delta; + entry.markNeedsBuild(); + }, + onLongPress: hideFloating, + child: Material( + color: Colors.transparent, + child: Container( + height: radius, + width: radius, + alignment: Alignment.center, + decoration: BoxDecoration( + shape: BoxShape.circle, + image: DecorationImage( + image: AssetImage('assets/images/icon_head.png')), + ), + ), + )); + +showFloating(BuildContext context) { + if (!show) { + Overlay.of(context).insert(entry); + show = true; + } +} + +hideFloating() { + if (show) { + entry.remove(); + show = false; + } +} + +class CustomOverlay extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Wrap( + children: [ + Container( + height: 50, + child: RawMaterialButton( + elevation: 2, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + fillColor: Colors.blue, + splashColor: Colors.orange, + textStyle: TextStyle(color: Colors.white), + child: Icon(Icons.add), + onPressed: ()=>showFloating(context), + ), + ), + Container( + height: 50, + child: RawMaterialButton( + elevation: 2, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + fillColor: Colors.red, + splashColor: Colors.orange, + textStyle: TextStyle(color: Colors.white), + child: Icon(Icons.remove), + onPressed: hideFloating, + ), + ), + ], + ); + } +}""" + }, + ], + "CustomScrollView": [ + { + "widgetId": 183, + "name": 'CustomScrollView基本使用', + "priority": 1, + "subtitle": "【slivers】 : 子组件列表 【List】\n" + "【reverse】 : 是否反向 【bool】\n" + "【scrollDirection】 : 滑动方向 【Axis】\n" + "【controller】 : 控制器 【ScrollController】", + "code": """class CustomScrollViewDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + anchor: 0, + scrollDirection: Axis.vertical, + reverse: false, + slivers: [_buildSliverAppBar(), _buildSliverFixedExtentList()], + ), + ); + } + + Widget _buildSliverFixedExtentList() => SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')), + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + title: Text( + '张风捷特烈', + style: TextStyle(color: Colors.black, //标题 + shadows: [ + Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2) + ]), + ), + background: Image.asset( + "assets/images/caver.jpeg", fit: BoxFit.cover, + ), + ), + ); + } +}""" + }, + ], + "SliverAppBar": [ + { + "widgetId": 184, + "name": 'SliverAppBar基本使用', + "priority": 1, + "subtitle": "【leading】 : 左侧组件 【Widget】\n" + "【title】 : 中间组件 【Widget】\n" + "【actions】 : 尾部组件列表 【List】\n" + "【floating】 : 是否浮动 【bool】\n" + "【pinned】 : 是否顶部停留 【bool】\n" + "【snap】 : 是否半收展 【bool】\n" + "【bottom】 : 底部组件 【PreferredSizeWidget】\n" + "【expandedHeight】 : 延展高度 【double】\n" + "【elevation】 : 影深 【double】\n" + "【flexibleSpace】 : 延展空间 【FlexibleSpaceBar】\n" + "【backgroundColor】 : 背景色 【Color】\n" + "【controller】 : 控制器 【ScrollController】\n" + " snap为true时必需floating为true", + "code": """class SliverAppBarDemo extends StatefulWidget { + @override + _SliverAppBarDemoState createState() => _SliverAppBarDemoState(); +} + +class _SliverAppBarDemoState extends State { + bool _floating = false; + bool _pinned = false; + bool _snap = false; + + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + _buildTool(), + Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildSliverFixedExtentList() + ], + ), + ), + ], + ); + } + + Widget _buildSliverAppBar() { + print(_floating); + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + floating: _floating, + pinned: _pinned, + snap: _snap, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar(//伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + Widget _buildSliverFixedExtentList() => SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + Widget _buildTool() { + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Wrap( + direction: Axis.vertical, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + Text('floating'), + Switch( + value: _floating, + onChanged: (v) { + if(_snap&&!v){ + _snap =false; + } + setState(() => _floating = v); + }), + ], + ), + Wrap( + direction: Axis.vertical, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + Text('pinned'), + Switch( + value: _pinned, + onChanged: (v) => setState(() => _pinned = v)), + ], + ) ,Wrap( + direction: Axis.vertical, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + Text('snap'), + Switch( + value: _snap, + onChanged: (v) { + if(_floating){ + setState(() => _snap = v); + } + + }), + ], + ) + ], + ); + } +}""" + }, + ], + "SliverList": [ + { + "widgetId": 185, + "name": 'SliverList基本使用', + "priority": 1, + "subtitle": "【delegate】 : 孩子代理 【SliverChildDelegate】", + "code": """class SliverListDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ); + } + + Widget _buildSliverList() => SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "SliverFixedExtentList": [ + { + "widgetId": 186, + "name": 'SliverFixedExtentList基本使用', + "priority": 1, + "subtitle": "【itemExtent】 : 主轴方向强迫长度 【double】\n" + "【delegate】 : 孩子代理 【SliverChildDelegate】", + "code": """class SliverFixedExtentListDemo extends StatelessWidget { + final data = [ + Colors.orange[50], + Colors.orange[100], + Colors.orange[200], + Colors.orange[300], + Colors.orange[400], + Colors.orange[500], + Colors.orange[600], + Colors.orange[700], + Colors.orange[800], + Colors.orange[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ); + } + + Widget _buildSliverList() => SliverFixedExtentList( + itemExtent: 50, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "SliverFillViewport": [ + { + "widgetId": 186, + "name": 'SliverFixedExtentList基本使用', + "priority": 1, + "subtitle": "【viewportFraction】 : 视口分率 【double】\n" + "【delegate】 : 孩子代理 【SliverChildDelegate】", + "code": """class SliverFillViewportDemo extends StatefulWidget { + @override + _SliverFillViewportDemoState createState() => _SliverFillViewportDemoState(); +} + +class _SliverFillViewportDemoState extends State { + final data = [ + Colors.orange[50], + Colors.orange[100], + Colors.orange[200], + Colors.orange[300], + Colors.orange[400], + Colors.orange[500], + Colors.orange[600], + Colors.orange[700], + Colors.orange[800], + Colors.orange[900], + ]; + var _viewportFraction = 1.0; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + _buildTool(), + Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ), + ], + ); + } + + Widget _buildSliverList() => SliverFillViewport( + viewportFraction: _viewportFraction, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + _buildTool() { + return Slider( + value: _viewportFraction, + min: 0.01, + divisions: 20, + label: _viewportFraction.toStringAsFixed(1), + max: 2.0, + onChanged: (v) => setState(() => _viewportFraction = v)); + } +}""" + }, + ], + "SliverGird": [ + { + "widgetId": 188, + "name": 'SliverList基本使用', + "priority": 1, + "subtitle": "SliverGrid.count 指定轴向数量构造\n" + "SliverGrid.extent 指定轴向长度构造\n" + "属性特征同GridView,可详见之\n", + "code": """class SliverGirdDemo extends StatelessWidget { + final data = List.generate(128, (i) => Color(0xFF6600FF - 2*i)); + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ); + } + + Widget _buildSliverList() => + SliverGrid.extent( + childAspectRatio: 1 / 0.618, + maxCrossAxisExtent: 180, + crossAxisSpacing: 5, + mainAxisSpacing: 5, + children: data + .map((e) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: e, + child: Text( + colorString(e), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "SliverToBoxAdapter": [ + { + "widgetId": 189, + "name": 'SliverToBoxAdapter基本使用', + "priority": 1, + "subtitle": "【child】 : 子组件 【Widget】", + "code": """class SliverToBoxAdapterDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildCommonWidget(), + _buildSliverList() + ], + ), + ); + } + + Widget _buildCommonWidget() => SliverToBoxAdapter( + child: Container( + padding: EdgeInsets.symmetric(horizontal: 10), + color: Colors.grey.withAlpha(22), + child: ListTile( + leading: Image.asset("assets/images/icon_head.png"), + title: Text("以梦为马"), + subtitle: Text("海子"), + selected: true, + contentPadding: EdgeInsets.all(5), + trailing: Icon(Icons.more_vert), + ), + ), + ); + + Widget _buildSliverList() => SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 2, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "SliverPersistentHeader": [ + { + "widgetId": 190, + "name": 'SliverPersistentHeader基本使用', + "priority": 1, + "subtitle": "【delegate】 : 代理 【SliverPersistentHeaderDelegate】\n" + "【floating】 : 是否浮动 【bool】\n" + "【pinned】 : 是否顶部停留 【bool】", + "code": """class SliverPersistentHeaderDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 500, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildPersistentHeader('袅缈岁月，青丝银发',Color(0xffe7fcc9)), + _buildCommonWidget(), + _buildPersistentHeader('以梦为马，不负韶华',Color(0xffcca4ff)), + _buildSliverList() + ], + ), + ); + } + + Widget _buildCommonWidget() => SliverToBoxAdapter( + child: Container( + padding: EdgeInsets.symmetric(horizontal: 10), + color: Colors.grey.withAlpha(22), + child: ListTile( + leading: Image.asset("assets/images/icon_head.png"), + title: Text("以梦为马"), + subtitle: Text("海子"), + selected: true, + contentPadding: EdgeInsets.all(5), + trailing: Icon(Icons.more_vert), + ), + ), + ); + Widget _buildPersistentHeader(String text,Color color) => SliverPersistentHeader( + pinned: true, + delegate: _SliverDelegate( + minHeight: 40.0, + maxHeight: 100.0, + child: Container( + color: color, + child: Center( + child: Text(text, style: TextStyle( + fontSize: 18, + shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]), + ), + )), + )); + + Widget _buildSliverList() => SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 2, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} + + +class _SliverDelegate extends SliverPersistentHeaderDelegate { + _SliverDelegate({ + @required this.minHeight, + @required this.maxHeight, + @required this.child, + }); + + final double minHeight; //最小高度 + final double maxHeight; //最大高度 + final Widget child; //孩子 + + @override + double get minExtent => minHeight; + + @override + double get maxExtent => max(maxHeight, minHeight); + + @override + Widget build( + BuildContext context, double shrinkOffset, bool overlapsContent) { + return new SizedBox.expand(child: child); + } + + @override //是否需要重建 + bool shouldRebuild(_SliverDelegate oldDelegate) { + return maxHeight != oldDelegate.maxHeight || + minHeight != oldDelegate.minHeight || + child != oldDelegate.child; + } +}""" + }, + ], + "SliverPadding": [ + { + "widgetId": 191, + "name": 'SliverPadding基本使用', + "priority": 1, + "subtitle": "【sliver】 : 子组件 【Widget】\n" + "【padding】 : 内边距 【EdgeInsetsGeometry】", + "code": """class SliverPaddingDemo extends StatelessWidget { + final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i)); + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), SliverPadding( + padding: EdgeInsets.only(top: 10), + sliver + : _buildSliverGrid())], + ), + ); + } + + Widget _buildSliverGrid() => SliverGrid.extent( + childAspectRatio: 1 / 0.618, + maxCrossAxisExtent: 180, + crossAxisSpacing: 5, + mainAxisSpacing: 5, + children: data + .map((e) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: e, + child: Text( + colorString(e), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "SliverOpacity": [ + { + "widgetId": 192, + "name": 'SliverOpacity基本使用', + "priority": 1, + "subtitle": "【opacity】 : 透明度 【double】\n" + "【sliver】 : 子组件 【Function()】", + "code": """class SliverOpacityDemo extends StatelessWidget { + final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i)); + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + SliverPadding( + padding: EdgeInsets.only(top: 10), + sliver: SliverOpacity(opacity: 0.2, sliver: _buildSliverGrid())) + ], + ), + ); + } + + Widget _buildSliverGrid() => SliverGrid.extent( + childAspectRatio: 1 / 0.618, + maxCrossAxisExtent: 180, + crossAxisSpacing: 5, + mainAxisSpacing: 5, + children: data + .map((e) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: e, + child: Text( + colorString(e), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "AboutListTile": [ + { + "widgetId": 193, + "name": 'AboutListTile基本使用', + "priority": 1, + "subtitle": "【icon】 : 左图标 【Widget】\n" + "【applicationIcon】 : 左上图标 【Widget】\n" + "【applicationVersion】 : 版本号 【String】\n" + "【applicationName】 : 应用名 【String】\n" + "【applicationLegalese】 : 应用律术 【String】\n" + "【aboutBoxChildren】 : 弹框内容组件 【List】", + "code": """class AboutListTileDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return AboutListTile( + icon: Icon(Icons.info), + applicationIcon: FlutterLogo(), + applicationName: 'Flutter Unit', + applicationVersion: 'v0.0.1', + applicationLegalese: 'Copyright© 2018-2020 张风捷特烈', + aboutBoxChildren: [ + Padding( + padding: const EdgeInsets.all(10.0), + child: Text( + ' FlutterUnit是【张风捷特烈】的开源项目，' + '收录Flutter的200+组件，并附加详细介绍以及操作交互，' + '希望帮助广大编程爱好者入门Flutter。' + '更多知识可以关注掘金账号、公众号【编程之王】。', + style: TextStyle(color: Color(0xff999999), fontSize: 16), + textAlign: TextAlign.justify, + ), + ), + ], + ); + } +}""" + }, + ], + "Scrollbar": [ + { + "widgetId": 194, + "name": 'Scrollbar基本使用', + "priority": 1, + "subtitle": "【child】 : 子组件 【Widget】\n" + "【controller】 : 控制器 【ScrollController】", + "code": """class CustomScrollbar extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: Scrollbar( + child: ListView( + padding: EdgeInsets.symmetric(horizontal: 5), + children: data + .map((color) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: color, + child: Text( + colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ), + ), + ); + } + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "CupertinoScrollbar": [ + { + "widgetId": 195, + "name": 'CupertinoScrollbar基本使用', + "priority": 1, + "subtitle": "【child】 : 子组件 【Widget】\n" + "【controller】 : 控制器 【ScrollController】", + "code": """class CustomCupertinoScrollbar extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: CupertinoScrollbar( + child: ListView( + padding: EdgeInsets.symmetric(horizontal: 5), + children: data + .map((color) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: color, + child: Text( + colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ), + ), + ); + } + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "FlexibleSpaceBar": [ + { + "widgetId": 196, + "name": 'SliverAppBar基本使用', + "priority": 1, + "subtitle": "【title】 : 标题组件 【Widget】\n" + "【titlePadding】 : 标题间距 【EdgeInsetsGeometry】\n" + "【collapseMode】 : 折叠模式 【CollapseMode】\n" + "【stretchModes】 : 延伸模式 【List】\n" + "【background】 : 背景组件 【Widget】\n" + "【centerTitle】 : 是否居中 【bool】", + "code": """class FlexibleSpaceBarDemo extends StatelessWidget { + + final data = [ + Colors.blue[50], + Colors.blue[100], + Colors.blue[200], + Colors.blue[300], + Colors.blue[400], + Colors.blue[500], + Colors.blue[600], + Colors.blue[700], + Colors.blue[800], + Colors.blue[900], + ]; + + @override + Widget build(BuildContext context) { + return + Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildSliverFixedExtentList() + ], + ), + ); + } + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + actions: _buildActions(), + pinned: true, + backgroundColor: Colors.blue, + flexibleSpace: FlexibleSpaceBar(//伸展处布局 + centerTitle: false, + title: Text('张风捷特烈',style: TextStyle(shadows: [ + Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2) + ]),), + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + stretchModes: [StretchMode.blurBackground,StretchMode.zoomBackground], + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + Widget _buildSliverFixedExtentList() => SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + String colorString(Color color) => + "#\${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +}""" + }, + ], + "ErrorWidget": [ + { + "widgetId": 197, + "name": 'ErrorWidget基本使用', + "priority": 1, + "subtitle": "入参 : 显示信息 【Object】", + "code": """class ErrorWidgetDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: ErrorWidget( + 'I am Error ErrorWidget\n' + 'But now, there has no error.' + ), + ); + } +}""" + }, + ], + "Form": [ + { + "widgetId": 198, + "name": 'Form基本使用', + "priority": 1, + "subtitle": "【child】 : 子组件 【Widget】\n" + "【onChanged】 : 表单变化回调 【VoidCallback】\n" + "【onWillPop】 : 返回回调 【WillPopCallback】", + "code": """class CustomForm extends StatefulWidget { + @override + _CustomFormState createState() => _CustomFormState(); +} + +class _CustomFormState extends State { + GlobalKey _formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Container( + child: Form( + onWillPop: () => _willPop(context), + key: _formKey, + onChanged: () { + print('Form---onChanged'); + }, + child: + Stack( + alignment: Alignment.centerRight, + children: [ + Container( + width: 350, + child: UnconstrainedBox( + child: Container( + width: 200, + height: 70, + child: TextFormField( + style: TextStyle(textBaseline: TextBaseline.alphabetic), + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'username', + ), + validator: _validateUsername, + ), + ), + ), + ), + Positioned( + top: 0, right: 0, child: _buildSubmitButton(context)), + ], + ), + ), + ); + } + + String _validateUsername(value) { + if (value.isEmpty) { + return '用户名不能为空'; + } + return null; + } + + RaisedButton _buildSubmitButton(BuildContext context) { + return RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: _onSubmit, + child: Icon( + Icons.check, + color: Colors.white, + ), + ); + } + + _onSubmit(){ + if (_formKey.currentState.validate()) { + Navigator.of(context).pop(); + } + } + + Future _willPop(context) async { + return await showDialog( + context: context, + builder: (context) => AlertDialog( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(10))), + title: Text('提示'), + content: Text('你确定要离开此页吗?'), + actions: [ + FlatButton( + onPressed: () => Navigator.of(context).pop(true), + child: Text('确定'), + ), + FlatButton( + onPressed: () => Navigator.of(context).pop(false), + child: Text('取消'), + ), + ], + ), + ) ?? + false; + } +}""" + }, + ], + "TextFormField": [ + { + "widgetId": 199, + "name": 'TextFormField基本使用', + "priority": 1, + "subtitle": " 基本属性和TextField一致，详见之\n" + "【validator】 : 验证函数 【FormFieldValidator 】\n" + "【onFieldSubmitted】 : 提交回调 【ValueChanged】\n" + "【onSaved】 : 表单save时回调 【FormFieldSetter】", + "code": """class CustomTextFormField extends StatefulWidget { + @override + _CustomTextFormFieldState createState() => _CustomTextFormFieldState(); +} + +class _CustomTextFormFieldState extends State { + GlobalKey _formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Container( + child: Form( + key: _formKey, + child: + Stack( + alignment: Alignment.centerRight, + children: [ + Container( + width: 350, + child: UnconstrainedBox( + child: Container( + width: 200, + height: 70, + child: TextFormField( + style: TextStyle(textBaseline: TextBaseline.alphabetic), + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'username', + ), + validator: _validateUsername, + onFieldSubmitted: _onFieldSubmitted, + onSaved: _onSaved, + ), + ), + ), + ), + Positioned( + top: 0, right: 0, child: _buildSubmitButton(context)), + ], + ), + ), + ); + } + + String _validateUsername(value) { + if (value.isEmpty) { + return '用户名不能为空'; + } + return null; + } + _onSaved(value){ + print('onSaved:'+value); + } + + void _onFieldSubmitted(value) { + print('onFieldSubmitted:'+value); + } + + RaisedButton _buildSubmitButton(BuildContext context) { + return RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: _onSubmit, + child: Icon( + Icons.check, + color: Colors.white, + ), + ); + } + + _onSubmit(){ + _formKey.currentState.save(); + if (_formKey.currentState.validate()) { + FocusScope.of(context).requestFocus(FocusNode()); + } + } +}""" + }, + ], + "Stepper": [ + { + "widgetId": 200, + "name": 'Stepper基本使用', + "priority": 1, + "subtitle": "【steps】 : 步骤列表 【List】\n" + "【currentStep】 : 当前步骤 【double】\n" + "【onStepTapped】 : 点击回调 【ValueChanged】\n" + "【onStepCancel】 : 上一步回调 【VoidCallback】\n" + "【controlsBuilder】 : 控制器构造 【ControlsWidgetBuilder】", + "code": """class StepperDemo extends StatefulWidget { + @override + _StepperDemoState createState() => _StepperDemoState(); +} + +class _StepperDemoState extends State { + int _position = 0; + + final stepsData = { + "填写表单":'请按表单填写个人信息。', + "邮箱校验":'已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。', + "注册完成":'恭喜您，注册完成！', + }; + + final steps = [ + Step( + title: Text("填写表单"), + content: Container(height: 60, child: Text("请按表单填写个人信息")), + ), + Step(title: Text("邮箱校验"), content: Text("请对您的账号进行邮箱校验")), + Step(title: Text("注册完成"), content: Text("恭喜您，注册完成")), + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: Stepper( + type:StepperType.horizontal, + currentStep: _position, + onStepTapped: (index) { + setState(() { + _position = index; + }); + }, + onStepContinue: () { + setState(() { + if (_position < 2) { + _position++; + } + }); + }, + onStepCancel: () { + if (_position > 0) { + setState(() { + _position--; + }); + } + }, + controlsBuilder: (_, + {VoidCallback onStepContinue, VoidCallback onStepCancel}) { + return Row( + children: [ + RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepContinue, + child: Icon( + Icons.check, + color: Colors.white, + ), + ), + RaisedButton( + color: Colors.red, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepCancel, + child: Icon( + Icons.keyboard_backspace, + color: Colors.white, + ), + ), + ], + ); + }, + steps: stepsData.keys.map((e){ + bool isActive = stepsData.keys.toList().indexOf(e) ==_position; + return Step( + title: Text(e,style: TextStyle(color: isActive?Colors.blue:Colors.black),), + isActive: isActive, + state: _getState(stepsData.keys.toList().indexOf(e)), + content: Container(height: 60, child: Text(stepsData[e])), + ); + }).toList()), + ); + } + _getState(index){ + if(_position==index) return StepState.editing; + if(_position>index) return StepState.complete; + return StepState.indexed; + } +}""" + }, + { + "widgetId": 200, + "name": 'Stepper的方向', + "priority": 2, + "subtitle": "【type】 : 方向 【StepperType】", + "code": """class VerticalStepper extends StatefulWidget { + @override + _VerticalStepperState createState() => _VerticalStepperState(); +} + +class _VerticalStepperState extends State { + int _position = 0; + + final stepsData = { + "填写表单":'请按表单填写个人信息。', + "邮箱校验":'已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。', + "注册完成":'恭喜您，注册完成！', + }; + + final steps = [ + Step( + title: Text("填写表单"), + content: Container(height: 60, child: Text("请按表单填写个人信息")), + ), + Step(title: Text("邮箱校验"), content: Text("请对您的账号进行邮箱校验")), + Step(title: Text("注册完成"), content: Text("恭喜您，注册完成")), + ]; + + @override + Widget build(BuildContext context) { + return Container( + child: Stepper( + type:StepperType.vertical, + currentStep: _position, + onStepTapped: (index) { + setState(() { + _position = index; + }); + }, + onStepContinue: () { + setState(() { + if (_position < 2) { + _position++; + } + }); + }, + onStepCancel: () { + if (_position > 0) { + setState(() { + _position--; + }); + } + }, + controlsBuilder: (_, + {VoidCallback onStepContinue, VoidCallback onStepCancel}) { + return Row( + children: [ + RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepContinue, + child: Icon( + Icons.check, + color: Colors.white, + ), + ), + RaisedButton( + color: Colors.red, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepCancel, + child: Icon( + Icons.keyboard_backspace, + color: Colors.white, + ), + ), + ], + ); + }, + steps: stepsData.keys.map((e){ + bool isActive = stepsData.keys.toList().indexOf(e) ==_position; + return Step( + title: Text(e,style: TextStyle(color: isActive?Colors.blue:Colors.black),), + isActive: isActive, + state: _getState(stepsData.keys.toList().indexOf(e)), + content: Container(height: 60, child: Text(stepsData[e])), + ); + }).toList()), + ); + } + _getState(index){ + if(_position==index) return StepState.editing; + if(_position>index) return StepState.complete; + return StepState.indexed; + } +}""" + }, + ], + "AnimatedSize": [ + {"widgetId": 201, + "name": 'AnimatedAlign基本使用', + "priority": 1, + "subtitle": + "【child】 : 孩子组件 【Widget】\n" + "【duration】 : 动画时长 【Duration】\n" + "【alignment】 : 对齐方式 【AlignmentGeometry】\n" + "【curve】 : 动画曲线 【Duration】\n" + "【vsync】 : vsync 【TickerProvider】", + "code": """class CustomAnimatedSize extends StatefulWidget { + @override + _CustomAnimatedSizeState createState() => _CustomAnimatedSizeState(); +} + +class _CustomAnimatedSizeState extends State + with SingleTickerProviderStateMixin { + final double start = 100; + final double end = 200; + + double _width; + + @override + void initState() { + _width = start; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + _buildSwitch(), + Container( + color: Colors.grey.withAlpha(22), + width: 200, + height: 100, + alignment: Alignment.center, + child: AnimatedSize( + vsync: this, + duration: Duration(seconds: 1), + curve: Curves.fastOutSlowIn, + alignment: Alignment(0, 0), + child: Container( + height: 40, + width: _width, + alignment: Alignment.center, + color: Colors.blue, + child: Text( + '张风捷特烈', + style: TextStyle(color: Colors.white), + ), + ), + ), + ), + ], + ); + } + + Widget _buildSwitch() => Switch( + value: _width == end, + onChanged: (v) { + setState(() { + _width = v ? end : start; + }); + }); }"""}, - ], "x": [ - {"code": """"""}, ], }; - -// "ExpansionTile": [ -// { -// "widgetId": 52, -// "name": 'ExpansionTile基本使用', -// "priority": 1, -// "subtitle": "【children】 : 展开内容 【List】\n" -// "【leading】 : 头左组件 【Widget】\n" -// "【title】 : 头中组件 【Widget】\n" -// "【trailing】 : 头尾组件 【Widget】\n" -// "【backgroundColor】 : 背景色 【Color】\n" -// "【onExpansionChanged】 : 折叠事件 【Function(bool)】\n" -// "【initiallyExpanded】 : 是否初始时展开 【bool】", -// "code": """class CustomExpansionTile extends StatefulWidget { -// @override -// _CustomExpansionTileState createState() => _CustomExpansionTileState(); -//} -// -//class _CustomExpansionTileState extends State { -// -// @override -// Widget build(BuildContext context) { -// -// return ExpansionTile( -// leading: Icon(Icons.star), -// title: Text("选择语言"), -// backgroundColor: Colors.grey.withAlpha(6), -// onExpansionChanged: (value){ -// print('\$value'); -// }, -// initiallyExpanded: false, -// children: [ -// CustomRadioListTile() -// ], -// ); -// } -//}""" -// } -// ], diff --git a/lib/app/style/shape/techno_shape.dart b/lib/app/style/shape/techno_shape.dart new file mode 100644 index 0000000..dc4a43c --- /dev/null +++ b/lib/app/style/shape/techno_shape.dart @@ -0,0 +1,98 @@ +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-06 +/// contact me by email 1981462002@qq.com +/// 说明: 打个洞 +/// offset 洞的偏移量分率 x,y 在 0~1 之间 +/// size 洞的大小 + +class TechnoShapeBorder extends ShapeBorder { + final Path outLinePath = Path(); + final Paint _paint = Paint(); + final Path innerLinePath = Path(); + final Path innerLinePathTop = Path(); + final Color color; + + final cornerWidth; + + final spanWidth; + final storkWidth; + final innerRate; + + TechnoShapeBorder( + {this.color = Colors.green, + this.cornerWidth = 10.0, + this.spanWidth = 2.5, + this.innerRate = 0.15, + this.storkWidth = 1.0}) { + _paint + ..color = color + ..strokeWidth = storkWidth; + } + + @override + EdgeInsetsGeometry get dimensions => null; + + @override + Path getInnerPath(Rect rect, {TextDirection textDirection}) { + var path = Path(); + path.addRRect(RRect.fromRectAndRadius(rect, Radius.circular(5))); + return path; + } + + @override + Path getOuterPath(Rect rect, {TextDirection textDirection}) { + outLinePath + ..moveTo(cornerWidth, 0) + ..lineTo(rect.width - cornerWidth, 0) + ..lineTo(rect.width, cornerWidth) + ..lineTo(rect.width, rect.height - cornerWidth) + ..lineTo(rect.width - cornerWidth, rect.height) + ..lineTo(cornerWidth, rect.height) + ..lineTo(0, rect.height - cornerWidth) + ..lineTo(0, cornerWidth) + ..close(); + innerLinePath + ..moveTo(rect.width / 2, rect.height) + ..relativeLineTo(rect.width * innerRate, 0) + ..relativeLineTo(-spanWidth * 2, -spanWidth) + ..relativeLineTo(-rect.width * innerRate * 2, 0) + ..relativeLineTo(-spanWidth * 2, spanWidth) + ..close(); + +// innerLinePath +// ..moveTo(rect.width / 2, 0) +// ..relativeLineTo(rect.width * innerRate, 0) +// ..relativeLineTo(-spanWidth * 2, spanWidth) +// ..relativeLineTo(-rect.width * innerRate * 2, 0) +// ..relativeLineTo(-spanWidth * 2, -spanWidth) +// ..close(); + return Path.combine(PathOperation.difference, outLinePath, innerLinePath); + } + + @override + void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) { +// + canvas.drawPath( + Path.combine(PathOperation.difference, outLinePath, innerLinePath), + _paint..style = PaintingStyle.stroke); + + innerLinePathTop + ..moveTo(rect.width / 2, 0) + ..relativeLineTo(rect.width * innerRate, 0) + ..relativeLineTo(-spanWidth * 2, spanWidth) + ..relativeLineTo(-rect.width * innerRate * 2, 0) + ..relativeLineTo(-spanWidth * 2, -spanWidth) + ..close(); + canvas.drawPath(innerLinePathTop, _paint..style = PaintingStyle.fill); + } + + @override + ShapeBorder scale(double t) { + // TODO: implement scale + return null; + } +} diff --git a/lib/blocs/widgets/widget_bloc.dart b/lib/blocs/widgets/widget_bloc.dart index cb7188f..8c95655 100644 --- a/lib/blocs/widgets/widget_bloc.dart +++ b/lib/blocs/widgets/widget_bloc.dart @@ -34,7 +34,8 @@ class WidgetBloc extends Bloc { yield WidgetsLoaded( widgets, ); - } catch (_) { + } catch (err) { + print(err); yield WidgetsLoadFailed(); } } diff --git a/lib/components/Destroy.dart b/lib/components/Destroy.dart new file mode 100644 index 0000000..b9f82cf --- /dev/null +++ b/lib/components/Destroy.dart @@ -0,0 +1,167 @@ +import 'dart:math'; +import 'dart:typed_data'; +import 'dart:ui'; + +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; +// 手动导入一下iamge包 +import 'package:image/image.dart' as image; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: + +class Destroy extends StatefulWidget { + // 将需要沙化的内容包裹起来 + final Widget child; + + // 吹散动画的时间 + final Duration duration; + + // 图层数量 图层越多，吹散效果越好但是更耗时 + final int numberOfLayers; + + Destroy( + {Key key, + @required this.child, + this.duration = const Duration(seconds: 3), + this.numberOfLayers = 10}) + : super(key: key); + + @override + _DestroyState createState() => _DestroyState(); +} + +class _DestroyState extends State with TickerProviderStateMixin{ + // 吹散动画Controller + AnimationController _mainController; + + // key of child + GlobalKey _globalKey = GlobalKey(); + + // 重叠的分离图层 + List layers = []; + + @override + void initState() { + super.initState(); + + _mainController = + AnimationController(vsync: this, duration: widget.duration); + } + + @override + void dispose() { + _mainController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Stack( + children: [ + ...layers, // 沙化图层 + // 可点击的child 用RepaintBoundary包裹以截图 + GestureDetector( + onTap: () { + blow(); + }, + // 当动画开始 本体隐藏 + child: _mainController.isAnimating + ? Container() + : RepaintBoundary( + key: _globalKey, + child: widget.child, + ), + ) + ], + ); + } + Future blow() async { + // 获取到完整的图像 + image.Image fullImage = await _getImageFromWidget(); + + // 获取原图的宽高 + int width = fullImage.width; + int height = fullImage.height; + + // 初始化与原图相同大小的空白的图层 + List blankLayers = + List.generate(widget.numberOfLayers, (i) => image.Image(width, height)); + + // 将原图的像素点，分布到layer中 + separatePixels(blankLayers, fullImage, width, height); + + // 将图层转换为Widget + layers = blankLayers.map((layer) => imageToWidget(layer)).toList(); + + // 刷新页面 + setState(() {}); + + // 开始动画 + _mainController.forward(); + } + + void separatePixels(List blankLayers, image.Image fullImage, + int width, int height) { + // 遍历所有的像素点 + for (int x = 0; x < width; x++) { + for (int y = 0; y < height; y++) { + // 获取当前的像素点 + int pixel = fullImage.getPixel(x, y); + // 如果当前像素点是透明的 则直接continue 减少不必要的浪费 + if (0 == pixel) continue; + + // 随机生成放入的图层index + int index = Random().nextInt(widget.numberOfLayers); + // 将像素点放入图层 + blankLayers[index].setPixel(x, y, pixel); + } + } + } + // 将一个Widget转为image.Image对象 + Future _getImageFromWidget() async { + // _globalKey为需要图像化的widget的key + RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject(); + + // ui.Image => image.Image + var img = await boundary.toImage(); + var byteData = await img.toByteData(format: ImageByteFormat.png); + var pngBytes = byteData.buffer.asUint8List(); + + return image.decodeImage(pngBytes); + } + Widget imageToWidget(image.Image png) { + // 先将image 转换为 Uint8List 格式 + Uint8List data = Uint8List.fromList(image.encodePng(png)); + + // 定义一个先快后慢的动画过程曲线 + CurvedAnimation animation = CurvedAnimation( + parent: _mainController, curve: Interval(0, 1, curve: Curves.easeOut)); + + // 定义位移变化的插值（始末偏移量） + Animation offsetAnimation = Tween( + begin: Offset.zero, + // 基础偏移量+随机偏移量 + end: Offset(50, -20) + + Offset(30, 30).scale((Random().nextDouble() - 0.5) * 2, + (Random().nextDouble() - 0.5) * 2), + ).animate(animation); + + return AnimatedBuilder( + animation: _mainController, + child: Image.memory(data), + builder: (context, child) { + // 位移动画 + return Transform.translate( + offset: offsetAnimation.value, + // 渐隐动画 + child: Opacity( + opacity: cos(animation.value * pi / 2), // 1 => 0 + child: child, + ), + ); + }, + ); + } +} diff --git a/lib/components/panel/panel.dart b/lib/components/panel/panel.dart index 46b400b..fbd8705 100644 --- a/lib/components/panel/panel.dart +++ b/lib/components/panel/panel.dart @@ -106,7 +106,6 @@ class _NodePanelState extends State Widget _buildCode(BuildContext context) =>AnimatedCrossFade( firstCurve: Curves.easeInCirc, secondCurve: Curves.easeInToLinear, -// sizeCurve: Curves.slowMiddle, firstChild: Container(), secondChild: Container( width: MediaQuery.of(context).size.width, diff --git a/lib/database/flutter_db.dart b/lib/database/flutter_db.dart index 4b855f0..abfdfd0 100644 --- a/lib/database/flutter_db.dart +++ b/lib/database/flutter_db.dart @@ -23,6 +23,7 @@ class FlutterDb { family INTEGER NOT NULL, lever FLOAT(2) NOT NULL, image VARCHAR(128) NOT NULL, + linkWidget TEXT DEFAULT '', info VARCHAR(256) NOT NULL );"""; //建表语句 diff --git a/lib/database/po/widget_po.dart b/lib/database/po/widget_po.dart index 1c14da9..12a2cb5 100644 --- a/lib/database/po/widget_po.dart +++ b/lib/database/po/widget_po.dart @@ -12,6 +12,7 @@ class WidgetPo extends Equatable { final double lever; final String image; final String info; + final String linkWidget; const WidgetPo( {this.id, @@ -20,6 +21,7 @@ class WidgetPo extends Equatable { this.childCount, this.family, this.lever, + this.linkWidget, this.image, this.info}); @@ -30,8 +32,9 @@ class WidgetPo extends Equatable { nameCN: map["nameCN"], family: map["family"], childCount: map["childCount"], - lever: map["lever"], + lever: map["lever"].toDouble(), image: map["image"], + linkWidget: map["linkWidget"], info: map["info"]); } diff --git a/lib/database/widget_dao.dart b/lib/database/widget_dao.dart index ade1df3..6e81b10 100644 --- a/lib/database/widget_dao.dart +++ b/lib/database/widget_dao.dart @@ -9,8 +9,8 @@ class WidgetDao { final db = await FlutterDb.db.database; String addSql = //插入数据 "INSERT INTO " - "widget(id,name,nameCN,childCount,family,lever,image,info) " - "VALUES (?,?,?,?,?,?,?,?);"; + "widget(id,name,nameCN,childCount,family,lever,image,linkWidget,info) " + "VALUES (?,?,?,?,?,?,?,?,?);"; return await db.transaction((tran) async => await tran.rawInsert(addSql, [ widget.id, widget.name, @@ -19,6 +19,7 @@ class WidgetDao { widget.family, widget.lever, widget.image, + widget.linkWidget, widget.info ])); } diff --git a/lib/main.dart b/lib/main.dart index 0a161c6..1a61353 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -6,6 +6,7 @@ import 'package:flutter_unit/repositorys/widget_me_repository.dart'; import 'package:flutter_unit/views/unit_splash.dart'; import 'package:flutter_unit/views/widgets/StatefulWidget/Checkbox.dart'; +import 'app/initial.dart'; import 'blocs/detail/detail_bloc.dart'; import 'blocs/global/global_bloc.dart'; import 'blocs/widgets/widget_bloc.dart'; @@ -16,7 +17,12 @@ import 'views/pages/unit_navigation.dart'; void main() async { // await Initial.init(); - runApp(BlocWrapper(child: FlutterApp())); +// runApp(BlocWrapper( +// child: ColorFiltered( +// colorFilter: ColorFilter.mode(Colors.white, BlendMode.color), +// child: FlutterApp()))); + runApp(BlocWrapper( + child: FlutterApp())); // runApp(FlutterApp()); } @@ -48,15 +54,16 @@ class FlutterApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( - title: 'Flutter Demo', - onGenerateRoute: Router.generateRoute, - theme: ThemeData( - primarySwatch: Colors.blue, - ), - home: + title: 'Flutter Demo', + onGenerateRoute: Router.generateRoute, + theme: ThemeData( + primarySwatch: Colors.blue, + ), + home: // NavPage() - UnitNavigation(), - ); + UnitSplash() +// UnitNavigation(), + ); } } //NavPage() diff --git a/lib/views/items/widget_list_item.dart b/lib/views/items/coupon_widget_list_item.dart similarity index 73% rename from lib/views/items/widget_list_item.dart rename to lib/views/items/coupon_widget_list_item.dart index 8c5bc5d..a25cdac 100644 --- a/lib/views/items/widget_list_item.dart +++ b/lib/views/items/coupon_widget_list_item.dart @@ -2,15 +2,14 @@ import 'package:flutter/material.dart'; import 'package:flutter_star/flutter_star.dart'; import 'package:flutter_unit/app/res/cons.dart'; import 'package:flutter_unit/app/style/shape/coupon_shape_border.dart'; -import 'package:flutter_unit/app/style/shape/hole_shape.dart'; import 'package:flutter_unit/components/circle_image.dart'; import 'package:flutter_unit/components/circle_text.dart'; import 'package:flutter_unit/model/widget_model.dart'; -class WidgetListItem extends StatelessWidget { +class CouponWidgetListItem extends StatelessWidget { final WidgetModel data; - WidgetListItem({this.data}); + CouponWidgetListItem({this.data}); final List colors = Cons.tabColors; @@ -19,11 +18,11 @@ class WidgetListItem extends StatelessWidget { return ClipPath( clipper: ShapeBorderClipper( shape: CouponShapeBorder( - hasLine: false, edgeRadius: 25, lineRate: 0.23)), + hasLine: false, edgeRadius: 25, lineRate: 0.20)), child: Container( color: Color(colors[data.family.index]).withAlpha(66), height: 95, - padding: EdgeInsets.only(top: 15, left: 10, right: 10, bottom: 5), + padding: EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 5), child: Row( children: [ Padding( @@ -67,18 +66,16 @@ class WidgetListItem extends StatelessWidget { child: Row( children: [ SizedBox(width: 10), - LimitedBox( - maxWidth: 150, - child: Text(data.name, - overflow: TextOverflow.ellipsis, - style: TextStyle( - fontSize: 17, - fontWeight: FontWeight.bold, - shadows: [ - Shadow(color: Colors.white, offset: Offset(.3, .3)) - ])), - ), - Spacer(), + Expanded( + child: Text(data.name, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: 17, + fontWeight: FontWeight.bold, + shadows: [ + Shadow(color: Colors.white, offset: Offset(.3, .3)) + ])), + ), StarScore( star: Star(emptyColor: Colors.white, size: 15, fillColor: invColor), score: data.lever, @@ -92,7 +89,6 @@ class WidgetListItem extends StatelessWidget { return Padding( padding: const EdgeInsets.only(left: 10, bottom: 10, top: 5), child: Container( - constraints: BoxConstraints(maxWidth: 250), child: Text( //尾部摘要 data.info, @@ -100,11 +96,6 @@ class WidgetListItem extends StatelessWidget { overflow: TextOverflow.ellipsis, style: TextStyle( color: Colors.grey[600], - -// color: Color.fromARGB(color.alpha, 255 - color.red, -// 255 - color.green, 255 - color.blue), -// Color() -// .withBlue(66), fontSize: 14, shadows: [Shadow(color: Colors.white, offset: Offset(.5, .5))]), ), diff --git a/lib/views/items/techno_widget_list_item.dart b/lib/views/items/techno_widget_list_item.dart new file mode 100644 index 0000000..20bd20c --- /dev/null +++ b/lib/views/items/techno_widget_list_item.dart @@ -0,0 +1,109 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_star/flutter_star.dart'; +import 'package:flutter_unit/app/res/cons.dart'; +import 'package:flutter_unit/app/style/shape/coupon_shape_border.dart'; +import 'package:flutter_unit/app/style/shape/techno_shape.dart'; +import 'package:flutter_unit/components/circle_image.dart'; +import 'package:flutter_unit/components/circle_text.dart'; +import 'package:flutter_unit/model/widget_model.dart'; + +class TechnoWidgetListItem extends StatelessWidget { + final WidgetModel data; + + TechnoWidgetListItem({this.data}); + + + @override + Widget build(BuildContext context) { + return Material( + color: itemColor.withAlpha(66), + shape: TechnoShapeBorder( + color: itemColor + ), + child: Container( + height: 95, + padding: EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 5), + child: Row( + children: [ + Wrap( + spacing: 5, + direction: Axis.vertical, + alignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + _buildLeading(), + StarScore( + star: Star(emptyColor: Colors.white, size: 12, fillColor: itemColor), + score: data.lever, + ) + ], + ), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [_buildTitle(), _buildSummary()], + ), + ), + ], + ), + ), + ); + } + + Widget _buildLeading() => Padding( + padding: const EdgeInsets.only(left: 5,right: 5), + child: Hero( + tag: "hero_widget_image_${data.name}", + child: data.image == null + ? Material( + color: Colors.transparent, + child: CircleText( + text: data.name, + size: 60, + color: itemColor, + ), + ) + : CircleImage( + image: data.image, + size: 55, + ), + ), + ); + + Color get itemColor => Color(Cons.tabColors[data.family.index]); + + Widget _buildTitle() { + return Row( + children: [ + SizedBox(width: 10),Text(data.name, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: 17, + fontWeight: FontWeight.bold, + shadows: [ + Shadow(color: Colors.white, offset: Offset(.3, .3)) + ])), + ], + ); + } + + Widget _buildSummary() { + return Padding( + padding: const EdgeInsets.only(left: 10, bottom: 10, top: 5), + child: Container( + child: Text( + //尾部摘要 + data.info, + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: Colors.grey[600], + fontSize: 14, + shadows: [Shadow(color: Colors.white, offset: Offset(.5, .5))]), + ), + ), + ); + } +} diff --git a/lib/views/pages/detail/widget_detail_page.dart b/lib/views/pages/detail/widget_detail_page.dart index 113ec7f..f13a6af 100644 --- a/lib/views/pages/detail/widget_detail_page.dart +++ b/lib/views/pages/detail/widget_detail_page.dart @@ -4,7 +4,6 @@ import 'package:flutter_star/flutter_star.dart'; import 'package:flutter_unit/app/res/cons.dart'; import 'package:flutter_unit/blocs/detail/detail_bloc.dart'; import 'package:flutter_unit/blocs/detail/detail_state.dart'; -import 'package:flutter_unit/components/circle_text.dart'; import 'package:flutter_unit/components/panel/panel.dart'; import 'package:flutter_unit/model/node_model.dart'; import 'package:flutter_unit/model/widget_model.dart'; @@ -53,7 +52,6 @@ class WidgetDetailPage extends StatelessWidget { // 构建上部左侧介绍 Widget _buildLeft(WidgetModel model) => Expanded( child: Column( - mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( diff --git a/lib/views/pages/home_page.dart b/lib/views/pages/home_page.dart index ab61684..6742216 100644 --- a/lib/views/pages/home_page.dart +++ b/lib/views/pages/home_page.dart @@ -11,11 +11,9 @@ import 'package:flutter_unit/blocs/widgets/widget_event.dart'; import 'package:flutter_unit/blocs/widgets/widget_state.dart'; import 'package:flutter_unit/components/toly_app_bar.dart'; import 'package:flutter_unit/views/empty_page.dart'; -import 'package:flutter_unit/views/items/widget_list_item.dart'; -import 'package:flutter_unit/views/widgets/StatelessWidget/stateless_unit.dart'; -import '../home/home_left_drawer.dart'; +import 'package:flutter_unit/views/items/coupon_widget_list_item.dart'; +import 'package:flutter_unit/views/items/techno_widget_list_item.dart'; import '../home/home_light_drawer.dart'; -import '../../app/res/cons.dart'; import 'home_drawer.dart'; class HomePage extends StatefulWidget { @@ -25,7 +23,6 @@ class HomePage extends StatefulWidget { class _HomePageState extends State { ScrollController _ctrl; - double _y = 0; double limitY = 35; @override @@ -42,10 +39,7 @@ class _HomePageState extends State { @override Widget build(BuildContext context) { - return DefaultTabController( - //标签控制器 - length: Cons.TABS.length, //标签个数 - child: BlocBuilder( + return BlocBuilder( builder: (_, state) => Scaffold( appBar: TolyAppBar( preferredSize: Size.fromHeight(state.height), @@ -63,13 +57,13 @@ class _HomePageState extends State { drawer: HomeDrawer(), //左滑页 endDrawer: HomeRightDrawer(), //右滑页 - ))); + )); } Widget _buildContent(BuildContext context) => BlocBuilder(builder: (_, state) { if (state is WidgetsLoaded) { - var items = state.widgets.reversed.toList(); + var items = state.widgets; if (items.isEmpty) return EmptyPage(); return ListView.separated( controller: _ctrl, @@ -81,13 +75,16 @@ class _HomePageState extends State { .add(ToWidgetDetail(items[index])); Navigator.pushNamed(context, Router.widget_detail); }, - child: WidgetListItem( + child: TechnoWidgetListItem( data: items[index], )), ), separatorBuilder: (_, index) => Container(), itemCount: items.length); } + if(state is WidgetsLoadFailed){ + return Container(child: Text('加载数据异常'),); + } return Container(); }); } diff --git a/lib/views/pages/stateless/stateless_page.dart b/lib/views/pages/stateless/stateless_page.dart deleted file mode 100644 index 5baed1e..0000000 --- a/lib/views/pages/stateless/stateless_page.dart +++ /dev/null @@ -1,43 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_bloc/flutter_bloc.dart'; -import 'package:flutter_unit/app/router.dart'; -import 'package:flutter_unit/blocs/detail/detail_bloc.dart'; -import 'package:flutter_unit/blocs/detail/detail_event.dart'; -import 'package:flutter_unit/model/widget_model.dart'; -import 'package:flutter_unit/views/items/widget_list_item.dart'; - -class WidgetPage extends StatefulWidget { - - final List items; - - WidgetPage(this.items); - @override - _WidgetPageState createState() => _WidgetPageState(); -} - -class _WidgetPageState extends State { - @override - void initState() { - print('initState'); - super.initState(); - } - - @override - Widget build(BuildContext context) { - - return ListView.separated( - itemBuilder: (_, index) => Container( - margin: EdgeInsets.symmetric(horizontal: 15, vertical: 5), - child: InkWell( - onTap: () { - BlocProvider.of(context).add(ToWidgetDetail(widget.items[index])); - Navigator.pushNamed(context, Router.widget_detail); - }, - child: WidgetListItem( - data: widget.items[index], - )), - ), - separatorBuilder: (_, index) => Container(), - itemCount: widget.items.length); - } -} diff --git a/lib/views/pages/unit_navigation.dart b/lib/views/pages/unit_navigation.dart index 0587bde..f524936 100644 --- a/lib/views/pages/unit_navigation.dart +++ b/lib/views/pages/unit_navigation.dart @@ -4,7 +4,7 @@ import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_unit/app/res/cons.dart'; import 'package:flutter_unit/app/router.dart'; import 'package:flutter_unit/blocs/global/global_bloc.dart'; -import 'package:flutter_unit/views/widgets/StatelessWidget/button/FloatingActionButton.dart'; +import 'package:flutter_unit/views/widgets/StatelessWidget/FloatingActionButton.dart'; import 'act_page.dart'; import 'home_page.dart'; import 'love_page.dart'; diff --git a/lib/views/widgets/ProxyWidget/DropdownButtonHideUnderline.dart b/lib/views/widgets/ProxyWidget/DropdownButtonHideUnderline.dart new file mode 100644 index 0000000..cc97cf3 --- /dev/null +++ b/lib/views/widgets/ProxyWidget/DropdownButtonHideUnderline.dart @@ -0,0 +1,59 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-30 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 181, +// "name": 'DropDownButtonHideUnderline使用', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n", +// } +class CustomDropDownButtonHideUnderline extends StatefulWidget { + @override + _CustomDropDownButtonHideUnderlineState createState() => + _CustomDropDownButtonHideUnderlineState(); +} + +class _CustomDropDownButtonHideUnderlineState + extends State { + Color _color = Colors.red; + final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green]; + final _info = ["红色", "黄色", "蓝色", "绿色"]; + + @override + Widget build(BuildContext context) { + return Wrap( + children: [ + Container( + margin: EdgeInsets.symmetric(horizontal: 20), + width: 50, + height: 50, + color: _color, + ), + DropdownButtonHideUnderline( + child: DropdownButton( + value: _color, + elevation: 1, + icon: Icon( + Icons.expand_more, + size: 20, + color: _color, + ), + items: _buildItems(), + onChanged: (v) => setState(() => _color = v)), + ), + ], + ); + } + + List> _buildItems() => _colors + .map((e) => DropdownMenuItem( + value: e, + child: Text( + _info[_colors.indexOf(e)], + style: TextStyle(color: e), + ))) + .toList(); +} diff --git a/lib/views/widgets/ProxyWidget/InheritedWidget/MediaQuery.dart b/lib/views/widgets/ProxyWidget/InheritedWidget/MediaQuery.dart index c94d39f..818b2e1 100644 --- a/lib/views/widgets/ProxyWidget/InheritedWidget/MediaQuery.dart +++ b/lib/views/widgets/ProxyWidget/InheritedWidget/MediaQuery.dart @@ -36,7 +36,7 @@ class CustomMediaQuery extends StatelessWidget { return Container( height: 200, - color: Colors.grey.withAlpha(33), + color: Colors.grey.withAlpha(11), child:ListView( children: data.keys.map((e) => buildItem(e, data)).toList(), ), diff --git a/lib/views/widgets/ProxyWidget/InheritedWidget/ScrollConfiguration.dart b/lib/views/widgets/ProxyWidget/InheritedWidget/ScrollConfiguration.dart new file mode 100644 index 0000000..a8bb6e5 --- /dev/null +++ b/lib/views/widgets/ProxyWidget/InheritedWidget/ScrollConfiguration.dart @@ -0,0 +1,68 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-30 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 180, +// "name": 'ScrollConfiguration基本使用', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【behavior】 : 滑动行为 【ScrollBehavior】\n" +// " 可以使用ScrollConfiguration让ListView无蓝色阴影", +// } +class CustomScrollConfiguration extends StatelessWidget { + final data = [ + Colors.cyan[50], + Colors.cyan[100], + Colors.cyan[200], + Colors.cyan[300], + Colors.cyan[400], + Colors.cyan[500], + Colors.cyan[600], + Colors.cyan[700], + Colors.cyan[800], + Colors.cyan[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: ScrollConfiguration( + behavior: NoScrollBehavior(), child: _buildListView()), + ); + } + + Widget _buildListView() => ListView( + padding: EdgeInsets.symmetric(horizontal: 5), + children: data + .map((color) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: color, + child: Text( + colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} + +class NoScrollBehavior extends ScrollBehavior { + @override + Widget buildViewportChrome( + BuildContext context, Widget child, AxisDirection axisDirection) => + child; +} diff --git a/lib/views/widgets/RenderObjectWidget/ErrorWidget.dart b/lib/views/widgets/RenderObjectWidget/ErrorWidget.dart new file mode 100644 index 0000000..7dce9ac --- /dev/null +++ b/lib/views/widgets/RenderObjectWidget/ErrorWidget.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: + +// { +// "widgetId": 197, +// "name": 'ErrorWidget基本使用', +// "priority": 1, +// "subtitle": +// "入参 : 显示信息 【Object】", +// } +class ErrorWidgetDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: ErrorWidget( + 'I am Error ErrorWidget\n' + 'But now, there has no error.' + ), + ); + } +} diff --git a/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/IndexedStack.dart b/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/IndexedStack.dart index 91198b9..28a0600 100644 --- a/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/IndexedStack.dart +++ b/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/IndexedStack.dart @@ -11,7 +11,7 @@ import 'package:flutter/material.dart'; // "subtitle": // "【children】 : 子组件列表 【Lis】\n" // "【alignment】 : 对齐方式 【AlignmentGeometry】\n" -// "【index】 : 当前显示所有 【Function()】", +// "【index】 : 当前显示组件 【int】", // } class CustomIndexedStack extends StatefulWidget { @override diff --git a/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/RichText.dart b/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/RichText.dart index 546e63f..967733a 100644 --- a/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/RichText.dart +++ b/lib/views/widgets/RenderObjectWidget/MultiChildRenderObjectWidget/RichText.dart @@ -1,10 +1,23 @@ import 'package:flutter/material.dart'; import 'package:flutter_unit/app/utils/color_utils.dart'; - +// { +// "widgetId": 101, +// "name": 'RichText基本使用', +// "priority": 1, +// "subtitle": +// "【text】 : 文字 【TextSpan】", +// } class CustomRichText extends StatelessWidget { - final str = " 发光强度简称光强，国际单位是（坎德拉）简写cd。1cd是指光源在指定方向的单位立体角内发出的光通量。光源辐射是均匀时，则光强为I=F/Ω，Ω为立体角，单位为球面度（sr）,F为光通量，单位是流明，对于点光源由I=F/4π 。光亮度是表示发光面明亮程度的，指发光表面在指定方向的发光强度与垂直且指定方向的发光面的面积之比，单位是坎德拉/平方米。对于一个漫散射面，尽管各个方向的光强和光通量不同，但各个方向的亮度都是相等的。电视机的荧光屏就是近似于这样的漫散射面，所以从各个方向上观看图像，都有相同的亮度感。"; - + final str = + " 发光强度简称光强，国际单位是（坎德拉）简写cd。" + "1cd是指光源在指定方向的单位立体角内发出的光通量。" + "光源辐射是均匀时，则光强为I=F/Ω，Ω为立体角，单位为球面度（sr）,F为光通量，" + "单位是流明，对于点光源由I=F/4π 。光亮度是表示发光面明亮程度的，" + "指发光表面在指定方向的发光强度与垂直且指定方向的发光面的面积之比，" + "单位是坎德拉/平方米。对于一个漫散射面，尽管各个方向的光强和光通量不同，" + "但各个方向的亮度都是相等的。电视机的荧光屏就是近似于这样的漫散射面，" + "所以从各个方向上观看图像，都有相同的亮度感。"; @override Widget build(BuildContext context) { @@ -14,12 +27,10 @@ class CustomRichText extends StatelessWidget { text: TextSpan( children: str .split("") - .map((str) => - TextSpan( - text: str, - style: TextStyle( - fontSize: 14, - color: ColorUtils.randomColor()))) + .map((str) => TextSpan( + text: str, + style: TextStyle( + fontSize: 14, color: ColorUtils.randomColor()))) .toList())), ); } diff --git a/lib/views/widgets/RenderObjectWidget/SingleChildRenderObjectWidget/AnimatedSize.dart b/lib/views/widgets/RenderObjectWidget/SingleChildRenderObjectWidget/AnimatedSize.dart new file mode 100644 index 0000000..19137f0 --- /dev/null +++ b/lib/views/widgets/RenderObjectWidget/SingleChildRenderObjectWidget/AnimatedSize.dart @@ -0,0 +1,75 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-04-01 +/// contact me by email 1981462002@qq.com +/// 说明: + +// { +// "widgetId": 201, +// "name": 'AnimatedAlign基本使用', +// "priority": 1, +// "subtitle": +// "【child】 : 孩子组件 【Widget】\n" +// "【duration】 : 动画时长 【Duration】\n" +// "【alignment】 : 对齐方式 【AlignmentGeometry】\n" +// "【curve】 : 动画曲线 【Duration】\n" +// "【vsync】 : vsync 【TickerProvider】", +// } + +class CustomAnimatedSize extends StatefulWidget { + @override + _CustomAnimatedSizeState createState() => _CustomAnimatedSizeState(); +} + +class _CustomAnimatedSizeState extends State + with SingleTickerProviderStateMixin { + final double start = 100; + final double end = 200; + + double _width; + + @override + void initState() { + _width = start; + super.initState(); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + _buildSwitch(), + Container( + color: Colors.grey.withAlpha(22), + width: 200, + height: 100, + alignment: Alignment.center, + child: AnimatedSize( + vsync: this, + duration: Duration(seconds: 1), + curve: Curves.fastOutSlowIn, + alignment: Alignment(0, 0), + child: Container( + height: 40, + width: _width, + alignment: Alignment.center, + color: Colors.blue, + child: Text( + '张风捷特烈', + style: TextStyle(color: Colors.white), + ), + ), + ), + ), + ], + ); + } + + Widget _buildSwitch() => Switch( + value: _width == end, + onChanged: (v) { + setState(() { + _width = v ? end : start; + }); + }); +} diff --git a/lib/views/widgets/Sliver/CustomScrollView.dart b/lib/views/widgets/Sliver/CustomScrollView.dart new file mode 100644 index 0000000..c0ac2bd --- /dev/null +++ b/lib/views/widgets/Sliver/CustomScrollView.dart @@ -0,0 +1,91 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/utils/color_utils.dart'; + +/// create by 张风捷特烈 on 2020-03-30 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 183, +// "name": 'CustomScrollView基本使用', +// "priority": 1, +// "subtitle": +// "【slivers】 : 子组件列表 【List】\n" +// "【reverse】 : 是否反向 【bool】\n" +// "【scrollDirection】 : 滑动方向 【Axis】\n" +// "【controller】 : 控制器 【ScrollController】", +// } +class CustomScrollViewDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + anchor: 0, + scrollDirection: Axis.vertical, + reverse: false, + slivers: [_buildSliverAppBar(), _buildSliverFixedExtentList()], + ), + ); + } + + Widget _buildSliverFixedExtentList() => SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')), + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + title: Text( + '张风捷特烈', + style: TextStyle(color: Colors.black, //标题 + shadows: [ + Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2) + ]), + ), + background: Image.asset( + "assets/images/caver.jpeg", fit: BoxFit.cover, + ), + ), + ); + } +} diff --git a/lib/views/widgets/Sliver/FlexibleSpaceBar.dart b/lib/views/widgets/Sliver/FlexibleSpaceBar.dart new file mode 100644 index 0000000..9240e84 --- /dev/null +++ b/lib/views/widgets/Sliver/FlexibleSpaceBar.dart @@ -0,0 +1,110 @@ +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: + +import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/utils/color_utils.dart'; + +/// 说明: +// { +// "widgetId": 196, +// "name": 'SliverAppBar基本使用', +// "priority": 1, +// "subtitle": +// "【title】 : 标题组件 【Widget】\n" +// "【titlePadding】 : 标题间距 【EdgeInsetsGeometry】\n" +// "【collapseMode】 : 折叠模式 【CollapseMode】\n" +// "【stretchModes】 : 延伸模式 【List】\n" +// "【background】 : 背景组件 【Widget】\n" +// "【centerTitle】 : 是否居中 【bool】", +// } +class FlexibleSpaceBarDemo extends StatelessWidget { + + final data = [ + Colors.blue[50], + Colors.blue[100], + Colors.blue[200], + Colors.blue[300], + Colors.blue[400], + Colors.blue[500], + Colors.blue[600], + Colors.blue[700], + Colors.blue[800], + Colors.blue[900], + ]; + + @override + Widget build(BuildContext context) { + return + Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildSliverFixedExtentList() + ], + ), + ); + } + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + actions: _buildActions(), + pinned: true, + backgroundColor: Colors.blue, + flexibleSpace: FlexibleSpaceBar(//伸展处布局 + centerTitle: false, + title: Text('张风捷特烈',style: TextStyle(shadows: [ + Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2) + ]),), + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + stretchModes: [StretchMode.blurBackground,StretchMode.zoomBackground], + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + Widget _buildSliverFixedExtentList() => SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Sliver/SliverAppBar.dart b/lib/views/widgets/Sliver/SliverAppBar.dart new file mode 100644 index 0000000..8a78706 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverAppBar.dart @@ -0,0 +1,174 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/utils/color_utils.dart'; + +/// create by 张风捷特烈 on 2020-03-30 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 183, +// "name": 'SliverAppBar基本使用', +// "priority": 1, +// "subtitle": +// "【leading】 : 左侧组件 【Widget】\n" +// "【title】 : 中间组件 【Widget】\n" +// "【actions】 : 尾部组件列表 【List】\n" +// "【floating】 : 是否浮动 【bool】\n" +// "【pinned】 : 是否顶部停留 【bool】\n" +// "【snap】 : 是否半收展 【bool】\n" +// "【bottom】 : 底部组件 【PreferredSizeWidget】\n" +// "【expandedHeight】 : 延展高度 【double】\n" +// "【elevation】 : 影深 【double】\n" +// "【flexibleSpace】 : 延展空间 【FlexibleSpaceBar】\n" +// "【backgroundColor】 : 背景色 【Color】\n" +// "【controller】 : 控制器 【ScrollController】\n" +// " snap为true时必需floating为true", +// } +class SliverAppBarDemo extends StatefulWidget { + @override + _SliverAppBarDemoState createState() => _SliverAppBarDemoState(); +} + +class _SliverAppBarDemoState extends State { + bool _floating = false; + bool _pinned = false; + bool _snap = false; + + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + _buildTool(), + Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildSliverFixedExtentList() + ], + ), + ), + ], + ); + } + + Widget _buildSliverAppBar() { + print(_floating); + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + floating: _floating, + pinned: _pinned, + snap: _snap, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar(//伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + Widget _buildSliverFixedExtentList() => SliverFixedExtentList( + itemExtent: 60, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + Widget _buildTool() { + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Wrap( + direction: Axis.vertical, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + Text('floating'), + Switch( + value: _floating, + onChanged: (v) { + if(_snap&&!v){ + _snap =false; + } + setState(() => _floating = v); + }), + ], + ), + Wrap( + direction: Axis.vertical, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + Text('pinned'), + Switch( + value: _pinned, + onChanged: (v) => setState(() => _pinned = v)), + ], + ) ,Wrap( + direction: Axis.vertical, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + Text('snap'), + Switch( + value: _snap, + onChanged: (v) { + if(_floating){ + setState(() => _snap = v); + } + + }), + ], + ) + ], + ); + } +} diff --git a/lib/views/widgets/Sliver/SliverFillViewport.dart b/lib/views/widgets/Sliver/SliverFillViewport.dart new file mode 100644 index 0000000..d809bfb --- /dev/null +++ b/lib/views/widgets/Sliver/SliverFillViewport.dart @@ -0,0 +1,117 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 186, +// "name": 'SliverFixedExtentList基本使用', +// "priority": 1, +// "subtitle": +// "【viewportFraction】 : 视口分率 【double】\n" +// "【delegate】 : 孩子代理 【SliverChildDelegate】", +// } +class SliverFillViewportDemo extends StatefulWidget { + @override + _SliverFillViewportDemoState createState() => _SliverFillViewportDemoState(); +} + +class _SliverFillViewportDemoState extends State { + final data = [ + Colors.orange[50], + Colors.orange[100], + Colors.orange[200], + Colors.orange[300], + Colors.orange[400], + Colors.orange[500], + Colors.orange[600], + Colors.orange[700], + Colors.orange[800], + Colors.orange[900], + ]; + var _viewportFraction = 0.5; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + _buildTool(), + Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ), + ], + ); + } + + Widget _buildSliverList() => SliverFillViewport( + viewportFraction: _viewportFraction, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; + + _buildTool() { + return Slider( + value: _viewportFraction, + min: 0.01, + divisions: 20, + label: _viewportFraction.toStringAsFixed(1), + max: 2.0, + onChanged: (v) => setState(() => _viewportFraction = v)); + } +} diff --git a/lib/views/widgets/Sliver/SliverFixedExtentList.dart b/lib/views/widgets/Sliver/SliverFixedExtentList.dart new file mode 100644 index 0000000..b5c18f5 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverFixedExtentList.dart @@ -0,0 +1,101 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 186, +// "name": 'SliverFixedExtentList基本使用', +// "priority": 1, +// "subtitle": +// "【itemExtent】 : 主轴方向强迫长度 【double】\n" +// "【delegate】 : 孩子代理 【SliverChildDelegate】", +// } +class SliverFixedExtentListDemo extends StatefulWidget { + @override + _SliverFixedExtentListDemoState createState() => _SliverFixedExtentListDemoState(); +} + +class _SliverFixedExtentListDemoState extends State { + final data = [ + Colors.orange[50], + Colors.orange[100], + Colors.orange[200], + Colors.orange[300], + Colors.orange[400], + Colors.orange[500], + Colors.orange[600], + Colors.orange[700], + Colors.orange[800], + Colors.orange[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ); + } + + Widget _buildSliverList() => SliverFixedExtentList( + itemExtent: 50, + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Sliver/SliverGrid.dart b/lib/views/widgets/Sliver/SliverGrid.dart new file mode 100644 index 0000000..eda5d5e --- /dev/null +++ b/lib/views/widgets/Sliver/SliverGrid.dart @@ -0,0 +1,90 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/utils/color_utils.dart'; + +/// create by 张风捷特烈 on 2020-03-30 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 188, +// "name": 'SliverList基本使用', +// "priority": 1, +// "subtitle": +// "SliverGrid.count 指定轴向数量构造\n" +// "SliverGrid.extent 指定轴向长度构造\n" +// "属性特征同GridView,可详见之", +// } +class SliverGirdDemo extends StatelessWidget { + final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i)); + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ); + } + + Widget _buildSliverList() => SliverGrid.extent( + childAspectRatio: 1 / 0.618, + maxCrossAxisExtent: 180, + crossAxisSpacing: 5, + mainAxisSpacing: 5, + children: data + .map((e) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: e, + child: Text( + colorString(e), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Sliver/SliverList.dart b/lib/views/widgets/Sliver/SliverList.dart new file mode 100644 index 0000000..b907238 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverList.dart @@ -0,0 +1,95 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/utils/color_utils.dart'; + +/// create by 张风捷特烈 on 2020-03-30 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 185, +// "name": 'SliverList基本使用', +// "priority": 1, +// "subtitle": +// "【delegate】 : 孩子代理 【SliverChildDelegate】", +// } +class SliverListDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), _buildSliverList()], + ), + ); + } + + Widget _buildSliverList() => SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Sliver/SliverOpacity.dart b/lib/views/widgets/Sliver/SliverOpacity.dart new file mode 100644 index 0000000..e320514 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverOpacity.dart @@ -0,0 +1,93 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 192, +// "name": 'SliverOpacity基本使用', +// "priority": 1, +// "subtitle": +// "【opacity】 : 透明度 【double】\n" +// "【sliver】 : 子组件 【Function()】", +// } +class SliverOpacityDemo extends StatelessWidget { + final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i)); + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + SliverPadding( + padding: EdgeInsets.only(top: 10), + sliver: SliverOpacity(opacity: 0.2, sliver: _buildSliverGrid())) + ], + ), + ); + } + + Widget _buildSliverGrid() => SliverGrid.extent( + childAspectRatio: 1 / 0.618, + maxCrossAxisExtent: 180, + crossAxisSpacing: 5, + mainAxisSpacing: 5, + children: data + .map((e) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: e, + child: Text( + colorString(e), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Sliver/SliverPadding.dart b/lib/views/widgets/Sliver/SliverPadding.dart new file mode 100644 index 0000000..96e286e --- /dev/null +++ b/lib/views/widgets/Sliver/SliverPadding.dart @@ -0,0 +1,91 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 191, +// "name": 'SliverPadding基本使用', +// "priority": 1, +// "subtitle": +// "【sliver】 : 子组件 【Widget】\n" +// "【padding】 : 内边距 【EdgeInsetsGeometry】", +// } +class SliverPaddingDemo extends StatelessWidget { + final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i)); + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [_buildSliverAppBar(), SliverPadding( + padding: EdgeInsets.only(top: 10), + sliver + : _buildSliverGrid())], + ), + ); + } + + Widget _buildSliverGrid() => SliverGrid.extent( + childAspectRatio: 1 / 0.618, + maxCrossAxisExtent: 180, + crossAxisSpacing: 5, + mainAxisSpacing: 5, + children: data + .map((e) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: e, + child: Text( + colorString(e), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 5, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/Sliver/SliverPersistentHeader.dart b/lib/views/widgets/Sliver/SliverPersistentHeader.dart new file mode 100644 index 0000000..cec3816 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverPersistentHeader.dart @@ -0,0 +1,165 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 190, +// "name": 'SliverPersistentHeader基本使用', +// "priority": 1, +// "subtitle": +// "【delegate】 : 代理 【SliverPersistentHeaderDelegate】\n" +// "【floating】 : 是否浮动 【bool】\n" +// "【pinned】 : 是否顶部停留 【bool】", +// } +class SliverPersistentHeaderDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 500, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildPersistentHeader('袅缈岁月，青丝银发',Color(0xffe7fcc9)), + _buildCommonWidget(), + _buildPersistentHeader('以梦为马，不负韶华',Color(0xffcca4ff)), + _buildSliverList() + ], + ), + ); + } + + Widget _buildCommonWidget() => SliverToBoxAdapter( + child: Container( + padding: EdgeInsets.symmetric(horizontal: 10), + color: Colors.grey.withAlpha(22), + child: ListTile( + leading: Image.asset("assets/images/icon_head.png"), + title: Text("以梦为马"), + subtitle: Text("海子"), + selected: true, + contentPadding: EdgeInsets.all(5), + trailing: Icon(Icons.more_vert), + ), + ), + ); + Widget _buildPersistentHeader(String text,Color color) => SliverPersistentHeader( + pinned: true, + delegate: _SliverDelegate( + minHeight: 40.0, + maxHeight: 100.0, + child: Container( + color: color, + child: Center( + child: Text(text, style: TextStyle( + fontSize: 18, + shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]), + ), + )), + )); + + Widget _buildSliverList() => SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 2, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} + + +class _SliverDelegate extends SliverPersistentHeaderDelegate { + _SliverDelegate({ + @required this.minHeight, + @required this.maxHeight, + @required this.child, + }); + + final double minHeight; //最小高度 + final double maxHeight; //最大高度 + final Widget child; //孩子 + + @override + double get minExtent => minHeight; + + @override + double get maxExtent => max(maxHeight, minHeight); + + @override + Widget build( + BuildContext context, double shrinkOffset, bool overlapsContent) { + return new SizedBox.expand(child: child); + } + + @override //是否需要重建 + bool shouldRebuild(_SliverDelegate oldDelegate) { + return maxHeight != oldDelegate.maxHeight || + minHeight != oldDelegate.minHeight || + child != oldDelegate.child; + } +} \ No newline at end of file diff --git a/lib/views/widgets/Sliver/SliverToBoxAdapter.dart b/lib/views/widgets/Sliver/SliverToBoxAdapter.dart new file mode 100644 index 0000000..3eaa525 --- /dev/null +++ b/lib/views/widgets/Sliver/SliverToBoxAdapter.dart @@ -0,0 +1,113 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 189, +// "name": 'SliverToBoxAdapter基本使用', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】", +// } +class SliverToBoxAdapterDemo extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 300, + child: CustomScrollView( + slivers: [ + _buildSliverAppBar(), + _buildCommonWidget(), + _buildSliverList() + ], + ), + ); + } + + Widget _buildCommonWidget() => SliverToBoxAdapter( + child: Container( + padding: EdgeInsets.symmetric(horizontal: 10), + color: Colors.grey.withAlpha(22), + child: ListTile( + leading: Image.asset("assets/images/icon_head.png"), + title: Text("以梦为马"), + subtitle: Text("海子"), + selected: true, + contentPadding: EdgeInsets.all(5), + trailing: Icon(Icons.more_vert), + ), + ), + ); + + Widget _buildSliverList() => SliverList( + delegate: SliverChildBuilderDelegate( + (_, int index) => Container( + alignment: Alignment.center, + width: 100, + height: 60, + color: data[index], + child: Text( + colorString(data[index]), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + ), + childCount: data.length), + ); + + Widget _buildSliverAppBar() { + return SliverAppBar( + expandedHeight: 190.0, + leading: _buildLeading(), + title: Text('张风捷特烈'), + actions: _buildActions(), + elevation: 2, + pinned: true, + backgroundColor: Colors.orange, + flexibleSpace: FlexibleSpaceBar( + //伸展处布局 + titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距 + collapseMode: CollapseMode.parallax, //视差效果 + background: Image.asset( + "assets/images/caver.jpeg", + fit: BoxFit.cover, + ), + ), + ); + } + + Widget _buildLeading() => Container( + margin: EdgeInsets.all(10), + child: Image.asset('assets/images/icon_head.png')); + + List _buildActions() => [ + IconButton( + onPressed: () {}, + icon: Icon( + Icons.star_border, + color: Colors.white, + ), + ) + ]; + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} diff --git a/lib/views/widgets/StatefulWidget/AnimatedSwitcher.dart b/lib/views/widgets/StatefulWidget/AnimatedSwitcher.dart index 0dc054e..f3d87c5 100644 --- a/lib/views/widgets/StatefulWidget/AnimatedSwitcher.dart +++ b/lib/views/widgets/StatefulWidget/AnimatedSwitcher.dart @@ -28,26 +28,62 @@ class _CustomAnimatedSwitcherState extends State { @override Widget build(BuildContext context) { return Container( - child: Column( + child: Wrap( + crossAxisAlignment: WrapCrossAlignment.center, children: [ - AnimatedSwitcher( - duration: const Duration(milliseconds: 500), - transitionBuilder: (Widget child, Animation animation) => - ScaleTransition( - child: RotationTransition(turns: animation, child: child), - scale: animation), - child: Text( - '$_count', - key: ValueKey(_count), - style: Theme.of(context).textTheme.display3, - ), - ), - RaisedButton( - child: const Text('Increment'), - onPressed: () => setState(() => _count += 1), - ), + _buildMinusBtn(), + SizedBox(width:80,child: _buildAnimatedSwitcher(context)), + _buildAddBtn() ], ), ); } + + Widget _buildAnimatedSwitcher(BuildContext context) => + AnimatedSwitcher( + duration: const Duration(milliseconds: 400), + transitionBuilder: (Widget child, Animation animation) => + ScaleTransition( + child: RotationTransition(turns: animation, child: child), + scale: animation), + child: Text( + '$_count', + key: ValueKey(_count), + style: Theme.of(context).textTheme.display3, + ), + ); + + Widget _buildMinusBtn() { + return MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.red, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.remove, + color: Colors.white, + ), + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: () => setState(() => _count -= 1)); + } + + Widget _buildAddBtn() => MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.blue, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.add, + color: Colors.white, + ), + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: () => setState(() => _count += 1)); } diff --git a/lib/views/widgets/StatefulWidget/AnimatedWidget/ScaleTransition.dart b/lib/views/widgets/StatefulWidget/AnimatedWidget/ScaleTransition.dart index aacf0de..ecc02f0 100644 --- a/lib/views/widgets/StatefulWidget/AnimatedWidget/ScaleTransition.dart +++ b/lib/views/widgets/StatefulWidget/AnimatedWidget/ScaleTransition.dart @@ -19,10 +19,7 @@ class _CustomScaleTransitionState extends State @override void initState() { - _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2)) - ..addListener(() { - print(_ctrl.value); - }); + _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2)); _ctrl.forward(); super.initState(); } diff --git a/lib/views/widgets/StatefulWidget/AnimatedWidget/SizeTransition.dart b/lib/views/widgets/StatefulWidget/AnimatedWidget/SizeTransition.dart index 46dcf60..535d0d5 100644 --- a/lib/views/widgets/StatefulWidget/AnimatedWidget/SizeTransition.dart +++ b/lib/views/widgets/StatefulWidget/AnimatedWidget/SizeTransition.dart @@ -21,10 +21,7 @@ class _CustomSizeTransitionState extends State @override void initState() { - _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1)) - ..addListener(() { - print(_ctrl.value); - }); + _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1)); _ctrl.forward(); super.initState(); } diff --git a/lib/views/widgets/StatefulWidget/nav/AppBar.dart b/lib/views/widgets/StatefulWidget/AppBar.dart similarity index 99% rename from lib/views/widgets/StatefulWidget/nav/AppBar.dart rename to lib/views/widgets/StatefulWidget/AppBar.dart index 0ef1777..5742ed3 100755 --- a/lib/views/widgets/StatefulWidget/nav/AppBar.dart +++ b/lib/views/widgets/StatefulWidget/AppBar.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import '../PopupMenuButton.dart'; +import 'PopupMenuButton.dart'; // { // "widgetId": 57, diff --git a/lib/views/widgets/StatefulWidget/nav/BottomAppBar.dart b/lib/views/widgets/StatefulWidget/BottomAppBar.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/nav/BottomAppBar.dart rename to lib/views/widgets/StatefulWidget/BottomAppBar.dart diff --git a/lib/views/widgets/StatefulWidget/nav/BottomNavigationBar.dart b/lib/views/widgets/StatefulWidget/BottomNavigationBar.dart similarity index 98% rename from lib/views/widgets/StatefulWidget/nav/BottomNavigationBar.dart rename to lib/views/widgets/StatefulWidget/BottomNavigationBar.dart index 9672f10..cd84852 100755 --- a/lib/views/widgets/StatefulWidget/nav/BottomNavigationBar.dart +++ b/lib/views/widgets/StatefulWidget/BottomNavigationBar.dart @@ -180,7 +180,6 @@ class _BottomNavigationBarWithPageViewState elevation: 1, type: BottomNavigationBarType.shifting, fixedColor: Colors.white, - backgroundColor: Colors.white, iconSize: 25, selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold), showUnselectedLabels: false, @@ -190,7 +189,7 @@ class _BottomNavigationBarWithPageViewState title: Text( key, ), - icon: Icon(Cons.ICONS_MAP[key]), + icon: Icon(iconsMap[key]), backgroundColor: _colors[_position])) .toList(), ); diff --git a/lib/views/widgets/StatefulWidget/indicator/CircularProgressIndicator.dart b/lib/views/widgets/StatefulWidget/CircularProgressIndicator.dart similarity index 91% rename from lib/views/widgets/StatefulWidget/indicator/CircularProgressIndicator.dart rename to lib/views/widgets/StatefulWidget/CircularProgressIndicator.dart index 2ec316b..8d41385 100644 --- a/lib/views/widgets/StatefulWidget/indicator/CircularProgressIndicator.dart +++ b/lib/views/widgets/StatefulWidget/CircularProgressIndicator.dart @@ -7,8 +7,7 @@ import 'package:flutter/material.dart'; // "【value】 : 进度 【double】\n" // "【backgroundColor】 : 背景色 【Color】\n" // "【valueColor】 : 进度颜色 【Animation】\n" -// "【strokeWidth】 : 线宽 【double】\n" -// " value为null时会不停旋转", +// "【strokeWidth】 : 线宽 【double】", // } class CustomCircularProgressIndicator extends StatefulWidget { @override diff --git a/lib/views/widgets/StatefulWidget/indicator/CupertinoActivityIndicator.dart b/lib/views/widgets/StatefulWidget/CupertinoActivityIndicator.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/indicator/CupertinoActivityIndicator.dart rename to lib/views/widgets/StatefulWidget/CupertinoActivityIndicator.dart diff --git a/lib/views/widgets/StatefulWidget/nav/CupertinoApp.dart b/lib/views/widgets/StatefulWidget/CupertinoApp.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/nav/CupertinoApp.dart rename to lib/views/widgets/StatefulWidget/CupertinoApp.dart diff --git a/lib/views/widgets/StatefulWidget/nav/CupertinoNavigationBar.dart b/lib/views/widgets/StatefulWidget/CupertinoNavigationBar.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/nav/CupertinoNavigationBar.dart rename to lib/views/widgets/StatefulWidget/CupertinoNavigationBar.dart diff --git a/lib/views/widgets/StatefulWidget/nav/CupertinoPageScaffold.dart b/lib/views/widgets/StatefulWidget/CupertinoPageScaffold.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/nav/CupertinoPageScaffold.dart rename to lib/views/widgets/StatefulWidget/CupertinoPageScaffold.dart diff --git a/lib/views/widgets/StatefulWidget/CupertinoScrollbar.dart b/lib/views/widgets/StatefulWidget/CupertinoScrollbar.dart new file mode 100644 index 0000000..bc89eed --- /dev/null +++ b/lib/views/widgets/StatefulWidget/CupertinoScrollbar.dart @@ -0,0 +1,60 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 195, +// "name": 'CupertinoScrollbar基本使用', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【controller】 : 控制器 【ScrollController】", +// } +class CustomCupertinoScrollbar extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: CupertinoScrollbar( + child: ListView( + padding: EdgeInsets.symmetric(horizontal: 5), + children: data + .map((color) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: color, + child: Text( + colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ), + ), + ); + } + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} \ No newline at end of file diff --git a/lib/views/widgets/StatefulWidget/CupertinoSlider.dart b/lib/views/widgets/StatefulWidget/CupertinoSlider.dart index 7987380..44f2a83 100644 --- a/lib/views/widgets/StatefulWidget/CupertinoSlider.dart +++ b/lib/views/widgets/StatefulWidget/CupertinoSlider.dart @@ -36,7 +36,7 @@ class _CustomCupertinoSliderState extends State { min: 0.0, max: 360.0, activeColor: Colors.green, - thumbColor: Colors.orange, + thumbColor: Colors.white, onChangeStart: (value) { print('开始滑动:$value'); }, diff --git a/lib/views/widgets/StatefulWidget/nav/CupertinoTabBar.dart b/lib/views/widgets/StatefulWidget/CupertinoTabBar.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/nav/CupertinoTabBar.dart rename to lib/views/widgets/StatefulWidget/CupertinoTabBar.dart diff --git a/lib/views/widgets/StatefulWidget/nav/CupertinoTabScaffold.dart b/lib/views/widgets/StatefulWidget/CupertinoTabScaffold.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/nav/CupertinoTabScaffold.dart rename to lib/views/widgets/StatefulWidget/CupertinoTabScaffold.dart diff --git a/lib/views/widgets/StatefulWidget/DataTable.dart b/lib/views/widgets/StatefulWidget/DataTable.dart index 929eecb..d263cff 100644 --- a/lib/views/widgets/StatefulWidget/DataTable.dart +++ b/lib/views/widgets/StatefulWidget/DataTable.dart @@ -3,7 +3,14 @@ import 'package:flutter/material.dart'; /// create by 张风捷特烈 on 2020-03-21 /// contact me by email 1981462002@qq.com /// 说明: - +// { +// "widgetId": 102, +// "name": 'DataTable基本使用', +// "priority": 1, +// "subtitle": +// "【columns】 : 列 【List】\n" +// "【rows】 : 行 【List】", +// } class CustomDataTable extends StatelessWidget { @override Widget build(BuildContext context) { @@ -34,11 +41,21 @@ class CustomDataTable extends StatelessWidget { ]); } } - +// { +// "widgetId": 102, +// "name": 'DataTable的sort', +// "priority": 1, +// "subtitle": +// "【sortColumnIndex】 : 列号 【int】\n" +// "【sortAscending】 : 是否顺序 【bool】", +// } class SortDataTable extends StatelessWidget { @override Widget build(BuildContext context) { - return DataTable(sortColumnIndex: 0, sortAscending: true, columns: [ + return DataTable( + sortColumnIndex: 0, + sortAscending: true, + columns: [ DataColumn( label: Text('id'), numeric: false, diff --git a/lib/views/widgets/StatefulWidget/DropdownButton.dart b/lib/views/widgets/StatefulWidget/DropdownButton.dart index a888627..f15c054 100644 --- a/lib/views/widgets/StatefulWidget/DropdownButton.dart +++ b/lib/views/widgets/StatefulWidget/DropdownButton.dart @@ -76,7 +76,7 @@ class StyleDropDownButton extends StatefulWidget { } class _StyleDropDownButtonState extends State { - Color _color; + Color _color = Colors.red ; final _colors = [Colors.red, Colors.yellow, Colors.blue, Colors.green]; final _info = ["红色", "黄色", "蓝色", "绿色"]; diff --git a/lib/views/widgets/StatefulWidget/ExpansionTile.dart b/lib/views/widgets/StatefulWidget/ExpansionTile.dart index 32e67ef..5cf17c9 100644 --- a/lib/views/widgets/StatefulWidget/ExpansionTile.dart +++ b/lib/views/widgets/StatefulWidget/ExpansionTile.dart @@ -1,5 +1,5 @@ import 'package:flutter/material.dart'; -import 'package:flutter_unit/views/widgets/StatelessWidget/tile/RadioListTile.dart'; +import 'package:flutter_unit/views/widgets/StatelessWidget/RadioListTile.dart'; // { // "widgetId": 52, // "name": 'ExpansionTile基本使用', diff --git a/lib/views/widgets/StatefulWidget/Form.dart b/lib/views/widgets/StatefulWidget/Form.dart new file mode 100644 index 0000000..4a1cfbc --- /dev/null +++ b/lib/views/widgets/StatefulWidget/Form.dart @@ -0,0 +1,111 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 198, +// "name": 'Form基本使用', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【onChanged】 : 表单变化回调 【VoidCallback】\n" +// "【onWillPop】 : 返回回调 【WillPopCallback】", +// } +class CustomForm extends StatefulWidget { + @override + _CustomFormState createState() => _CustomFormState(); +} + +class _CustomFormState extends State { + GlobalKey _formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Container( + child: Form( + onWillPop: () => _willPop(context), + key: _formKey, + onChanged: () { + print('Form---onChanged'); + }, + child: + Stack( + alignment: Alignment.centerRight, + children: [ + Container( + width: 350, + child: UnconstrainedBox( + child: Container( + width: 200, + height: 70, + child: TextFormField( + style: TextStyle(textBaseline: TextBaseline.alphabetic), + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'username', + ), + validator: _validateUsername, + ), + ), + ), + ), + Positioned( + top: 0, right: 0, child: _buildSubmitButton(context)), + ], + ), + ), + ); + } + + String _validateUsername(value) { + if (value.isEmpty) { + return '用户名不能为空'; + } + return null; + } + + RaisedButton _buildSubmitButton(BuildContext context) { + return RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: _onSubmit, + child: Icon( + Icons.check, + color: Colors.white, + ), + ); + } + + _onSubmit(){ + if (_formKey.currentState.validate()) { + FocusScope.of(context).requestFocus(FocusNode()); + Navigator.of(context).pop(); + } + } + + Future _willPop(context) async { + return await showDialog( + context: context, + builder: (context) => AlertDialog( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(10))), + title: Text('提示'), + content: Text('你确定要离开此页吗?'), + actions: [ + FlatButton( + onPressed: () => Navigator.of(context).pop(true), + child: Text('确定'), + ), + FlatButton( + onPressed: () => Navigator.of(context).pop(false), + child: Text('取消'), + ), + ], + ), + ) ?? + false; + } +} diff --git a/lib/views/widgets/StatefulWidget/ImplicitlyAnimatedWidget/AnimatedAlign.dart b/lib/views/widgets/StatefulWidget/ImplicitlyAnimatedWidget/AnimatedAlign.dart index 86cbc91..e448143 100644 --- a/lib/views/widgets/StatefulWidget/ImplicitlyAnimatedWidget/AnimatedAlign.dart +++ b/lib/views/widgets/StatefulWidget/ImplicitlyAnimatedWidget/AnimatedAlign.dart @@ -11,6 +11,7 @@ import 'package:flutter/material.dart'; // "【child】 : 孩子组件 【Widget】\n" // "【duration】 : 动画时长 【Duration】\n" // "【onEnd】 : 动画结束回调 【Function()】\n" +// "【alignment】 : 对齐方式 【AlignmentGeometry】\n" // "【curve】 : 动画曲线 【Duration】\n" // "【padding】 : 内边距 【EdgeInsetsGeometry】", // } diff --git a/lib/views/widgets/StatefulWidget/indicator/LinearProgressIndicator.dart b/lib/views/widgets/StatefulWidget/LinearProgressIndicator.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/indicator/LinearProgressIndicator.dart rename to lib/views/widgets/StatefulWidget/LinearProgressIndicator.dart diff --git a/lib/views/widgets/StatefulWidget/ListWheelScrollView.dart b/lib/views/widgets/StatefulWidget/ListWheelScrollView.dart index c690a63..3e4e274 100644 --- a/lib/views/widgets/StatefulWidget/ListWheelScrollView.dart +++ b/lib/views/widgets/StatefulWidget/ListWheelScrollView.dart @@ -13,7 +13,12 @@ import 'package:flutter/material.dart'; // "【itemExtent】 : item高 【EdgeInsets】\n" // "【onSelectedItemChanged】 : 选中回调 【ValueChanged 】", // } -class CustomListWheelScrollView extends StatelessWidget { +class CustomListWheelScrollView extends StatefulWidget { + @override + _CustomListWheelScrollViewState createState() => _CustomListWheelScrollViewState(); +} + +class _CustomListWheelScrollViewState extends State { var data = [ Colors.orange[50], Colors.orange[100], @@ -27,23 +32,40 @@ class CustomListWheelScrollView extends StatelessWidget { Colors.orange[900], ]; + Color _color = Colors.blue; @override Widget build(BuildContext context) { - return Container( - height: 150, - width: 300, - child: ListWheelScrollView( - perspective: 0.006, - itemExtent: 50, - onSelectedItemChanged: (index){ - print('onSelectedItemChanged:$index'); - }, - children: data.map((color) => _buildItem(color)).toList(), - ), + return Column( + children: [ + _buildCircle(), + Container( + height: 150, + width: 300, + child: ListWheelScrollView( + perspective: 0.006, + itemExtent: 50, + onSelectedItemChanged: (index){ + print('onSelectedItemChanged:$index'); + setState(() => _color=data[index]); + }, + children: data.map((color) => _buildItem(color)).toList(), + ), + ), + ], ); } + Widget _buildCircle() => Container( + margin: EdgeInsets.only(bottom: 5), + width: 30, + height: 30, + decoration: BoxDecoration( + color: _color, + shape: BoxShape.circle + ), + ); + Widget _buildItem(Color color) { return Container( key: ValueKey(color) , diff --git a/lib/views/widgets/StatefulWidget/Material.dart b/lib/views/widgets/StatefulWidget/Material.dart index db6d25b..6c38775 100644 --- a/lib/views/widgets/StatefulWidget/Material.dart +++ b/lib/views/widgets/StatefulWidget/Material.dart @@ -45,8 +45,7 @@ class CustomMaterial extends StatelessWidget { // "name": 'Material的shape属性', // "priority": 2, // "subtitle": -// "【shape】 : 形状 【ShapeBorder】\n" -// "【type】 : 类型 【MaterialType】", +// "【shape】 : 形状 【ShapeBorder】\n", // } class ShapeMaterial extends StatelessWidget { diff --git a/lib/views/widgets/StatefulWidget/nav/MaterialApp.dart b/lib/views/widgets/StatefulWidget/MaterialApp.dart similarity index 93% rename from lib/views/widgets/StatefulWidget/nav/MaterialApp.dart rename to lib/views/widgets/StatefulWidget/MaterialApp.dart index f07ad04..ab65e11 100644 --- a/lib/views/widgets/StatefulWidget/nav/MaterialApp.dart +++ b/lib/views/widgets/StatefulWidget/MaterialApp.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_unit/app/router.dart'; import 'package:flutter_unit/views/pages/unit_navigation.dart'; -import 'package:flutter_unit/views/widgets/StatefulWidget/nav/Scaffold.dart'; +import 'package:flutter_unit/views/widgets/StatefulWidget/Scaffold.dart'; /// create by 张风捷特烈 on 2020-03-17 /// contact me by email 1981462002@qq.com diff --git a/lib/views/widgets/StatefulWidget/Overlay.dart b/lib/views/widgets/StatefulWidget/Overlay.dart new file mode 100644 index 0000000..5de2b41 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/Overlay.dart @@ -0,0 +1,105 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-30 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 182, +// "name": 'Overlay基本使用', +// "priority": 1, +// "subtitle": +// " Overlay.of(context).insert插入全局组件", +// } + + +bool show = false; +Offset offset = Offset(200, 200); + +final double radius = 60; +var entry = OverlayEntry( + builder: (context) => Stack( + children: [ + Positioned( + left: offset.dx, + top: offset.dy, + child: _buildFloating(), + ), + ], + )); + +///绘制悬浮控件 +_buildFloating() => GestureDetector( + onPanDown: (details) { + offset = details.globalPosition - Offset(radius / 2, radius / 2); + entry.markNeedsBuild(); + }, + onPanUpdate: (DragUpdateDetails details) { + offset = offset + details.delta; + entry.markNeedsBuild(); + }, + onLongPress: hideFloating, + child: Material( + color: Colors.transparent, + child: Container( + height: radius, + width: radius, + alignment: Alignment.center, + decoration: BoxDecoration( + shape: BoxShape.circle, + image: DecorationImage( + image: AssetImage('assets/images/icon_head.png')), + ), + ), + )); + +showFloating(BuildContext context) { + if (!show) { + Overlay.of(context).insert(entry); + show = true; + } +} + +hideFloating() { + if (show) { + entry.remove(); + show = false; + } +} + +class CustomOverlay extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Wrap( + children: [ + Container( + height: 50, + child: RawMaterialButton( + elevation: 2, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + fillColor: Colors.blue, + splashColor: Colors.orange, + textStyle: TextStyle(color: Colors.white), + child: Icon(Icons.add), + onPressed: ()=>showFloating(context), + ), + ), + Container( + height: 50, + child: RawMaterialButton( + elevation: 2, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + fillColor: Colors.red, + splashColor: Colors.orange, + textStyle: TextStyle(color: Colors.white), + child: Icon(Icons.remove), + onPressed: hideFloating, + ), + ), + ], + ); + } +} diff --git a/lib/views/widgets/StatefulWidget/PopupMenuButton.dart b/lib/views/widgets/StatefulWidget/PopupMenuButton.dart index ceb7153..2680a34 100644 --- a/lib/views/widgets/StatefulWidget/PopupMenuButton.dart +++ b/lib/views/widgets/StatefulWidget/PopupMenuButton.dart @@ -15,7 +15,6 @@ import 'package:flutter_unit/views/dialogs/dialog_about.dart'; // "【color】 : 背景颜色 【Color】\n" // "【shape】 : 形状 【ShapeBorder】\n" // "【elevation】 : 影深 【double】\n" -// "【showCursor】 : 是否显示光标 【bool】\n" // "【onCanceled】 : 取消事件 【Function()】\n" // "【onSelected】 : 选择事件 【Function(T)】", // } diff --git a/lib/views/widgets/StatefulWidget/PopupMenuDivider.dart b/lib/views/widgets/StatefulWidget/PopupMenuDivider.dart index aa07e4d..44e9859 100644 --- a/lib/views/widgets/StatefulWidget/PopupMenuDivider.dart +++ b/lib/views/widgets/StatefulWidget/PopupMenuDivider.dart @@ -9,7 +9,6 @@ import 'package:flutter_unit/views/dialogs/dialog_about.dart'; // "name": 'PopupMenuDivider基本使用', // "priority": 1, // "subtitle": -// "【child】 : 子组件 【Widget】\n" // "【height】 : 高度 【double】", // } class CustomPopupMenuDivider extends StatelessWidget { diff --git a/lib/views/widgets/StatefulWidget/indicator/RefreshIndicator.dart b/lib/views/widgets/StatefulWidget/RefreshIndicator.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/indicator/RefreshIndicator.dart rename to lib/views/widgets/StatefulWidget/RefreshIndicator.dart diff --git a/lib/views/widgets/StatefulWidget/nav/Scaffold.dart b/lib/views/widgets/StatefulWidget/Scaffold.dart similarity index 100% rename from lib/views/widgets/StatefulWidget/nav/Scaffold.dart rename to lib/views/widgets/StatefulWidget/Scaffold.dart diff --git a/lib/views/widgets/StatefulWidget/Scrollbar.dart b/lib/views/widgets/StatefulWidget/Scrollbar.dart new file mode 100644 index 0000000..af04fac --- /dev/null +++ b/lib/views/widgets/StatefulWidget/Scrollbar.dart @@ -0,0 +1,59 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 194, +// "name": 'Scrollbar基本使用', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【controller】 : 控制器 【ScrollController】", +// } +class CustomScrollbar extends StatelessWidget { + final data = [ + Colors.purple[50], + Colors.purple[100], + Colors.purple[200], + Colors.purple[300], + Colors.purple[400], + Colors.purple[500], + Colors.purple[600], + Colors.purple[700], + Colors.purple[800], + Colors.purple[900], + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: Scrollbar( + child: ListView( + padding: EdgeInsets.symmetric(horizontal: 5), + children: data + .map((color) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: color, + child: Text( + colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ), + ), + ); + } + + String colorString(Color color) => + "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}"; +} \ No newline at end of file diff --git a/lib/views/widgets/StatefulWidget/Stepper.dart b/lib/views/widgets/StatefulWidget/Stepper.dart new file mode 100644 index 0000000..2b06d00 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/Stepper.dart @@ -0,0 +1,213 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-04-01 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 200, +// "name": 'Stepper基本使用', +// "priority": 1, +// "subtitle": +// "【steps】 : 步骤列表 【List】\n" +// "【currentStep】 : 当前步骤 【double】\n" +// "【onStepTapped】 : 点击回调 【ValueChanged】\n" +// "【onStepCancel】 : 上一步回调 【VoidCallback】\n" +// "【controlsBuilder】 : 控制器构造 【ControlsWidgetBuilder】", +// } +class StepperDemo extends StatefulWidget { + @override + _StepperDemoState createState() => _StepperDemoState(); +} + +class _StepperDemoState extends State { + int _position = 0; + + final stepsData = { + "填写表单":'请按表单填写个人信息。', + "邮箱校验":'已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。', + "注册完成":'恭喜您，注册完成！', + }; + + final steps = [ + Step( + title: Text("填写表单"), + content: Container(height: 60, child: Text("请按表单填写个人信息")), + ), + Step(title: Text("邮箱校验"), content: Text("请对您的账号进行邮箱校验")), + Step(title: Text("注册完成"), content: Text("恭喜您，注册完成")), + ]; + + @override + Widget build(BuildContext context) { + return Container( + height: 200, + child: Stepper( + type:StepperType.horizontal, + currentStep: _position, + onStepTapped: (index) { + setState(() { + _position = index; + }); + }, + onStepContinue: () { + setState(() { + if (_position < 2) { + _position++; + } + }); + }, + onStepCancel: () { + if (_position > 0) { + setState(() { + _position--; + }); + } + }, + controlsBuilder: (_, + {VoidCallback onStepContinue, VoidCallback onStepCancel}) { + return Row( + children: [ + RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepContinue, + child: Icon( + Icons.check, + color: Colors.white, + ), + ), + RaisedButton( + color: Colors.red, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepCancel, + child: Icon( + Icons.keyboard_backspace, + color: Colors.white, + ), + ), + ], + ); + }, + steps: stepsData.keys.map((e){ + bool isActive = stepsData.keys.toList().indexOf(e) ==_position; + return Step( + title: Text(e,style: TextStyle(color: isActive?Colors.blue:Colors.black),), + isActive: isActive, + state: _getState(stepsData.keys.toList().indexOf(e)), + content: Container(height: 60, child: Text(stepsData[e])), + ); + }).toList()), + ); + } + _getState(index){ + if(_position==index) return StepState.editing; + if(_position>index) return StepState.complete; + return StepState.indexed; + } +} + +// { +// "widgetId": 200, +// "name": 'Stepper的方向', +// "priority": 2, +// "subtitle": +// "【type】 : 方向 【StepperType】", +// } +class VerticalStepper extends StatefulWidget { + @override + _VerticalStepperState createState() => _VerticalStepperState(); +} + +class _VerticalStepperState extends State { + int _position = 0; + + final stepsData = { + "填写表单":'请按表单填写个人信息。', + "邮箱校验":'已将邮件发送至您的邮箱，请按照相关指示对您的账号进行邮箱校验。', + "注册完成":'恭喜您，注册完成！', + }; + + final steps = [ + Step( + title: Text("填写表单"), + content: Container(height: 60, child: Text("请按表单填写个人信息")), + ), + Step(title: Text("邮箱校验"), content: Text("请对您的账号进行邮箱校验")), + Step(title: Text("注册完成"), content: Text("恭喜您，注册完成")), + ]; + + @override + Widget build(BuildContext context) { + return Container( + child: Stepper( + type:StepperType.vertical, + currentStep: _position, + onStepTapped: (index) { + setState(() { + _position = index; + }); + }, + onStepContinue: () { + setState(() { + if (_position < 2) { + _position++; + } + }); + }, + onStepCancel: () { + if (_position > 0) { + setState(() { + _position--; + }); + } + }, + controlsBuilder: (_, + {VoidCallback onStepContinue, VoidCallback onStepCancel}) { + return Row( + children: [ + RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepContinue, + child: Icon( + Icons.check, + color: Colors.white, + ), + ), + RaisedButton( + color: Colors.red, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: onStepCancel, + child: Icon( + Icons.keyboard_backspace, + color: Colors.white, + ), + ), + ], + ); + }, + steps: stepsData.keys.map((e){ + bool isActive = stepsData.keys.toList().indexOf(e) ==_position; + return Step( + title: Text(e,style: TextStyle(color: isActive?Colors.blue:Colors.black),), + isActive: isActive, + state: _getState(stepsData.keys.toList().indexOf(e)), + content: Container(height: 60, child: Text(stepsData[e])), + ); + }).toList()), + ); + } + _getState(index){ + if(_position==index) return StepState.editing; + if(_position>index) return StepState.complete; + return StepState.indexed; + } +} diff --git a/lib/views/widgets/StatefulWidget/nav/TabBarView.dart b/lib/views/widgets/StatefulWidget/TabBarView.dart similarity index 98% rename from lib/views/widgets/StatefulWidget/nav/TabBarView.dart rename to lib/views/widgets/StatefulWidget/TabBarView.dart index 82d4c08..7e73db8 100644 --- a/lib/views/widgets/StatefulWidget/nav/TabBarView.dart +++ b/lib/views/widgets/StatefulWidget/TabBarView.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; // { -// "widgetId": 58, +// "widgetId": 59, // "name": 'TabBarView需要与TabBar联用', // "priority": 1, // "subtitle": diff --git a/lib/views/widgets/StatefulWidget/TextField.dart b/lib/views/widgets/StatefulWidget/TextField.dart index 7f8767c..c3747a0 100644 --- a/lib/views/widgets/StatefulWidget/TextField.dart +++ b/lib/views/widgets/StatefulWidget/TextField.dart @@ -3,7 +3,7 @@ import 'package:flutter/services.dart'; // { // "widgetId": 54, -// "name": 'TextField基本语法', +// "name": 'TextField基本用法', // "priority": 1, // "subtitle": // "【controller】 : 控制器 【TextEditingController】\n" diff --git a/lib/views/widgets/StatefulWidget/TextFormField.dart b/lib/views/widgets/StatefulWidget/TextFormField.dart new file mode 100644 index 0000000..97d1f02 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/TextFormField.dart @@ -0,0 +1,94 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-04-01 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 199, +// "name": 'TextFormField基本使用', +// "priority": 1, +// "subtitle": +// " 基本属性和TextField一致，详见之\n" +// "【validator】 : 验证函数 【FormFieldValidator 】\n" +// "【onFieldSubmitted】 : 提交回调 【ValueChanged】\n" +// "【onSaved】 : 表单save时回调 【FormFieldSetter】", +// } +class CustomTextFormField extends StatefulWidget { + @override + _CustomTextFormFieldState createState() => _CustomTextFormFieldState(); +} + +class _CustomTextFormFieldState extends State { + GlobalKey _formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Container( + child: Form( + key: _formKey, + child: + Stack( + alignment: Alignment.centerRight, + children: [ + Container( + width: 350, + child: UnconstrainedBox( + child: Container( + width: 200, + height: 70, + child: TextFormField( + style: TextStyle(textBaseline: TextBaseline.alphabetic), + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: 'username', + ), + validator: _validateUsername, + onFieldSubmitted: _onFieldSubmitted, + onSaved: _onSaved, + ), + ), + ), + ), + Positioned( + top: 0, right: 0, child: _buildSubmitButton(context)), + ], + ), + ), + ); + } + + String _validateUsername(value) { + if (value.isEmpty) { + return '用户名不能为空'; + } + return null; + } + _onSaved(value){ + print('onSaved:'+value); + } + + void _onFieldSubmitted(value) { + print('onFieldSubmitted:'+value); + } + + RaisedButton _buildSubmitButton(BuildContext context) { + return RaisedButton( + color: Colors.blue, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: _onSubmit, + child: Icon( + Icons.check, + color: Colors.white, + ), + ); + } + + _onSubmit(){ + _formKey.currentState.save(); + if (_formKey.currentState.validate()) { + FocusScope.of(context).requestFocus(FocusNode()); + } + } +} \ No newline at end of file diff --git a/lib/views/widgets/StatefulWidget/stateful_unit.dart b/lib/views/widgets/StatefulWidget/stateful_unit.dart index b2e8a38..d1fba0e 100644 --- a/lib/views/widgets/StatefulWidget/stateful_unit.dart +++ b/lib/views/widgets/StatefulWidget/stateful_unit.dart @@ -1,15 +1,15 @@ library stateful_unit; -export 'nav/AppBar.dart'; -export 'nav/BottomAppBar.dart'; -export 'nav/BottomNavigationBar.dart'; +export 'AppBar.dart'; +export 'BottomAppBar.dart'; +export 'BottomNavigationBar.dart'; export 'Checkbox.dart'; export 'ExpandIcon.dart'; export 'ExpansionTile.dart'; export 'Radio.dart'; export 'Tooltip.dart'; -export 'indicator/CircularProgressIndicator.dart'; -export 'indicator/CupertinoActivityIndicator.dart'; +export 'CircularProgressIndicator.dart'; +export 'CupertinoActivityIndicator.dart'; export 'CupertinoSlider.dart'; export 'CupertinoSwitch.dart'; export 'Image.dart'; @@ -17,8 +17,58 @@ export 'RangerSlider.dart'; export 'Slider.dart'; export 'Switch.dart'; export 'TextField.dart'; -export 'indicator/RefreshIndicator.dart'; +export 'RefreshIndicator.dart'; export 'SelectableText.dart'; -export 'nav/CupertinoNavigationBar.dart'; -export 'nav/CupertinoTabBar.dart'; -export 'DropdownButton.dart'; \ No newline at end of file +export 'CupertinoNavigationBar.dart'; +export 'CupertinoTabBar.dart'; +export 'DropdownButton.dart'; + +export 'AnimatedCrossFade.dart'; +export 'AnimatedList.dart'; +export 'AnimatedSwitcher.dart'; +export 'AnimatedWidget/AlignTransition.dart'; +export 'AnimatedWidget/DecoratedBoxTransition.dart'; +export 'AnimatedWidget/DefaultTextStyleTransition.dart'; +export 'AnimatedWidget/RelativePositionedTransition.dart'; +export 'CupertinoScrollbar.dart'; +export 'DataTable.dart'; +export 'Dismissible.dart'; +export 'DragTarget.dart'; +export 'Draggable.dart'; +export 'ExpansionPanelList.dart'; +export 'Form.dart'; +export 'FutureBuilder.dart'; +export 'Hero.dart'; +export 'ImplicitlyAnimatedWidget/AnimatedAlign.dart'; +export 'ImplicitlyAnimatedWidget/AnimatedContainer.dart'; +export 'ImplicitlyAnimatedWidget/AnimatedDefaultTextStyle.dart'; +export 'ImplicitlyAnimatedWidget/AnimatedOpacity.dart'; +export 'ImplicitlyAnimatedWidget/AnimatedPadding.dart'; +export 'ImplicitlyAnimatedWidget/AnimatedPositioned.dart'; +export 'ImplicitlyAnimatedWidget/AnimatedPositionedDirectional.dart'; +export 'Ink.dart'; +export 'InkResponse.dart'; +export 'InkWell.dart'; +export 'LicensePage.dart'; +export 'ListWheelScrollView.dart'; +export 'LongPressDraggable.dart'; +export 'Material.dart'; +export 'Overlay.dart'; +export 'PageView.dart'; +export 'PopupMenuButton.dart'; +export 'PopupMenuDivider.dart'; +export 'RawChip.dart'; +export 'RawMaterialButton.dart'; +export 'ReorderableListView.dart'; +export 'Scrollbar.dart'; +export 'Stepper.dart'; +export 'StreamBuilder.dart'; +export 'TableRowInkWell.dart'; +export 'TextFormField.dart'; +export 'LinearProgressIndicator.dart'; +export 'CupertinoApp.dart'; +export 'CupertinoPageScaffold.dart'; +export 'CupertinoTabScaffold.dart'; +export 'MaterialApp.dart'; +export 'Scaffold.dart'; +export 'TabBarView.dart'; \ No newline at end of file diff --git a/lib/views/widgets/StatelessWidget/dialog/AboutDialog.dart b/lib/views/widgets/StatelessWidget/AboutDialog.dart similarity index 98% rename from lib/views/widgets/StatelessWidget/dialog/AboutDialog.dart rename to lib/views/widgets/StatelessWidget/AboutDialog.dart index 33863a7..4b919ae 100644 --- a/lib/views/widgets/StatelessWidget/dialog/AboutDialog.dart +++ b/lib/views/widgets/StatelessWidget/AboutDialog.dart @@ -8,7 +8,7 @@ import 'package:flutter_unit/views/unit_splash.dart'; /// // { // "widgetId": 130, -// "name": 'Dialog基本使用', +// "name": 'AboutDialog基本使用', // "priority": 1, // "subtitle": // "【applicationIcon】 : 左上图标 【Widget】\n" diff --git a/lib/views/widgets/StatelessWidget/AboutListTile.dart b/lib/views/widgets/StatelessWidget/AboutListTile.dart new file mode 100644 index 0000000..fde88cf --- /dev/null +++ b/lib/views/widgets/StatelessWidget/AboutListTile.dart @@ -0,0 +1,42 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020-03-31 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 193, +// "name": 'AboutListTile基本使用', +// "priority": 1, +// "subtitle": +// "【icon】 : 左图标 【Widget】\n" +// "【applicationIcon】 : 左上图标 【Widget】\n" +// "【applicationVersion】 : 版本号 【String】\n" +// "【applicationName】 : 应用名 【String】\n" +// "【applicationLegalese】 : 应用律术 【String】\n" +// "【aboutBoxChildren】 : 弹框内容组件 【List】", +// } +class AboutListTileDemo extends StatelessWidget { + @override + Widget build(BuildContext context) { + return AboutListTile( + icon: Icon(Icons.info), + applicationIcon: FlutterLogo(), + applicationName: 'Flutter Unit', + applicationVersion: 'v0.0.1', + applicationLegalese: 'Copyright© 2018-2020 张风捷特烈', + aboutBoxChildren: [ + Padding( + padding: const EdgeInsets.all(10.0), + child: Text( + ' FlutterUnit是【张风捷特烈】的开源项目，' + '收录Flutter的200+组件，并附加详细介绍以及操作交互，' + '希望帮助广大编程爱好者入门Flutter。' + '更多知识可以关注掘金账号、公众号【编程之王】。', + style: TextStyle(color: Color(0xff999999), fontSize: 16), + textAlign: TextAlign.justify, + ), + ), + ], + ); + } +} diff --git a/lib/views/widgets/StatelessWidget/chip/ActionChip.dart b/lib/views/widgets/StatelessWidget/ActionChip.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/chip/ActionChip.dart rename to lib/views/widgets/StatelessWidget/ActionChip.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/AlertDialog.dart b/lib/views/widgets/StatelessWidget/AlertDialog.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/AlertDialog.dart rename to lib/views/widgets/StatelessWidget/AlertDialog.dart diff --git a/lib/views/widgets/StatelessWidget/button/BackButton.dart b/lib/views/widgets/StatelessWidget/BackButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/BackButton.dart rename to lib/views/widgets/StatelessWidget/BackButton.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/BottomSheet.dart b/lib/views/widgets/StatelessWidget/BottomSheet.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/BottomSheet.dart rename to lib/views/widgets/StatelessWidget/BottomSheet.dart diff --git a/lib/views/widgets/StatelessWidget/button/ButtonBar.dart b/lib/views/widgets/StatelessWidget/ButtonBar.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/ButtonBar.dart rename to lib/views/widgets/StatelessWidget/ButtonBar.dart diff --git a/lib/views/widgets/StatelessWidget/tile/CheckboxListTile.dart b/lib/views/widgets/StatelessWidget/CheckboxListTile.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/tile/CheckboxListTile.dart rename to lib/views/widgets/StatelessWidget/CheckboxListTile.dart diff --git a/lib/views/widgets/StatelessWidget/chip/Chip.dart b/lib/views/widgets/StatelessWidget/Chip.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/chip/Chip.dart rename to lib/views/widgets/StatelessWidget/Chip.dart diff --git a/lib/views/widgets/StatelessWidget/chip/ChoiceChip.dart b/lib/views/widgets/StatelessWidget/ChoiceChip.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/chip/ChoiceChip.dart rename to lib/views/widgets/StatelessWidget/ChoiceChip.dart diff --git a/lib/views/widgets/StatelessWidget/button/CloseButton.dart b/lib/views/widgets/StatelessWidget/CloseButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/CloseButton.dart rename to lib/views/widgets/StatelessWidget/CloseButton.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoActionSheet.dart b/lib/views/widgets/StatelessWidget/CupertinoActionSheet.dart similarity index 66% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoActionSheet.dart rename to lib/views/widgets/StatelessWidget/CupertinoActionSheet.dart index 2109a20..054be09 100644 --- a/lib/views/widgets/StatelessWidget/dialog/CupertinoActionSheet.dart +++ b/lib/views/widgets/StatelessWidget/CupertinoActionSheet.dart @@ -18,6 +18,7 @@ class CustomCupertinoActionSheet extends StatelessWidget { @override Widget build(BuildContext context) { return Column( + mainAxisSize: MainAxisSize.min, children: [ _buildRaisedButton(context), _buildCupertinoActionSheet(context), @@ -26,19 +27,22 @@ class CustomCupertinoActionSheet extends StatelessWidget { } Widget _buildCupertinoActionSheet(BuildContext context) => - CupertinoActionSheet( - title: Text("Please chose a language"), - message: Text('the language you use in this application.'), - cancelButton: CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text("Cancel")), - actions: [ - CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text('Dart')), - CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text('Java')), - CupertinoActionSheetAction( - onPressed: () => Navigator.pop(context), child: Text('Kotlin')), - ], + Container( + alignment: Alignment.bottomCenter, + child: CupertinoActionSheet( + title: Text("Please chose a language"), + message: Text('the language you use in this application.'), + cancelButton: CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text("Cancel")), + actions: [ + CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text('Dart')), + CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text('Java')), + CupertinoActionSheetAction( + onPressed: () => Navigator.pop(context), child: Text('Kotlin')), + ], + ), ); Widget _buildRaisedButton(BuildContext context) => RaisedButton( diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoActionSheetAction.dart b/lib/views/widgets/StatelessWidget/CupertinoActionSheetAction.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoActionSheetAction.dart rename to lib/views/widgets/StatelessWidget/CupertinoActionSheetAction.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoAlertDialog.dart b/lib/views/widgets/StatelessWidget/CupertinoAlertDialog.dart similarity index 97% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoAlertDialog.dart rename to lib/views/widgets/StatelessWidget/CupertinoAlertDialog.dart index 800daf8..6814b16 100644 --- a/lib/views/widgets/StatelessWidget/dialog/CupertinoAlertDialog.dart +++ b/lib/views/widgets/StatelessWidget/CupertinoAlertDialog.dart @@ -14,7 +14,7 @@ import 'package:flutter/material.dart'; // "【content】 : 内容组件 【Widget】\n" // "【actions】 : 顶部文字样式 【List】", // } -class CustomCupertinoDialog extends StatelessWidget { +class CustomCupertinoAlertDialog extends StatelessWidget { @override Widget build(BuildContext context) { return Column( diff --git a/lib/views/widgets/StatelessWidget/button/CupertinoButton.dart b/lib/views/widgets/StatelessWidget/CupertinoButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/CupertinoButton.dart rename to lib/views/widgets/StatelessWidget/CupertinoButton.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoContextMenu.dart b/lib/views/widgets/StatelessWidget/CupertinoContextMenu.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoContextMenu.dart rename to lib/views/widgets/StatelessWidget/CupertinoContextMenu.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoContextMenuAction.dart b/lib/views/widgets/StatelessWidget/CupertinoContextMenuAction.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoContextMenuAction.dart rename to lib/views/widgets/StatelessWidget/CupertinoContextMenuAction.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoDatePicker.dart b/lib/views/widgets/StatelessWidget/CupertinoDatePicker.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoDatePicker.dart rename to lib/views/widgets/StatelessWidget/CupertinoDatePicker.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoDialogAction.dart b/lib/views/widgets/StatelessWidget/CupertinoDialogAction.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoDialogAction.dart rename to lib/views/widgets/StatelessWidget/CupertinoDialogAction.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoPicker.dart b/lib/views/widgets/StatelessWidget/CupertinoPicker.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoPicker.dart rename to lib/views/widgets/StatelessWidget/CupertinoPicker.dart diff --git a/lib/views/widgets/StatelessWidget/button/CupertinoSegmentedControlTest.dart b/lib/views/widgets/StatelessWidget/CupertinoSegmentedControlTest.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/CupertinoSegmentedControlTest.dart rename to lib/views/widgets/StatelessWidget/CupertinoSegmentedControlTest.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/CupertinoTimerPicker.dart b/lib/views/widgets/StatelessWidget/CupertinoTimerPicker.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/CupertinoTimerPicker.dart rename to lib/views/widgets/StatelessWidget/CupertinoTimerPicker.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/DayPicker.dart b/lib/views/widgets/StatelessWidget/DayPicker.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/DayPicker.dart rename to lib/views/widgets/StatelessWidget/DayPicker.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/Dialog.dart b/lib/views/widgets/StatelessWidget/Dialog.dart similarity index 94% rename from lib/views/widgets/StatelessWidget/dialog/Dialog.dart rename to lib/views/widgets/StatelessWidget/Dialog.dart index eadc76b..14a3024 100644 --- a/lib/views/widgets/StatelessWidget/dialog/Dialog.dart +++ b/lib/views/widgets/StatelessWidget/Dialog.dart @@ -78,7 +78,7 @@ class DeleteDialog extends StatelessWidget { Widget _buildContent() { return Padding( - padding: const EdgeInsets.all(10.0), + padding: const EdgeInsets.all(15.0), child: Text( ' Hi toly! If you push the conform buttom ,' ' You will lose this file. Are you sure wand to do that?', @@ -90,18 +90,18 @@ class DeleteDialog extends StatelessWidget { Widget _buildFooter(context) { return Padding( - padding: const EdgeInsets.only(bottom: 15.0, top: 10), + padding: const EdgeInsets.only(bottom: 15.0, top: 10,left: 10,right: 10), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container( alignment: Alignment.center, height: 40, - width: 120, + width: 100, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(30)), color: Color(0xff73D1EE)), - child: Text('Yes, Delete', + child: Text('Yes', style: TextStyle(color: Colors.white, fontSize: 16)), ), InkWell( @@ -109,7 +109,7 @@ class DeleteDialog extends StatelessWidget { child: Container( alignment: Alignment.center, height: 40, - width: 120, + width: 100, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(30)), color: Colors.orangeAccent), diff --git a/lib/views/widgets/StatelessWidget/chip/FilterChip.dart b/lib/views/widgets/StatelessWidget/FilterChip.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/chip/FilterChip.dart rename to lib/views/widgets/StatelessWidget/FilterChip.dart diff --git a/lib/views/widgets/StatelessWidget/button/FlatButton.dart b/lib/views/widgets/StatelessWidget/FlatButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/FlatButton.dart rename to lib/views/widgets/StatelessWidget/FlatButton.dart diff --git a/lib/views/widgets/StatelessWidget/button/FloatingActionButton.dart b/lib/views/widgets/StatelessWidget/FloatingActionButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/FloatingActionButton.dart rename to lib/views/widgets/StatelessWidget/FloatingActionButton.dart diff --git a/lib/views/widgets/StatelessWidget/tile/GridTile.dart b/lib/views/widgets/StatelessWidget/GridTile.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/tile/GridTile.dart rename to lib/views/widgets/StatelessWidget/GridTile.dart diff --git a/lib/views/widgets/StatelessWidget/tile/GridTileBar.dart b/lib/views/widgets/StatelessWidget/GridTileBar.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/tile/GridTileBar.dart rename to lib/views/widgets/StatelessWidget/GridTileBar.dart diff --git a/lib/views/widgets/StatelessWidget/button/IconButton.dart b/lib/views/widgets/StatelessWidget/IconButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/IconButton.dart rename to lib/views/widgets/StatelessWidget/IconButton.dart diff --git a/lib/views/widgets/StatelessWidget/chip/InputChip.dart b/lib/views/widgets/StatelessWidget/InputChip.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/chip/InputChip.dart rename to lib/views/widgets/StatelessWidget/InputChip.dart diff --git a/lib/views/widgets/StatelessWidget/tile/ListTile.dart b/lib/views/widgets/StatelessWidget/ListTile.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/tile/ListTile.dart rename to lib/views/widgets/StatelessWidget/ListTile.dart diff --git a/lib/views/widgets/StatelessWidget/ListView.dart b/lib/views/widgets/StatelessWidget/ListView.dart index 90dd8ca..c2f4c38 100644 --- a/lib/views/widgets/StatelessWidget/ListView.dart +++ b/lib/views/widgets/StatelessWidget/ListView.dart @@ -29,26 +29,26 @@ class CustomListView extends StatelessWidget { Widget build(BuildContext context) { return Container( height: 200, - child: ListView( - padding: EdgeInsets.symmetric(horizontal: 5), - children: data - .map((color) => Container( - alignment: Alignment.center, - width: 100, - height: 50, - color: color, - child: Text( - colorString(color), - style: TextStyle(color: Colors.white, shadows: [ - Shadow( - color: Colors.black, - offset: Offset(.5, .5), - blurRadius: 2) - ]), - ), - )) - .toList(), - ), + child: ListView( + padding: EdgeInsets.symmetric(horizontal: 5), + children: data + .map((color) => Container( + alignment: Alignment.center, + width: 100, + height: 50, + color: color, + child: Text( + colorString(color), + style: TextStyle(color: Colors.white, shadows: [ + Shadow( + color: Colors.black, + offset: Offset(.5, .5), + blurRadius: 2) + ]), + ), + )) + .toList(), + ), ); } diff --git a/lib/views/widgets/StatelessWidget/Listener.dart b/lib/views/widgets/StatelessWidget/Listener.dart index 2c50910..f515e9f 100644 --- a/lib/views/widgets/StatelessWidget/Listener.dart +++ b/lib/views/widgets/StatelessWidget/Listener.dart @@ -13,7 +13,7 @@ import 'package:flutter/material.dart'; // "【onPointerDown】 : 按下事件 【Function(PointerDownEvent)】\n" // "【onPointerMove】 : 移动事件 【Function(PointerMoveEvent)】\n" // "【onPointerMove】 : 抬起事件 【Function(PointerUpEvent)】\n" -// "【onPointerCancel】 : 抬起事件 【Function(PointerUpEvent)】", +// "【onPointerCancel】 : 取消事件 【Function(PointerUpEvent)】", // } class CustomListener extends StatefulWidget { diff --git a/lib/views/widgets/StatelessWidget/MaterialButton.dart b/lib/views/widgets/StatelessWidget/MaterialButton.dart new file mode 100644 index 0000000..1d903ed --- /dev/null +++ b/lib/views/widgets/StatelessWidget/MaterialButton.dart @@ -0,0 +1,85 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_unit/app/utils/pather.dart'; +import 'package:flutter_unit/components/panel/panel.dart'; +import 'package:flutter_unit/views/dialogs/dialog_about.dart'; + +class CustomMaterialButton extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialButton( + height: 40, + elevation: 5, + color: Colors.orangeAccent, + textColor: Colors.white, + splashColor: Colors.blue, + padding: EdgeInsets.all(8), + child: Text("MaterialButton"), + onPressed: () => DialogAbout.show(context)); + } +} + +class LongPressMaterialButton extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialButton( + height: 40, + elevation: 5, + color: Colors.blue, + highlightColor: Colors.green, + textColor: Colors.white, + padding: EdgeInsets.all(8), + child: Text("MaterialButton"), + onLongPress: () => DialogAbout.show(context), + onPressed: () => DialogAbout.show(context)); + } +} + +class ShapeMaterialButton extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Wrap( + spacing: 20, + children: [ + Container( + width: 40, + height: 40, + child: MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.blue, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.add, + color: Colors.white, + ), + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onLongPress: () => DialogAbout.show(context), + onPressed: () => DialogAbout.show(context)), + ), + Container( + width: 100, + height: 40, + child: MaterialButton( + padding: EdgeInsets.all(0), + textColor: Color(0xffFfffff), + elevation: 3, + color: Colors.blue, + highlightColor: Color(0xffF88B0A), + splashColor: Colors.red, + child: Icon( + Icons.remove, + color: Colors.white, + ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(15))), + onLongPress: () => DialogAbout.show(context), + onPressed: () => DialogAbout.show(context)), + ), + ], + ); + } +} diff --git a/lib/views/widgets/StatelessWidget/dialog/MonthPicker.dart b/lib/views/widgets/StatelessWidget/MonthPicker.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/MonthPicker.dart rename to lib/views/widgets/StatelessWidget/MonthPicker.dart diff --git a/lib/views/widgets/StatelessWidget/button/OutLineButton.dart b/lib/views/widgets/StatelessWidget/OutLineButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/OutLineButton.dart rename to lib/views/widgets/StatelessWidget/OutLineButton.dart diff --git a/lib/views/widgets/StatelessWidget/tile/RadioListTile.dart b/lib/views/widgets/StatelessWidget/RadioListTile.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/tile/RadioListTile.dart rename to lib/views/widgets/StatelessWidget/RadioListTile.dart diff --git a/lib/views/widgets/StatelessWidget/button/RaisedButton.dart b/lib/views/widgets/StatelessWidget/RaisedButton.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/RaisedButton.dart rename to lib/views/widgets/StatelessWidget/RaisedButton.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/SimpleDialog.dart b/lib/views/widgets/StatelessWidget/SimpleDialog.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/SimpleDialog.dart rename to lib/views/widgets/StatelessWidget/SimpleDialog.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/SimpleDialogOption.dart b/lib/views/widgets/StatelessWidget/SimpleDialogOption.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/SimpleDialogOption.dart rename to lib/views/widgets/StatelessWidget/SimpleDialogOption.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/SnackBar.dart b/lib/views/widgets/StatelessWidget/SnackBar.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/SnackBar.dart rename to lib/views/widgets/StatelessWidget/SnackBar.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/SnackBarAction.dart b/lib/views/widgets/StatelessWidget/SnackBarAction.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/SnackBarAction.dart rename to lib/views/widgets/StatelessWidget/SnackBarAction.dart diff --git a/lib/views/widgets/StatelessWidget/tile/SwitchListTile.dart b/lib/views/widgets/StatelessWidget/SwitchListTile.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/tile/SwitchListTile.dart rename to lib/views/widgets/StatelessWidget/SwitchListTile.dart diff --git a/lib/views/widgets/TabBar.dart b/lib/views/widgets/StatelessWidget/TabBar.dart similarity index 100% rename from lib/views/widgets/TabBar.dart rename to lib/views/widgets/StatelessWidget/TabBar.dart diff --git a/lib/views/widgets/StatelessWidget/button/ToggleButtons.dart b/lib/views/widgets/StatelessWidget/ToggleButtons.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/button/ToggleButtons.dart rename to lib/views/widgets/StatelessWidget/ToggleButtons.dart diff --git a/lib/views/widgets/StatelessWidget/dialog/YearPicker.dart b/lib/views/widgets/StatelessWidget/YearPicker.dart similarity index 100% rename from lib/views/widgets/StatelessWidget/dialog/YearPicker.dart rename to lib/views/widgets/StatelessWidget/YearPicker.dart diff --git a/lib/views/widgets/StatelessWidget/button/MaterialButton.dart b/lib/views/widgets/StatelessWidget/button/MaterialButton.dart deleted file mode 100644 index 315a2f1..0000000 --- a/lib/views/widgets/StatelessWidget/button/MaterialButton.dart +++ /dev/null @@ -1,85 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_unit/app/utils/pather.dart'; -import 'package:flutter_unit/components/panel/panel.dart'; -import 'package:flutter_unit/views/dialogs/dialog_about.dart'; - - -class CustomMaterialButton extends StatelessWidget { - @override - Widget build(BuildContext context) { - return MaterialButton( - height: 40, - elevation: 5, - color: Colors.orangeAccent, - textColor: Colors.white, - splashColor: Colors.blue, - padding: EdgeInsets.all(8), - child: Text("MaterialButton"), - onPressed: () => DialogAbout.show(context)); - } -} -class LongPressMaterialButton extends StatelessWidget { - @override - Widget build(BuildContext context) { - return MaterialButton( - height: 40, - elevation: 5, - color: Colors.blue, - highlightColor: Colors.green, - textColor: Colors.white, - padding: EdgeInsets.all(8), - child: Text("MaterialButton"), - onLongPress: () => DialogAbout.show(context), - onPressed: () => DialogAbout.show(context)); - } -} - -class ShapeMaterialButton extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Container( - width: 80, - height: 80, - child: MaterialButton( - textColor: Color(0xffFfffff), - elevation: 3, - color: Colors.blue, - highlightColor: Color(0xffF88B0A), - splashColor: Colors.red, - child: Text( - "MaterialButton", - style: TextStyle(fontSize: 12), - ), - shape: _StarShapeBorder(), - onLongPress: () => DialogAbout.show(context), - onPressed: () => DialogAbout.show(context)), - ); - } -} - -class _StarShapeBorder extends ShapeBorder { - @override - // TODO: implement dimensions - EdgeInsetsGeometry get dimensions => null; - - @override - Path getInnerPath(Rect rect, {TextDirection textDirection}) { - // TODO: implement getInnerPath - return null; - } - - @override - Path getOuterPath(Rect rect, {TextDirection textDirection}) => - Pather.create.nStarPath(20, 40, 35, dx: 40, dy: 40); - - @override - void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) { - // TODO: implement paint - } - - @override - ShapeBorder scale(double t) { - // TODO: implement scale - return null; - } -} diff --git a/lib/views/widgets/StatelessWidget/listview/ListView.dart b/lib/views/widgets/StatelessWidget/listview/ListView.dart deleted file mode 100644 index ecc1110..0000000 --- a/lib/views/widgets/StatelessWidget/listview/ListView.dart +++ /dev/null @@ -1,68 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'chart_widget.dart'; -import 'chat_api.dart'; -import 'load_more_widget.dart'; - -class ListViewPage extends StatefulWidget { - @override - _ListViewPageState createState() => _ListViewPageState(); -} - -class _ListViewPageState extends State { - List _data; //数据 - final ChatApi api = ChatApi.monk(50); - - ScrollController _scrollController = ScrollController();//定义变量及初始化 - - @override - void initState() { - _data = api.chatItem; //初始化数据 - - _scrollController.addListener(() {//添加监听 - if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) { - _loadMore(); - } - }); - super.initState(); - } - - @override - void dispose() { - _scrollController.dispose();//释放控制器 - super.dispose(); - } - - @override - Widget build(BuildContext context) { - - var content = ListView.builder( - controller: _scrollController, - itemCount: _data.length + 1, //条目的个数 - itemBuilder: (BuildContext context, int index) => - index == _data.length? //数据填充条目 - LoadMoreWidget(): - ChatWidget(chartItem: _data[index],) - ); - - return RefreshIndicator( - child: content, - onRefresh: _render, - ); - } - //异步请求+更新界面 - Future _render() async { - await api.addTop(); - setState(() { - _data=api.chatItem; - }); - } - - //加载逻辑 - _loadMore() async { - await api.addBottom(); - setState(() { - _data=api.chatItem; - }); - } -} diff --git a/lib/views/widgets/StatelessWidget/listview/chart_widget.dart b/lib/views/widgets/StatelessWidget/listview/chart_widget.dart deleted file mode 100755 index af618c2..0000000 --- a/lib/views/widgets/StatelessWidget/listview/chart_widget.dart +++ /dev/null @@ -1,95 +0,0 @@ -import 'package:flutter/material.dart'; - -import 'circle_image.dart'; - - - -class NinePointBox extends StatelessWidget { - final ImageProvider image; - final Widget child; - final Rect sliceRect; - final double maxWith; - final EdgeInsetsGeometry padding; - - NinePointBox( - {Key key, - @required this.image, - this.child, - @required this.sliceRect, - this.maxWith = 280, - this.padding}) - : super(key: key); - - @override - Widget build(BuildContext context) { - return Container( - decoration: BoxDecoration( - image: DecorationImage( - centerSlice: this.sliceRect, - image: image, - ), - ), - constraints: BoxConstraints(maxWidth: this.maxWith), - padding: padding, - child: child, - ); - } -} - -enum ChartType { right, left }//组件的类型 - -class ChatItem {//组件信息描述类 - ImageProvider headIcon;//头像 - double maxWith;//最大宽 - ChartType type;//组件的类型 - String text;//文字信息 - - ChatItem( - {this.headIcon, - this.text, - this.maxWith = 280, - this.type = ChartType.right}); -} - -class ChatWidget extends StatelessWidget { - final ChatItem chartItem; - - ChatWidget({Key key, this.chartItem}) : super(key: key); - - @override - Widget build(BuildContext context) { - bool isRight=chartItem.type==ChartType.right;//是否是右侧 - var head = Padding(//头像 - padding: EdgeInsets.only(left: 10, right: 10,), - child: CircleImage(image: chartItem.headIcon,), - ); - - var rightBox = NinePointBox(//绿色对话框 - sliceRect: Rect.fromLTRB(6, 28, 60, 29), - padding: EdgeInsets.fromLTRB(15, 10, 20, 10.0), - image: AssetImage('assets/images/right_chat.png',), - child: Text(chartItem.text, - style: TextStyle(fontSize: 15.0), - ), - ); - - var leftBox = NinePointBox(//白色对话框 - sliceRect: Rect.fromLTRB(14, 27, 69, 28), - padding: EdgeInsets.fromLTRB(20, 10, 10, 10), - image: AssetImage('assets/images/left_chat.png',), - child: Text(chartItem.text, - style: TextStyle(fontSize: 15.0), - ), - ); - - return Container(//根据左右来构建组件 - padding: EdgeInsets.symmetric(vertical: 10), - child: Row( - mainAxisAlignment: isRight?MainAxisAlignment.end:MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [if(isRight)rightBox, head,if(!isRight)leftBox], - ), - ); - } -} - diff --git a/lib/views/widgets/StatelessWidget/listview/chat_api.dart b/lib/views/widgets/StatelessWidget/listview/chat_api.dart deleted file mode 100644 index f662a4f..0000000 --- a/lib/views/widgets/StatelessWidget/listview/chat_api.dart +++ /dev/null @@ -1,49 +0,0 @@ -import 'dart:math'; - -import 'package:flutter/material.dart'; - -import 'chart_widget.dart'; - - -class ChatApi{ - var random = Random();//随机数 - List _chatItem=[]; - List get chatItem=>_chatItem; - - ChatApi.monk(int count){ - var strs = ["我是要成为编程之王的男人，" - "你是要成为编程之王的女人；","Hello World", - "凭君莫话封侯事，一将功成万骨枯。你觉得如何?", - "识君，吾之幸也;失君，吾之憾也;守君，吾之愿也。", - "简单必有简单的成本，复杂必有复杂的价值。"]; - - for (var i = 0; i < count; i++) { - _chatItem.add(ChatItem( - headIcon: AssetImage(i.isEven ? - "assets/images/wy_200x300.jpg" : - "assets/images/icon_head.png"), - text: strs[random.nextInt(strs.length)], - type: i.isEven ? - ChartType.left : ChartType.right)); - } - } - - Future addTop() async{ - //模拟耗时 - await Future.delayed(Duration(seconds: 3)); - _chatItem.insert(0,ChatItem( - headIcon: AssetImage("assets/images/wy_200x300.jpg"), - type: ChartType.left, - text: "我是下拉出来的")); - } - - Future addBottom() async{ - //模拟耗时 - await Future.delayed(Duration(seconds: 3)); - _chatItem.add(ChatItem( - headIcon: AssetImage("assets/images/icon_head.png"), - type: ChartType.right, - text: "我是上拉出来的"), - ); - } -} \ No newline at end of file diff --git a/lib/views/widgets/StatelessWidget/listview/circle_image.dart b/lib/views/widgets/StatelessWidget/listview/circle_image.dart deleted file mode 100644 index 31cecb5..0000000 --- a/lib/views/widgets/StatelessWidget/listview/circle_image.dart +++ /dev/null @@ -1,40 +0,0 @@ -import 'package:flutter/material.dart'; - -class CircleImage extends StatelessWidget { - CircleImage( - {Key key, - @required this.image, - this.size = 70, - this.shadowColor, - this.roundColor}) - : super(key: key); - final ImageProvider image; //图片 - final double size; //大小 - final Color shadowColor; //阴影颜色 - final Color roundColor; //边框颜色 - @override - Widget build(BuildContext context) { - var headIcon = Container( - width: size, - height: size, - decoration: BoxDecoration( - shape: BoxShape.circle, //圆形装饰线 - color: roundColor ?? Colors.blue.withAlpha(66), - boxShadow: [ - BoxShadow( - //阴影 - color: shadowColor ?? Colors.grey.withOpacity(0.3), - offset: Offset(0.0, 0.0), blurRadius: 3.0, spreadRadius: 0.0, - ), - ], - ), - child: Padding( - padding: EdgeInsets.all(3), - child: CircleAvatar( - backgroundImage: image, - ), - ), - ); - return headIcon; - } -} diff --git a/lib/views/widgets/StatelessWidget/listview/load_more_widget.dart b/lib/views/widgets/StatelessWidget/listview/load_more_widget.dart deleted file mode 100644 index 08ce72e..0000000 --- a/lib/views/widgets/StatelessWidget/listview/load_more_widget.dart +++ /dev/null @@ -1,13 +0,0 @@ -import 'package:flutter/material.dart'; - -class LoadMoreWidget extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Padding( - padding: EdgeInsets.all(28.0), - child: Center( - child: CircularProgressIndicator(), - ), - ); - } -} diff --git a/lib/views/widgets/StatelessWidget/stateless_unit.dart b/lib/views/widgets/StatelessWidget/stateless_unit.dart index 2182b57..1f9f998 100644 --- a/lib/views/widgets/StatelessWidget/stateless_unit.dart +++ b/lib/views/widgets/StatelessWidget/stateless_unit.dart @@ -11,24 +11,25 @@ export 'FadeInImage.dart'; export 'CircleAvatar.dart'; export 'Visibility.dart'; -export 'chip/Chip.dart'; -export 'chip/ChoiceChip.dart'; -export 'chip/ActionChip.dart'; -export 'chip/InputChip.dart'; -export 'chip/FilterChip.dart'; +export 'Chip.dart'; +export 'ChoiceChip.dart'; +export 'ActionChip.dart'; +export 'InputChip.dart'; +export 'FilterChip.dart'; -export 'tile/ListTile.dart'; -export 'tile/CheckboxListTile.dart'; -export 'tile/SwitchListTile.dart'; -export 'tile/RadioListTile.dart'; -export 'tile/GridTileBar.dart'; -export 'tile/GridTile.dart'; +export 'ListTile.dart'; +export 'CheckboxListTile.dart'; +export 'SwitchListTile.dart'; +export 'RadioListTile.dart'; +export 'GridTileBar.dart'; +export 'GridTile.dart'; -export 'button/MaterialButton.dart'; +export 'MaterialButton.dart'; export 'Divider.dart'; +export 'TabBar.dart'; export 'GridPager.dart'; @@ -37,16 +38,49 @@ export 'Spacer.dart'; export 'UserAccountsDrawerHeader.dart'; export 'VerticalDivider.dart'; -export 'button/BackButton.dart'; -export 'button/ButtonBar.dart'; -export 'button/CloseButton.dart'; -export 'button/CupertinoButton.dart'; -export 'button/FlatButton.dart'; -export 'button/FloatingActionButton.dart'; -export 'button/IconButton.dart'; -export 'button/OutLineButton.dart'; -export 'button/RaisedButton.dart'; -export 'button/ToggleButtons.dart'; +export 'BackButton.dart'; +export 'ButtonBar.dart'; +export 'CloseButton.dart'; +export 'CupertinoButton.dart'; +export 'FlatButton.dart'; +export 'FloatingActionButton.dart'; +export 'IconButton.dart'; +export 'OutLineButton.dart'; +export 'RaisedButton.dart'; +export 'ToggleButtons.dart'; +export 'AboutListTile.dart'; +export 'CupertinoTheme.dart'; +export 'Drawer.dart'; +export 'DrawerHeader.dart'; +export 'GestureDetector.dart'; +export 'GirdView.dart'; +export 'ListView.dart'; +export 'Listener.dart'; +export 'PositionedDirectional.dart'; +export 'SingleChildScrollView.dart'; +export 'Tab.dart'; +export 'Theme.dart'; +export 'WillPopScope.dart'; +export 'AboutDialog.dart'; +export 'AlertDialog.dart'; +export 'AnimatedIcon.dart'; +export 'BottomSheet.dart'; +export 'CupertinoActionSheet.dart'; +export 'CupertinoActionSheetAction.dart'; +export 'CupertinoAlertDialog.dart'; +export 'CupertinoContextMenu.dart'; +export 'CupertinoContextMenuAction.dart'; +export 'CupertinoDatePicker.dart'; +export 'CupertinoPicker.dart'; +export 'CupertinoTimerPicker.dart'; +export 'DayPicker.dart'; +export 'Dialog.dart'; +export 'MonthPicker.dart'; +export 'SimpleDialog.dart'; +export 'SimpleDialogOption.dart'; +export 'SnackBar.dart'; +export 'SnackBarAction.dart'; +export 'YearPicker.dart'; \ No newline at end of file diff --git a/lib/views/widgets/widgets_map.dart b/lib/views/widgets/widgets_map.dart index a8976c5..8cf6b6e 100644 --- a/lib/views/widgets/widgets_map.dart +++ b/lib/views/widgets/widgets_map.dart @@ -1,99 +1,37 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_unit/views/widgets/StatefulWidget/stateful_unit.dart'; +import 'StatefulWidget/stateful_unit.dart'; +import 'StatelessWidget/stateless_unit.dart'; +import 'ProxyWidget/DropdownButtonHideUnderline.dart'; import 'ProxyWidget/Flexible.dart'; import 'ProxyWidget/InheritedWidget/MediaQuery.dart'; +import 'ProxyWidget/InheritedWidget/ScrollConfiguration.dart'; import 'ProxyWidget/Positioned.dart'; import 'ProxyWidget/Spacer.dart'; +import 'RenderObjectWidget/ErrorWidget.dart'; import 'RenderObjectWidget/MultiChildRenderObjectWidget/Column.dart'; import 'ProxyWidget/Expended.dart'; import 'RenderObjectWidget/MultiChildRenderObjectWidget/IndexedStack.dart'; import 'RenderObjectWidget/MultiChildRenderObjectWidget/Row.dart'; +import 'RenderObjectWidget/SingleChildRenderObjectWidget/AnimatedSize.dart'; import 'RenderObjectWidget/SingleChildRenderObjectWidget/Center.dart'; import 'RenderObjectWidget/SingleChildRenderObjectWidget/CustomPaint/CustomPaint.dart'; import 'RenderObjectWidget/SingleChildRenderObjectWidget/CustomPaint/colck_page/colck_page.dart'; -import 'RenderObjectWidget/SingleChildRenderObjectWidget/CustomPaint/paper.dart'; import 'RenderObjectWidget/render_object_widget.dart'; -import 'StatefulWidget/AnimatedCrossFade.dart'; -import 'StatefulWidget/AnimatedList.dart'; -import 'StatefulWidget/AnimatedSwitcher.dart'; -import 'StatefulWidget/AnimatedWidget/AlignTransition.dart'; -import 'StatefulWidget/AnimatedWidget/DecoratedBoxTransition.dart'; -import 'StatefulWidget/AnimatedWidget/DefaultTextStyleTransition.dart'; -import 'StatefulWidget/AnimatedWidget/RelativePositionedTransition.dart'; -import 'StatefulWidget/AnimatedWidget/SlideTransition.dart'; -import 'StatefulWidget/DataTable.dart'; -import 'StatefulWidget/Dismissible.dart'; -import 'StatefulWidget/DragTarget.dart'; -import 'StatefulWidget/Draggable.dart'; -import 'StatefulWidget/ExpansionPanelList.dart'; -import 'StatefulWidget/FutureBuilder.dart'; -import 'StatefulWidget/Hero.dart'; -import 'StatefulWidget/ImplicitlyAnimatedWidget/AnimatedAlign.dart'; -import 'StatefulWidget/ImplicitlyAnimatedWidget/AnimatedContainer.dart'; -import 'StatefulWidget/ImplicitlyAnimatedWidget/AnimatedDefaultTextStyle.dart'; -import 'StatefulWidget/ImplicitlyAnimatedWidget/AnimatedOpacity.dart'; -import 'StatefulWidget/ImplicitlyAnimatedWidget/AnimatedPadding.dart'; -import 'StatefulWidget/ImplicitlyAnimatedWidget/AnimatedPositioned.dart'; -import 'StatefulWidget/ImplicitlyAnimatedWidget/AnimatedPositionedDirectional.dart'; -import 'StatefulWidget/Ink.dart'; -import 'StatefulWidget/InkResponse.dart'; -import 'StatefulWidget/InkWell.dart'; -import 'StatefulWidget/LicensePage.dart'; -import 'StatefulWidget/ListWheelScrollView.dart'; -import 'StatefulWidget/LongPressDraggable.dart'; -import 'StatefulWidget/Material.dart'; -import 'StatefulWidget/PageView.dart'; -import 'StatefulWidget/PopupMenuButton.dart'; -import 'StatefulWidget/PopupMenuDivider.dart'; -import 'StatefulWidget/RawChip.dart'; -import 'StatefulWidget/RawMaterialButton.dart'; -import 'StatefulWidget/ReorderableListView.dart'; -import 'StatefulWidget/Scrollable.dart'; -import 'StatefulWidget/StreamBuilder.dart'; -import 'StatefulWidget/TableRowInkWell.dart'; -import 'StatefulWidget/indicator/LinearProgressIndicator.dart'; -import 'StatefulWidget/nav/CupertinoApp.dart'; -import 'StatefulWidget/nav/CupertinoPageScaffold.dart'; -import 'StatefulWidget/nav/CupertinoTabScaffold.dart'; -import 'StatefulWidget/nav/MaterialApp.dart'; -import 'StatefulWidget/nav/Scaffold.dart'; -import 'StatefulWidget/nav/TabBarView.dart'; -import 'StatelessWidget/CupertinoTheme.dart'; -import 'StatelessWidget/Drawer.dart'; -import 'StatelessWidget/DrawerHeader.dart'; -import 'StatelessWidget/GestureDetector.dart'; -import 'StatelessWidget/GirdView.dart'; -import 'StatelessWidget/ListView.dart'; -import 'StatelessWidget/Listener.dart'; -import 'StatelessWidget/PositionedDirectional.dart'; -import 'StatelessWidget/SingleChildScrollView.dart'; -import 'StatelessWidget/Tab.dart'; -import 'StatelessWidget/Theme.dart'; -import 'StatelessWidget/WillPopScope.dart'; -import 'StatelessWidget/dialog/AboutDialog.dart'; -import 'StatelessWidget/dialog/AlertDialog.dart'; -import 'StatelessWidget/AnimatedIcon.dart'; -import 'StatelessWidget/dialog/BottomSheet.dart'; -import 'StatelessWidget/dialog/CupertinoActionSheet.dart'; -import 'StatelessWidget/dialog/CupertinoActionSheetAction.dart'; -import 'StatelessWidget/dialog/CupertinoAlertDialog.dart'; -import 'StatelessWidget/dialog/CupertinoContextMenu.dart'; -import 'StatelessWidget/dialog/CupertinoContextMenuAction.dart'; -import 'StatelessWidget/dialog/CupertinoDatePicker.dart'; -import 'StatelessWidget/dialog/CupertinoPicker.dart'; -import 'StatelessWidget/dialog/CupertinoTimerPicker.dart'; -import 'StatelessWidget/dialog/DayPicker.dart'; -import 'StatelessWidget/dialog/Dialog.dart'; -import 'StatelessWidget/dialog/MonthPicker.dart'; -import 'StatelessWidget/dialog/SimpleDialog.dart'; -import 'StatelessWidget/dialog/SimpleDialogOption.dart'; -import 'StatelessWidget/dialog/SnackBar.dart'; -import 'StatelessWidget/dialog/SnackBarAction.dart'; -import 'StatelessWidget/dialog/YearPicker.dart'; -import 'StatelessWidget/stateless_unit.dart'; -import 'TabBar.dart'; +import 'Sliver/CustomScrollView.dart'; +import 'Sliver/FlexibleSpaceBar.dart'; +import 'Sliver/SliverAppBar.dart'; +import 'Sliver/SliverFillViewport.dart'; +import 'Sliver/SliverFixedExtentList.dart'; +import 'Sliver/SliverGrid.dart'; +import 'Sliver/SliverList.dart'; +import 'Sliver/SliverOpacity.dart'; +import 'Sliver/SliverPadding.dart'; +import 'Sliver/SliverPersistentHeader.dart'; +import 'Sliver/SliverToBoxAdapter.dart'; + + /// create by 张风捷特烈 on 2020-03-04 /// contact me by email 1981462002@qq.com @@ -210,6 +148,7 @@ class WidgetsMap { return [ CustomMaterialButton(), LongPressMaterialButton(), + ShapeMaterialButton(), ]; case "CupertinoButton": return [CustomCupertinoButton()]; @@ -373,11 +312,6 @@ class WidgetsMap { CustomTabBar(), NoShadowTabBarDemo(), ]; - case "TabBar": - return [ - CustomTabBar(), - NoShadowTabBarDemo(), - ]; case "TabBarView": return [ CustomTabBarView(), @@ -663,7 +597,7 @@ class WidgetsMap { ]; case "CupertinoAlertDialog": return [ - CustomCupertinoDialog(), + CustomCupertinoAlertDialog(), ]; case "AboutDialog": return [ @@ -881,6 +815,95 @@ class WidgetsMap { return [ CustomListWheelScrollView(), ]; + case "ScrollConfiguration": + return [ + CustomScrollConfiguration(), + ]; + case "DropdownButtonHideUnderline": + return [ + CustomDropDownButtonHideUnderline(), + ]; + case "Overlay": + return [ + CustomOverlay(), + ]; + case "CustomScrollView": + return [ + CustomScrollViewDemo(), + ]; + case "SliverAppBar": + return [ + SliverAppBarDemo(), + ]; + case "SliverList": + return [ + SliverListDemo(), + ]; + case "SliverFixedExtentList": + return [ + SliverFixedExtentListDemo(), + ]; + case "SliverFillViewport": + return [ + SliverFillViewportDemo(), + ]; + case "SliverGird": + return [ + SliverGirdDemo(), + ]; + case "SliverToBoxAdapter": + return [ + SliverToBoxAdapterDemo(), + ]; + case "SliverPersistentHeader": + return [ + SliverPersistentHeaderDemo(), + ]; + case "SliverPadding": + return [ + SliverPaddingDemo(), + ]; + case "SliverOpacity": + return [ + SliverOpacityDemo(), + ]; + case "AboutListTile": + return [ + AboutListTileDemo(), + ]; + case "Scrollbar": + return [ + CustomScrollbar(), + ]; + case "CupertinoScrollbar": + return [ + CustomCupertinoScrollbar(), + ]; + case "FlexibleSpaceBar": + return [ + FlexibleSpaceBarDemo(), + ]; + case "ErrorWidget": + return [ + ErrorWidgetDemo(), + ]; + case "Form": + return [ + CustomForm(), + ]; + case "TextFormField": + return [ + CustomTextFormField(), + ]; + case "Stepper": + return [ + StepperDemo(), + VerticalStepper(), + ]; + case "AnimatedSize": + return [ + CustomAnimatedSize(), + ]; } } }