Flutter - 设置小部件的比例

Question

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

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

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

提前致谢

Answer 1

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

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

Answer 2

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

或者，您可以为每个轴考虑一对SizeTransition 。 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);
      },
    );
  }
}

Answer 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(),
          ));