diff --git a/lib/views/widgets/ProxyWidget/PrimaryScrollController/node1_base.dart b/lib/views/widgets/ProxyWidget/PrimaryScrollController/node1_base.dart new file mode 100644 index 0000000..c59121f --- /dev/null +++ b/lib/views/widgets/ProxyWidget/PrimaryScrollController/node1_base.dart @@ -0,0 +1,36 @@ +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/3/31 +/// contact me by email 1981462002@qq.com +/// +/// 说明: 335 PrimaryScrollController 5 初始滑动控制器 它是 InheritedWidget 子类，通过 context 向子树中的可滑动视图提供默认的 ScrollController 对象。 +// { +// "widgetId": 335, +// "name": 'PrimaryScrollController 介绍', +// "priority": 1, +// "subtitle": +// "【controller】 : 滑动控制器 【ScrollController】\n" +// "【child】 : 子组件 【Widget】", +// } +class PrimaryScrollControllerDemo extends StatelessWidget { + final String info = + 'PrimaryScrollController 是 InheritedWidget 子类，也就说明它可以为子树组件提供某些默认数据，' + '子树可以通过 context 来获取上层该组件的提供 ScrollController 对象。\n' + '对于一些可滑动组件 ScrollView、SingleChildScrollView、NestedScrollView 等，' + '在使用者未提供 ScrollController 时，且 primary 属性为 true 时(默认true) ，' + '会使用上层 PrimaryScrollController 组件提供的滑动控制器。\n' + '使用 MaterialApp 组件，其已经内置 PrimaryScrollController，'; + + @override + Widget build(BuildContext context) { + + ScrollController label = PrimaryScrollController.of(context); + + return Container( + color: Colors.blue.withOpacity(0.1), + padding: EdgeInsets.all(10), + margin: EdgeInsets.all(10), + child: Text(info+"当前其持有的滑动控制器对象: $label"), + ); + } +} diff --git a/lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformFollower/node1_base.dart b/lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformFollower/node1_base.dart new file mode 100644 index 0000000..d09327e --- /dev/null +++ b/lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformFollower/node1_base.dart @@ -0,0 +1,119 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/3/31 +/// contact me by email 1981462002@qq.com +/// +/// 说明: 265 CompositedTransformFollower 2 合成变换跟随者，一般与 CompositedTransformTarget 组件联合使用，可以使 Overlay 伴随目标变换。 +// { +// "widgetId": 265, +// "name": "基本使用", +// "name": "CompositedTransformFollower 使用", +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【link】 : 链接 【LayerLink】\n" +// "【offset】 : 偏移 【Offset】\n" +// "【targetAnchor】 : 目标锚点 【Alignment】\n" +// "【followerAnchor】 : 伴随者锚点 【Alignment】\n" +// "【showWhenUnlinked】 : 为链接是否显示 【bool】", +// } + +class CompositedTransformFollowerDemo extends StatelessWidget { + + const CompositedTransformFollowerDemo(); + + static const List colors =[Colors.red,Colors.yellow,Colors.blue,Colors.green]; + + @override + Widget build(BuildContext context) { + return Container( + transform: Matrix4.rotationZ(-15/180*pi), + height: 250, + padding: const EdgeInsets.all(50.0), + child: ListView( + scrollDirection: Axis.horizontal, + children: [ + Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [_LogoTips(), const Text('点击图标\n显隐弹框')], + ), + ...colors.map((color) => Container(width: 80, color: color)) + ], + ), + ); + } + + +} + +class _LogoTips extends StatefulWidget { + @override + _LogoTipsState createState() => _LogoTipsState(); +} + +class _LogoTipsState extends State<_LogoTips> { + OverlayEntry _overlayEntry; + + final LayerLink _layerLink = LayerLink(); + + bool show = false; + + OverlayEntry _createOverlayEntry() { + + return OverlayEntry( + builder: (context) => Positioned( + width: 150, + child: CompositedTransformFollower( + link: this._layerLink, + showWhenUnlinked: false, + offset: Offset(0,-10), + targetAnchor: Alignment.topRight, + child: Card( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text('我是一个 Overlay，目标组件为图标，当它变换时，我会伴随变换。'), + ), + ), + ), + )); + } + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: _toggleOverlay, + child: CompositedTransformTarget( + link: this._layerLink, + child: + FlutterLogo( + size: 80, + ), + )); + } + + void _toggleOverlay() { + if (!show) { + _showOverlay(); + } else { + _hideOverlay(); + } + show = !show; + } + + void _showOverlay() { + _overlayEntry = _createOverlayEntry(); + Overlay.of(context).insert(_overlayEntry); + } + + void _hideOverlay() { + _overlayEntry?.remove(); + } + + @override + void dispose() { + _hideOverlay(); + super.dispose(); + } +} diff --git a/lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformTarget/node1_base.dart b/lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformTarget/node1_base.dart new file mode 100644 index 0000000..f6e94e7 --- /dev/null +++ b/lib/views/widgets/SingleChildRenderObjectWidget/CompositedTransformTarget/node1_base.dart @@ -0,0 +1,112 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/3/31 +/// contact me by email 1981462002@qq.com +/// +/// 说明: 266 CompositedTransformTarget 2 合成变换目标，一般与 CompositedTransformFollower 组件联合使用，可以使 Overlay 伴随目标变换。 +// { +// "widgetId": 266, +// "name": "CompositedTransformTarget 使用", +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【link】 : 链接 【LayerLink】", +// } + +class CompositedTransformTargetDemo extends StatelessWidget { + + + const CompositedTransformTargetDemo(); + + static const List colors =[Colors.red,Colors.yellow,Colors.blue,Colors.green]; + + @override + Widget build(BuildContext context) { + return Container( + transform: Matrix4.rotationZ(-15/180*pi), + height: 250, + padding: const EdgeInsets.all(50.0), + child: ListView( + scrollDirection: Axis.horizontal, + children: [ + Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [_LogoTips(), const Text('点击图标\n显隐弹框')], + ), + ...colors.map((color) => Container(width: 80, color: color)) + ], + ), + ); + } + +} + +class _LogoTips extends StatefulWidget { + @override + _LogoTipsState createState() => _LogoTipsState(); +} + +class _LogoTipsState extends State<_LogoTips> { + OverlayEntry _overlayEntry; + + final LayerLink _layerLink = LayerLink(); + + bool show = false; + + OverlayEntry _createOverlayEntry() { + return OverlayEntry( + builder: (context) => Positioned( + width: 150, + child: CompositedTransformFollower( + link: this._layerLink, + showWhenUnlinked: false, + targetAnchor: Alignment.topRight, + child: Card( + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text('我是一个 Overlay，目标组件为图标，当它变换时，我会伴随变换。'), + ), + ), + ), + )); + } + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: _toggleOverlay, + child: CompositedTransformTarget( + link: this._layerLink, + child: + FlutterLogo( + size: 80, + ), + )); + } + + void _toggleOverlay() { + if (!show) { + _showOverlay(); + } else { + _hideOverlay(); + } + show = !show; + } + + void _showOverlay() { + _overlayEntry = _createOverlayEntry(); + Overlay.of(context).insert(_overlayEntry); + } + + void _hideOverlay() { + _overlayEntry?.remove(); + } + + @override + void dispose() { + _hideOverlay(); + super.dispose(); + } +} diff --git a/lib/views/widgets/StatelessWidget/CupertinoFullscreenDialogTransition/node1_base.dart b/lib/views/widgets/StatelessWidget/CupertinoFullscreenDialogTransition/node1_base.dart new file mode 100644 index 0000000..6dfce8a --- /dev/null +++ b/lib/views/widgets/StatelessWidget/CupertinoFullscreenDialogTransition/node1_base.dart @@ -0,0 +1,35 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +/// create by 张风捷特烈 on 2020/4/11 +/// contact me by email 1981462002@qq.com +/// +/// 说明: 219 CupertinoFullscreenDialogTransition 0 全页面过渡变换 创建一个 iOS 风格的转换，用于唤出全屏对话框。link 216 +// { +// "widgetId": 219, +// "name": '组件介绍', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【linearTransition】 : 是否线性转换 【bool】\n" +// "【primaryRouteAnimation】 : 初始路由动画 【Animation】\n" +// "【secondaryRouteAnimation】 : 第二路由动画 【Animation】", +// } + +class CupertinoFullscreenDialogTransitionDemo extends StatelessWidget { + final String info = + '和 CupertinoPageTransition 一样，该组件底层基于 SlideTransition 组件实现，' + '主要用途是模仿 iOS 风格，用于唤出全屏对话框动画过渡效果。' + '源码中唯一的使用处是 CupertinoPageRoute 处理路由跳转动画时，一般不会单独使用。' + '当【route.fullscreenDialog】为 true 时，会使用 CupertinoFullscreenDialogTransition 组件，否则使用 CupertinoPageTransition 组件。' + '其中个属性信息和 CupertinoPageTransition 组件一致，详见之。'; + + @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/StatelessWidget/CupertinoPageTransition/node1_base.dart b/lib/views/widgets/StatelessWidget/CupertinoPageTransition/node1_base.dart new file mode 100644 index 0000000..8cd35c9 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/CupertinoPageTransition/node1_base.dart @@ -0,0 +1,35 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/4/11 +/// contact me by email 1981462002@qq.com +/// +/// 说明: 216 CupertinoPageTransition 0 风格的页面过渡动画变换 提供一个 iOS 风格的页面过渡动画。 link 219 +// { +// "widgetId": 216, +// "name": 'CupertinoPageTransition 介绍', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【Widget】\n" +// "【linearTransition】 : 是否线性转换 【bool】\n" +// "【primaryRouteAnimation】 : 初始路由动画 【Animation】\n" +// "【secondaryRouteAnimation】 : 第二路由动画 【Animation】", +// } +class CupertinoPageTransitionDemo extends StatelessWidget { + final String info = + '该组件底层基于 SlideTransition 组件实现，主要用途是模仿 iOS 风格，处理页面间跳转的过渡动画。' + '源码中唯一的使用处是 CupertinoPageRoute 处理路由跳转动画时，一般不会单独使用。' + '如 A 跳转到 B， primaryRouteAnimation 和 secondaryRouteAnimation 都是一个 0.0->1.0 的动画，' + '前者用于处理 B 界面进入过渡动画；后者用于处理 A 界面被覆盖的过渡动画。' + ; + + @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/StatelessWidget/HtmlElementView/node1_base.dart b/lib/views/widgets/StatelessWidget/HtmlElementView/node1_base.dart new file mode 100644 index 0000000..d2e28d4 --- /dev/null +++ b/lib/views/widgets/StatelessWidget/HtmlElementView/node1_base.dart @@ -0,0 +1,30 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/4/11 +/// contact me by email 1981462002@qq.com +/// +/// 说明: 213 HtmlElementView 0 在 Flutter Web 的 Widget 层次结构中嵌入一个 HTML 元素。 +// { +// "widgetId": 213, +// "name": 'HtmlElementView 介绍', +// "priority": 1, +// "subtitle": +// "【child】 : 子组件 【child】\n" +// "【viewType】 : html元素唯一表识 【String】", +// } +class HtmlElementViewDemo extends StatelessWidget { + final String info = + '该组件只能用于 Flutter Web 中，嵌入 Html 元素的较为昂贵。' + '内部基于 PlatformViewLink 和 PlatformViewSurface 组件实现。'; + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.blue.withOpacity(0.1), + padding: EdgeInsets.all(10), + margin: EdgeInsets.all(10), + child: Text(info), + ); + } +}