✨ 增加InteractiveViewer

2020-08-10 10:48:48 +08:00
parent ea81279ac4
commit 5cd9ab84d4
7 changed files with 286 additions and 4 deletions
--- 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
 ```

 ---
--- a/assets/flutter.db
+++ b/assets/flutter.db
--- a/lib/views/widgets/StatefulWidget/InteractiveViewer/node1_base.dart
+++ 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());
+  }
+}
--- a/lib/views/widgets/StatefulWidget/InteractiveViewer/node2_constrained.dart
+++ 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: <int, TableColumnWidth>{
+            for (int column = 0; column < _columnCount; column += 1)
+              column: const FixedColumnWidth(150.0),
+          },
+          children: buildRows(_rowCount, _columnCount),
+        ),
+      ),
+    );
+  }
+
+  List<TableRow> buildRows(int rowCount, int columnCount) {
+    return <TableRow>[
+          for (int row = 0; row < rowCount; row += 1)
+            TableRow(
+              children: <Widget>[
+                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];
+}
--- a/lib/views/widgets/StatefulWidget/InteractiveViewer/node3_controller.dart
+++ 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<InteractiveViewerDemo3>
+    with SingleTickerProviderStateMixin {
+  final TransformationController _transformationController =
+      TransformationController();
+  Animation<Matrix4> _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;
+        });
+  }
+}
--- 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';
--- 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(),