diff --git a/assets/flutter.db b/assets/flutter.db index 5bc9a79..36c48aa 100644 Binary files a/assets/flutter.db and b/assets/flutter.db differ diff --git a/lib/views/widgets/Other/RenderObjectToWidgetAdapter/node1_base.dart b/lib/views/widgets/Other/RenderObjectToWidgetAdapter/node1_base.dart new file mode 100644 index 0000000..c11f144 --- /dev/null +++ b/lib/views/widgets/Other/RenderObjectToWidgetAdapter/node1_base.dart @@ -0,0 +1,33 @@ + +import 'package:flutter/material.dart'; + + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 289 RenderObjectToWidgetAdapter 根组件 RenderObject 和 Element 树的桥梁。 +/// +// { +// "widgetId": 289, +// "name": 'RenderObjectToWidgetAdapter 介绍', +// "priority": 1, +// "subtitle": +// "【container】 : 渲染对象 【RenderObjectWithChildMixin】\n" +// "【child】 : 子组件 【Widget】\n" +// "【debugShortDescription】 : 调试简介 【String】", +// } + +class RenderObjectToWidgetAdapterDemo extends StatelessWidget { + final String info = + '该组件并没有什么太大的使用价值，但却非常有纪念意义。它是 Flutter 框架中最顶层的 Widget，它的 child 是 runApp 传入的组件，在 attachRootWidget 方法中被实例化。' + '它持有根渲染对象 RenderView ，负责创建根元素 RenderObjectToWidgetElement，是一个无名英雄，一个深藏功与名的组件。'; + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.blue.withOpacity(0.1), + padding: EdgeInsets.all(10), + margin: EdgeInsets.all(10), + child: Text(info), + ); + } +} diff --git a/lib/views/widgets/StatefulWidget/AnimatedBuilder/node1_base.dart b/lib/views/widgets/StatefulWidget/AnimatedBuilder/node1_base.dart new file mode 100644 index 0000000..01ca1c7 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/AnimatedBuilder/node1_base.dart @@ -0,0 +1,68 @@ + +import 'package:flutter/material.dart'; + + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 228 AnimatedBuilder 动画构造器 +/// 通过 builder 使动画对应的节点变为局部更新，并且可避免子组件刷新，减少构建的时间，提高动画性能。 +/// +// { +// "widgetId": 228, +// "name": 'AnimatedBuilder 使用案例', +// "priority": 1, +// "subtitle": +// "【animation】 : *可监听对象 【Listenable】\n" +// "【builder】 : *组件构造器 【TransitionBuilder】\n" +// "【child】 : 子组件 【Widget】", +// } + +class AnimatedBuilderDemo extends StatefulWidget { + @override + _AnimatedBuilderDemoState createState() => _AnimatedBuilderDemoState(); +} + +class _AnimatedBuilderDemoState extends State + with SingleTickerProviderStateMixin { + AnimationController controller; + + @override + void initState() { + super.initState(); + controller = AnimationController( + vsync: this, + lowerBound: 0.3, + upperBound: 1.0, + duration: const Duration(milliseconds: 500)) + ..forward(); + } + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + controller.forward(from: 0); + }, + child: AnimatedBuilder( + animation: controller, + builder: (ctx, child) { + return Transform.scale( + scale: controller.value, + child: Opacity(opacity: controller.value, child: child), + ); + }, + child: buildChild()), + ); + } + + Widget buildChild() => Container( + height: 100, + width: 100, + decoration: BoxDecoration(color: Colors.orange, shape: BoxShape.circle), + alignment: Alignment.center, + child: Text( + 'Toly', + style: TextStyle(fontSize: 40, color: Colors.white), + ), + ); +} diff --git a/lib/views/widgets/StatefulWidget/TweenAnimationBuilder/node1_base.dart b/lib/views/widgets/StatefulWidget/TweenAnimationBuilder/node1_base.dart new file mode 100644 index 0000000..38f8c8b --- /dev/null +++ b/lib/views/widgets/StatefulWidget/TweenAnimationBuilder/node1_base.dart @@ -0,0 +1,61 @@ + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 226 TweenAnimationBuilder 渐变动画构造器 +/// 通过渐变器 Tween 对相关属性进行渐变动画，通过 builder 进行局部构建，减少刷新范围。不需要自定义动画器，可指定动画时长、曲线、结束回调。 +/// +// { +// "widgetId": 226, +// "name": 'TweenAnimationBuilder 使用案例', +// "priority": 1, +// "subtitle": +// "【tween】 : *渐变器 【Tween】\n" +// "【duration】 : *时长 【Duration】\n" +// "【builder】 : *构造器 【ValueWidgetBuilder】\n" +// "【curve】 : 动画曲线 【Curve】\n" +// "【onEnd】 : 结束回调 【VoidCallback】\n" +// "【child】 : 子组件 【Widget】", +// } + +class TweenAnimationBuilderDemo extends StatefulWidget { + @override + _TweenAnimationBuilderDemoState createState() => + _TweenAnimationBuilderDemoState(); +} + +class _TweenAnimationBuilderDemoState extends State { + Color _value = Colors.red; + + @override + Widget build(BuildContext context) { + return TweenAnimationBuilder( + tween: ColorTween(begin: Colors.blue, end: _value), + duration: Duration(milliseconds: 800), + builder: (BuildContext context, Color color, Widget child) { + return GestureDetector( + onTap: () { + setState(() { + _value = _value == Colors.red ? Colors.blue : Colors.red; + }); + }, + child: Container( + width: 40, + height: 40, + + child: child, + decoration: BoxDecoration( + color: color, + borderRadius: BorderRadius.circular(5) + ), + ), + ); + }, + child: Icon( + Icons.android_outlined, + color: Colors.white, + ), + ); + } +} diff --git a/lib/views/widgets/StatelessWidget/Container/node4_decoration.dart b/lib/views/widgets/StatelessWidget/Container/node4_decoration.dart index febe711..15423df 100644 --- a/lib/views/widgets/StatelessWidget/Container/node4_decoration.dart +++ b/lib/views/widgets/StatelessWidget/Container/node4_decoration.dart @@ -14,7 +14,7 @@ import 'package:flutter/material.dart'; class ContainerDecoration extends StatelessWidget { - static const rainbow = [ + final List rainbow = [ 0xffff0000, 0xffFF7F00, 0xffFFFF00, @@ -23,10 +23,10 @@ class ContainerDecoration extends StatelessWidget { 0xff0000FF, 0xff8B00FF ]; - + final List stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0]; @override Widget build(BuildContext context) { - var stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0]; + return Container(//容器 alignment: Alignment.center, width: 200, diff --git a/lib/views/widgets/StatelessWidget/CupertinoPopupSurface/node1_base.dart b/lib/views/widgets/StatelessWidget/CupertinoPopupSurface/node1_base.dart new file mode 100644 index 0000000..0806d45 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/CupertinoPopupSurface/node1_base.dart @@ -0,0 +1,62 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/9/21 +/// contact me by email 1981462002@qq.com +/// 说明: 217 CupertinoPopupSurface 模糊弹出层 +/// ios 弹出框的圆角矩形模糊背景，源码中应用于 Cupertino 风格的对话框中。 +/// +// { +// "widgetId": 217, +// "name": 'CupertinoPopupSurface 使用', +// "priority": 1, +// "subtitle": +// "【isSurfacePainted】 : 是否绘白 【bool】\n" +// "【child】 : 子组件 【Widget】\n" +// "测试效果左侧 isSurfacePainted = false，右侧 isSurfacePainted = true", +// } + +class CupertinoPopupSurfaceDemo extends StatelessWidget { + final List rainbow = [ + 0xffff0000, + 0xffFF7F00, + 0xffFFFF00, + 0xff00FF00, + 0xff00FFFF, + 0xff0000FF, + 0xff8B00FF + ]; + + final List stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0]; + + @override + Widget build(BuildContext context) { + return Container( + decoration: BoxDecoration( + gradient: RadialGradient( + radius: 1.8, + stops: stops, + colors: rainbow.map((e) => Color(e)).toList())), + padding: EdgeInsets.all(10), + child: Wrap( + spacing: 10, + children: [ + buildCupertinoPopupSurface(false), + buildCupertinoPopupSurface(true), + ], + ), + ); + } + + Widget buildCupertinoPopupSurface(bool isSurfacePainted) { + return CupertinoPopupSurface( + isSurfacePainted: isSurfacePainted, + child: Container( + width: 150, + height: 100, + color: Colors.white.withOpacity(0.3), + alignment: Alignment.center, + ), + ); + } +} diff --git a/lib/views/widgets/exp/other_unit.dart b/lib/views/widgets/exp/other_unit.dart index bcb507c..276e2c5 100644 --- a/lib/views/widgets/exp/other_unit.dart +++ b/lib/views/widgets/exp/other_unit.dart @@ -8,4 +8,5 @@ library other_unit.dart; export '../Other/ErrorWidget/node1_base.dart'; export '../Other/Table/node1_base.dart'; export '../Other/RawImage/node1_base.dart'; -export '../Other/PerformanceOverlay/node1_base.dart'; \ No newline at end of file +export '../Other/PerformanceOverlay/node1_base.dart'; +export '../Other/RenderObjectToWidgetAdapter/node1_base.dart'; \ No newline at end of file diff --git a/lib/views/widgets/exp/stateful_unit.dart b/lib/views/widgets/exp/stateful_unit.dart index d6af615..cf66146 100644 --- a/lib/views/widgets/exp/stateful_unit.dart +++ b/lib/views/widgets/exp/stateful_unit.dart @@ -77,6 +77,8 @@ export '../StatefulWidget/CupertinoScrollbar/node1_base.dart'; export '../StatefulWidget/RawGestureDetector/node1_base.dart'; export '../StatefulWidget/Dismissible/node1_base.dart'; +export '../StatefulWidget/AnimatedBuilder/node1_base.dart'; +export '../StatefulWidget/TweenAnimationBuilder/node1_base.dart'; export '../StatefulWidget/RawKeyboardListener/node1_base.dart'; export '../StatefulWidget/Dismissible/node2_direction.dart'; diff --git a/lib/views/widgets/exp/stateless_unit.dart b/lib/views/widgets/exp/stateless_unit.dart index 28d4bfc..9d18fe8 100644 --- a/lib/views/widgets/exp/stateless_unit.dart +++ b/lib/views/widgets/exp/stateless_unit.dart @@ -45,6 +45,7 @@ export '../StatelessWidget/CupertinoNavigationBarBackButton/node1_base.dart'; export '../StatelessWidget/CupertinoTheme/node1_base.dart'; export '../StatelessWidget/CupertinoTheme/node2_use.dart'; +export '../StatelessWidget/CupertinoPopupSurface/node1_base.dart'; export '../StatelessWidget/Divider/node1_base.dart'; export '../StatelessWidget/Divider/node2_height.dart'; diff --git a/lib/views/widgets/widgets_map.dart b/lib/views/widgets/widgets_map.dart index eb4bb8d..a65cc99 100644 --- a/lib/views/widgets/widgets_map.dart +++ b/lib/views/widgets/widgets_map.dart @@ -7,9 +7,7 @@ import 'exp/proxy_unit.dart'; import 'exp/other_unit.dart'; import 'exp/sliver_unit.dart'; -/// create by 张风捷特烈 on 2020-03-04 -/// contact me by email 1981462002@qq.com -/// 说明: +/// AUTO CREATED BY [张风捷特烈] , DON'T MODIFY! class WidgetsMap { static List map(String name) { @@ -90,6 +88,13 @@ class WidgetsMap { return [ ViewportDemo(), ]; + case "CupertinoPopupSurface": + return [ + CupertinoPopupSurfaceDemo(), + ]; case "RenderObjectToWidgetAdapter": + return [ + RenderObjectToWidgetAdapterDemo(), + ]; case "SliverPrototypeExtentList": return [ SliverPrototypeExtentListDemo(), @@ -118,6 +123,14 @@ class WidgetsMap { return [ SafeAreaDemo(), ]; + case "AnimatedBuilder": + return [ + AnimatedBuilderDemo(), + ]; + case "TweenAnimationBuilder": + return [ + TweenAnimationBuilderDemo(), + ]; case "WidgetInspector": return [ WidgetInspectorDemo(),