Flutter，Transform.scale with Duration？答案

【问题标题】：Flutter, Transform.scale with Duration?Flutter，Transform.scale with Duration？
【发布时间】：2021-10-13 07:56:14
【问题描述】：

您好，我正在寻找一个带有 Duration(毫秒：300..) 的 Transform.scale 示例

我可以看一个例子吗？

我搜过没有例子

【问题讨论】：

AnimatedScale
@pskink 嗨，那么有没有办法与 Transform.scale 一起使用？我想练习变换样式
当然你可以在AnimatedBuilder中使用Transform.scale（并在AnimationController的帮助下）
@pskink 你能分享一下代码吗？？
flutter.dev/docs/development/ui/animations/…

标签： flutter flutter-layout flutter-animation

【解决方案1】：

Flutter 中有两种动画：隐式和显式。在您的情况下，您似乎想要一个隐式小部件来动画某些东西的规模变化。幸运的是，有一个为您准备的小部件，名为 AnimatedScale。如果这适合您的需要，您应该更喜欢使用该小部件。如果没有，例如，如果您想应用其他更高级的转换，您可以尝试使用 Transform 小部件和 TweenAnimationBuilder 以保持在“隐式动画”中。这样你就可以避免处理AnimationController，并且可以让你的代码简洁。

完整示例，将main.dart 替换为以下代码以运行它。单击按钮将在 1.0x 和 5.0x 比例之间切换 Flutter Logo：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _big = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            AnimatedScale(
              duration: Duration(seconds: 1),
              scale: _big ? 5.0 : 1.0,
              child: FlutterLogo(),
            ),
            ElevatedButton(
              child: Text('change size'),
              onPressed: () => setState(() => _big = !_big),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

【解决方案2】：

你可以这样使用

class TransformWithDuration extends StatefulWidget {
  final Widget child;
  final void Function()? onTap;
  final void Function()? onLongTap;
  const TransformWithDuration({Key? key, required this.child, this.onTap, this.onLongTap}) : super(key: key);

  @override
  _TransformWithDurationState createState() => _TransformWithDurationState();
}

class _TransformWithDurationState extends State<TransformWithDuration>
    with TickerProviderStateMixin {
  double squareScaleA = 1;
  late AnimationController _controllerA;

  @override
  void initState() {
    _controllerA = AnimationController(
      vsync: this,
      lowerBound: 0.94,
      upperBound: 1.0,
      value: 1,
      duration: Duration(milliseconds: 200),
    );
    _controllerA.addListener(() {
      setState(() {
        squareScaleA = _controllerA.value;
      });
    });

    _controllerA.drive(CurveTween(curve: Curves.fastOutSlowIn));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        _controllerA.reverse();
        if (widget.onTap != null) widget.onTap!();
      },
      onTapDown: (dp) {
        _controllerA.reverse();
      },
      onTapUp: (dp) {
        Timer(Duration(milliseconds: 150), () {
          _controllerA.fling();
        });
      },
      onTapCancel: () {
        _controllerA.fling();
      },
      onLongPress: () {
        if (widget.onLongTap != null) widget.onLongTap!();
      },
      child: Transform.scale(
        scale: squareScaleA,
        child: widget.child,
      ),
    );
  }

  @override
  void dispose() {
    _controllerA.dispose();
    super.dispose();
  }
}

【讨论】：