diff --git a/README.md b/README.md index 73558c0..2ccf7c4 100644 --- a/README.md +++ b/README.md @@ -31,10 +31,10 @@ ``` a1@toly ~ % flutter --version -Flutter 1.17.4 • channel stable • https://github.com/flutter/flutter.git -Framework • revision 1ad9baa8b9 (4 weeks ago) • 2020-06-17 14:41:16 -0700 -Engine • revision ee76268252 -Tools • Dart 2.8.4 +Flutter 1.20.1 • channel stable • https://github.com/flutter/flutter.git +Framework • revision 2ae34518b8 (2 days ago) • 2020-08-05 19:53:19 -0700 +Engine • revision c8e3b94853 +Tools • Dart 2.9.0 ``` --- diff --git a/assets/flutter.db b/assets/flutter.db index 717bfd3..f794d19 100644 Binary files a/assets/flutter.db and b/assets/flutter.db differ diff --git a/lib/views/widgets/StatefulWidget/InteractiveViewer/node1_base.dart b/lib/views/widgets/StatefulWidget/InteractiveViewer/node1_base.dart new file mode 100644 index 0000000..e34cccc --- /dev/null +++ b/lib/views/widgets/StatefulWidget/InteractiveViewer/node1_base.dart @@ -0,0 +1,57 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: 351 InteractiveViewer 交互视图 主要对移动、缩放等手势交互进行封装，简化使用，可指定移动边界、缩放比例、手势监听等。 +// { +// "widgetId": 351, +// "name": "InteractiveViewer基本使用", +// "priority": 1, +// "subtitle": "【alignPanAxis】 : 沿轴拖动 【bool】\n" +// "【boundaryMargin】 : 边界边距 【EdgeInsets】\n" +// "【panEnabled】 : 是否可平移 【bool】\n" +// "【scaleEnabled】 : 是否可缩放 【bool】\n" +// "【maxScale】 : 最大放大倍数 【double】\n" +// "【minScale】 : 最小缩小倍数 【double】\n" +// "【onInteractionEnd】 : 交互结束回调 【GestureScaleEndCallback】\n" +// "【onInteractionStart】 : 交互开始回调 【GestureScaleStartCallback】\n" +// "【onInteractionUpdate】 : 交互更新回调 【GestureScaleUpdateCallback】\n" +// "【child】 : 游标颜色 【Widget】", +// } + +class InteractiveViewerDemo extends StatelessWidget { + + @override + Widget build(BuildContext context) { + return Container( + height: 150, + color: Colors.grey.withAlpha(33), + child: InteractiveViewer( + boundaryMargin: EdgeInsets.all(40.0), + maxScale: 2.5, + minScale: 0.3, + panEnabled: true, + scaleEnabled: true, + child: Container( + child: Image.asset('assets/images/caver.jpeg'), + ), + onInteractionStart: _onInteractionStart, + onInteractionUpdate: _onInteractionUpdate, + onInteractionEnd: _onInteractionEnd, + ), + ); + } + + void _onInteractionStart(ScaleStartDetails details) { + print('onInteractionStart----' + details.toString()); + } + + void _onInteractionUpdate(ScaleUpdateDetails details) { + print('onInteractionUpdate----' + details.toString()); + } + + void _onInteractionEnd(ScaleEndDetails details) { + print('onInteractionEnd----' + details.toString()); + } +} diff --git a/lib/views/widgets/StatefulWidget/InteractiveViewer/node2_constrained.dart b/lib/views/widgets/StatefulWidget/InteractiveViewer/node2_constrained.dart new file mode 100644 index 0000000..ecb1c76 --- /dev/null +++ b/lib/views/widgets/StatefulWidget/InteractiveViewer/node2_constrained.dart @@ -0,0 +1,59 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 351, +// "name": "constrained属性测试", +// "priority": 2, +// "subtitle": "【constrained】 : 受约束的 【bool】", +// } + +class InteractiveViewerDemo2 extends StatelessWidget { + + Widget build(BuildContext context) { + const int _rowCount = 20; + const int _columnCount = 4; + + return Container( + width: 300, + height: 200, + child: InteractiveViewer( + constrained: false, + scaleEnabled: false, + child: Table( + columnWidths: { + for (int column = 0; column < _columnCount; column += 1) + column: const FixedColumnWidth(150.0), + }, + children: buildRows(_rowCount, _columnCount), + ), + ), + ); + } + + List buildRows(int rowCount, int columnCount) { + return [ + for (int row = 0; row < rowCount; row += 1) + TableRow( + children: [ + for (int column = 0; column < columnCount; column += 1) + Container( + margin: EdgeInsets.all(2), + height: 50, + alignment: Alignment.center, + color: _colorful(row,column), + child: Text('($row,$column)',style: TextStyle(fontSize: 20,color: Colors.white),), + ), + ], + ), + ]; + } + + final colors = [Colors.red,Colors.yellow,Colors.blue,Colors.green]; + final colors2 = [Colors.yellow,Colors.blue,Colors.green,Colors.red]; + + _colorful(int row, int column ) => row % 2==0?colors[column]:colors2[column]; +} diff --git a/lib/views/widgets/StatefulWidget/InteractiveViewer/node3_controller.dart b/lib/views/widgets/StatefulWidget/InteractiveViewer/node3_controller.dart new file mode 100644 index 0000000..c1a84ff --- /dev/null +++ b/lib/views/widgets/StatefulWidget/InteractiveViewer/node3_controller.dart @@ -0,0 +1,157 @@ +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; + +/// create by 张风捷特烈 on 2020/7/22 +/// contact me by email 1981462002@qq.com +/// 说明: +// { +// "widgetId": 351, +// "name": "变换控制器的使用", +// "priority": 3, +// "subtitle": "【transformationController】 : 变换控制器 【TransformationController】", +// } + +class InteractiveViewerDemo3 extends StatefulWidget { + @override + _InteractiveViewerDemo3State createState() => _InteractiveViewerDemo3State(); +} + +class _InteractiveViewerDemo3State extends State + with SingleTickerProviderStateMixin { + final TransformationController _transformationController = + TransformationController(); + Animation _animationReset; + AnimationController _controllerReset; + + void _onAnimateReset() { + _transformationController.value = _animationReset.value; + if (!_controllerReset.isAnimating) { + _animationReset?.removeListener(_onAnimateReset); + _animationReset = null; + _controllerReset.reset(); + } + } + + void _animateResetInitialize() { + _controllerReset.reset(); + _animationReset = Matrix4Tween( + begin: _transformationController.value, + end: Matrix4.identity(), + ).animate(_controllerReset); + _animationReset.addListener(_onAnimateReset); + _controllerReset.forward(); + } + + void _animateResetStop() { + _controllerReset.stop(); + _animationReset?.removeListener(_onAnimateReset); + _animationReset = null; + _controllerReset.reset(); + } + + void _onInteractionStart(ScaleStartDetails details) { + if (_controllerReset.status == AnimationStatus.forward) { + _animateResetStop(); + } + } + + @override + void initState() { + super.initState(); + _controllerReset = AnimationController( + vsync: this, + duration: const Duration(milliseconds: 400), + ); + } + + @override + void dispose() { + _controllerReset.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Wrap( + direction: Axis.vertical, + spacing: 10, + crossAxisAlignment: WrapCrossAlignment.center, + alignment: WrapAlignment.center, + children: [ + Container( + height: 150, + color: Colors.grey.withAlpha(33), + child: InteractiveViewer( + boundaryMargin: EdgeInsets.all(40), + transformationController: _transformationController, + minScale: 0.1, + maxScale: 1.8, + onInteractionStart: _onInteractionStart, + child: Container( + child: Image.asset('assets/images/caver.jpeg'), + ), + ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + _buildButton(), + _buildButton2(), + _buildButton3(), + ], + ) + ], + ); + } + + Widget _buildButton() { + return MaterialButton( + child: Icon( + Icons.refresh, + color: Colors.white, + ), + color: Colors.green, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: _animateResetInitialize); + } + + var _x = 0.0; + + Widget _buildButton2() { + return MaterialButton( + child: Icon( + Icons.navigate_before, + color: Colors.white, + ), + color: Colors.green, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: () { + var temp = _transformationController.value.clone(); + temp.translate(_x - 4); + _transformationController.value = temp; + }); + } + + Widget _buildButton3() { + return MaterialButton( + child: Icon( + Icons.navigate_next, + color: Colors.white, + ), + color: Colors.green, + shape: CircleBorder( + side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)), + ), + onPressed: () { + var temp = _transformationController.value.clone(); + temp.translate(_x + 4); + _transformationController.value = temp; + }); + } +} diff --git a/lib/views/widgets/exp/stateful_unit.dart b/lib/views/widgets/exp/stateful_unit.dart index 988235d..b0ae18e 100644 --- a/lib/views/widgets/exp/stateful_unit.dart +++ b/lib/views/widgets/exp/stateful_unit.dart @@ -31,6 +31,9 @@ export '../StatefulWidget/CupertinoSwitch/node1_base.dart'; export '../StatefulWidget/CupertinoSegmentedControl/node1_base.dart'; export '../StatefulWidget/CupertinoSegmentedControl/node2_color.dart'; export '../StatefulWidget/Navigator/node1_base.dart'; +export '../StatefulWidget/InteractiveViewer/node1_base.dart'; +export '../StatefulWidget/InteractiveViewer/node2_constrained.dart'; +export '../StatefulWidget/InteractiveViewer/node3_controller.dart'; export '../StatefulWidget/Image/node1_base.dart'; export '../StatefulWidget/Image/node2_fit.dart'; diff --git a/lib/views/widgets/widgets_map.dart b/lib/views/widgets/widgets_map.dart index cc98df7..9d849db 100644 --- a/lib/views/widgets/widgets_map.dart +++ b/lib/views/widgets/widgets_map.dart @@ -134,6 +134,12 @@ class WidgetsMap { return [ CustomFadeInImage(), ]; + case "InteractiveViewer": + return [ + InteractiveViewerDemo(), + InteractiveViewerDemo2(), + InteractiveViewerDemo3(), + ]; case "CircleAvatar": return [ CustomCircleAvatar(),