flutter - Flutter 为 ScaleTransition 设置自定义限制

Question

ScaleTransition在这个示例代码中，当我尝试zoom-in或缩放图标时，我想将图标大小限制为 10% zoom-out，我不能这样做来限制图标

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

void main() => runApp(MyApp());

class ScaleTransitionExample extends StatefulWidget {
  _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}

class _ScaleTransitionExampleState extends State<ScaleTransitionExample> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  initState() {
    super.initState();
    _controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
    _animation = CurvedAnimation(parent: _controller, curve: Curves.ease);
    _controller.forward();
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        child: Stack(
          children: <Widget>[
            Center(
              child: ScaleTransition(
                  scale: _animation,
                  alignment: Alignment.center,
                  child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                    Icon(Icons.check, size: 100.0, color: Colors.green),
                  ])),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child:RaisedButton(
                child: Text('forward'),
                onPressed: ()=>_controller.forward(),
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child:RaisedButton(
                child: Text('reverse'),
                onPressed: ()=>_controller.reverse(),
              ),
            ),
          ],
        ));
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Example',
      home: ScaleTransitionExample(),
    );
  }
}

标签： flutter

Answer 1

你只需要Tween.

Tween<double> _tween = Tween(begin: 0.1, end: 1);

完整示例：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Example',
      home: ScaleTransitionExample(),
    );
  }
}


class ScaleTransitionExample extends StatefulWidget {
  _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}

class _ScaleTransitionExampleState extends State<ScaleTransitionExample> with TickerProviderStateMixin {
  AnimationController _controller;
  Tween<double> _tween = Tween(begin: 0.1, end: 1);

  initState() {
    super.initState();
    _controller = AnimationController(duration: const Duration(milliseconds: 1000), vsync: this);
    _controller.forward();
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Center(
            child: ScaleTransition(
              scale: _tween.animate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
              alignment: Alignment.center,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.check, size: 100.0, color: Colors.green),
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: RaisedButton(
              child: Text('forward'),
              onPressed: () => _controller.forward(),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: RaisedButton(
              child: Text('reverse'),
              onPressed: () => _controller.reverse(),
            ),
          ),
        ],
      ),
    );
  }
}