欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-11 10:53:22
...

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

这个例子展示了如何创建一个的表格
3列20行
一个for循环
行和列用不同的色彩分隔开
scaleEnabled 为 true 可以放大缩小 表格
flutter 最新版本 1.20.1 Widget之InteractiveViewer 学习总结

 @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可以实现 手势放大缩小 拖拽

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

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