Flutter - 设置小部件的比例答案

【问题标题】：Flutter - Set the scale of a widgetFlutter - 设置小部件的比例
【发布时间】：2017-11-15 08:03:23
【问题描述】：

我正在尝试创建一个动画，将小部件“弹出”到前面并返回到它

import "package:flutter/material.dart";

class ScoreCounter extends StatefulWidget {
  @override
  _ScoreCounter createState() => new _ScoreCounter();
}

class _ScoreCounter extends State<ScoreCounter> with SingleTickerProviderStateMixin{
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..forward();
  }

  @override
  build(BuildContext context){
    return new AnimatedBuilder(
      animation: _controller,
      child: new Container(width: 200.0, height: 200.0, color: Colors.green),
      builder: (BuildContext context, Widget child) {
        //What to return that scales the element
      },
    );
  }
}

对于旋转，我会使用变换并返回一个矩阵。但是我应该返回什么来完成缩放动画？

提前致谢

【问题讨论】：

标签： dart flutter

【解决方案1】：

如果您要手动调整内容的大小，您可以在构建器函数中读取 controller.value 并使用它来设置容器的大小。

或者，您可以考虑为每个轴设置一对SizeTransitions。 Align 类也可能很有用，因为您可以在每个维度中设置 sizeFactor。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.sort),
        onPressed: () {},
      ),
      body: new Center(
        child: new ScoreCounter(),
      ),
    );
  }
}

class ScoreCounter extends StatefulWidget {
  @override
  _ScoreCounter createState() => new _ScoreCounter();
}

class _ScoreCounter extends State<ScoreCounter>
  with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )
      ..forward();
  }


  @override
  build(BuildContext context){
    return new AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        double size = _controller.value * 200.0;
        return new Container(width: size, height: size, color: Colors.green);
      },
    );
  }
}

【讨论】：

我正在尝试使用 SizeTransition。但是如何将 Animation 的值分配给 sizeFactor？
你的控制器是一个动画
如果你想要线性动画以外的东西，你也可以用控制器作为父级制作CurvedAnimations，或者创建Tween并使用控制器作为动画调用Tween.animate。

【解决方案2】：

作为替代方案，仅为特定 Widget 设置比例。

Transform.scale(
  scale: 1.0,
  child: Container(
    height: 200.0,
    width: 200.0,
    color: Colors.pink,
  ),
),

【讨论】：

【解决方案3】：

另一种方法是创建广义比例变换。

只需将此方法添加到您的组件中

  Matrix4 scaleXYZTransform({
    double scaleX = 1.00,
    double scaleY = 1.00,
    double scaleZ = 1.00,
  }) {
    return Matrix4.diagonal3Values(scaleX, scaleY, scaleZ);
  }

现在您可以通过包装轻松缩放任何小部件：

 Transform(
          transform: scaleXYZTransform(scaleX: .5, scaleY: .5),
          child: Container(
            child: myAwesomeWidget(),
          ));

【讨论】：