flutter 最新版本 1.20.1 Widget之InteractiveViewer 学习总结

flutter 最新版本 1.20.1 InteractiveViewer 学习总结
Flutter 1.20版本引入了一个新的小部件 InteractiveViewer。该 InteractiveViewer 设计用于建设普通类型的交互性到应用程序，如: 平移，缩放和拖动“N”下降甚至大小调整，

这个例子展示了如何创建一个的表格
3列20行
一个for循环
行和列用不同的色彩分隔开
scaleEnabled 为 true 可以放大缩小 表格

 @override
     Widget build(BuildContext context) {
       const int _rowCount = 20;
       const int _columnCount = 3;

       return Scaffold(
         appBar: AppBar(
           title: const Text('Pannable Table'),
         ),
         body: InteractiveViewer(
           constrained: false,
           scaleEnabled: false,
           child: Table(
             columnWidths: <int, TableColumnWidth>{
               for (int column = 0; column < _columnCount; column += 1)
                 column: const FixedColumnWidth(300.0),
             },
             children: <TableRow>[
               for (int row = 0; row < _rowCount; row += 1)
                 TableRow(
                   children: <Widget>[
                     for (int column = 0; column < _columnCount; column += 1)
                       Container(
                         height: 100,
                         color: row % 2 + column % 2 == 1 ? Colors.black26 : Colors.black12,
                       ),
                   ],
                 ),
             ],
           ),
         ),
       );
     }

子view可以实现 手势放大缩小 拖拽

state 实现   with TickerProviderStateMixin{

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();
 }

 // Stop a running reset to home transform animation.
 void _animateResetStop() {
   _controllerReset.stop();
   _animationReset?.removeListener(_onAnimateReset);
   _animationReset = null;
   _controllerReset.reset();
 }

 void _onInteractionStart(ScaleStartDetails details) {
   // If the user tries to cause a transformation while the reset animation is
   // running, cancel the reset animation.
   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 Scaffold(
     backgroundColor: Theme.of(context).colorScheme.primary,
     appBar: AppBar(
       automaticallyImplyLeading: false,
       title: const Text('Controller demo'),
     ),
     body: Center(
       child: InteractiveViewer(
         boundaryMargin: EdgeInsets.all(double.infinity),
         transformationController: _transformationController,
         minScale: 0.1,
         maxScale: 1.0,
         onInteractionStart: _onInteractionStart,
       child:   Container(
         decoration: BoxDecoration(
             gradient: LinearGradient(
               begin: Alignment.topCenter,
               end: Alignment.bottomCenter,
               colors: <Color>[Colors.orange, Colors.red],
               stops: <double>[0.0, 1.0],
             ),
           ),
         ),
       ),
     ),
     persistentFooterButtons: [
       IconButton(
         onPressed: _animateResetInitialize,
         tooltip: 'Reset',
         color: Theme.of(context).colorScheme.surface,
         icon: const Icon(Icons.replay),
       ),
     ],
   );
 }

学习flutter 可以详细查看下面这篇文章，flutter UI框架已经成功。可以直接使用
flutter demo

可以在github上查看
https://github.com/1136346879/flutter_shop