需要对 FractionallySizedBox 的子项大小进行动画处理

Question

我正在研究一些关于如何实现布局的理论。简单的版本是我有一个

Container

并且我允许其大小由其父级

FractionallySizedBox

确定。在方向改变（有意计算）时，由

FractionallySizedBox

计算的尺寸会正确变化，但它是瞬时的，而不是动画的。

我希望它能够以动画方式显示大小变化，但请注意 AnimatedSize 不会按我需要的方式工作，因为它的行为实际上更像是动画剪辑器。 AnimatedSize 的子级实际上会立即更改，AnimatedSize 会对其大小进行动画处理，以在动画时显示更多或更少的子级。这不是期望的行为。我正在寻找放大和缩小。

计算方向的原因是它适用于所有平台，并且桌面和网络不会报告方向据我所知。但通过比较高度和宽度，我可以确定宽度和高度哪个更宽。

感谢您提供放大和缩小尺寸的帮助。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Layouts',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: AdaptiveRotationTest(title: 'Adaptive Rotation Test'),
    );
  }
}

class AdaptiveRotationTest extends StatelessWidget {
  AdaptiveRotationTest({Key key, this.title}) : super(key: key);

  final String title;
  double screenHeight;
  double screenWidth;
  double borderWidth;
  bool isPortrait;

  @override
  Widget build(BuildContext context) {
    screenHeight = MediaQuery.of(context).size.height;
    screenWidth = MediaQuery.of(context).size.width;
    borderWidth = min(screenWidth, screenHeight) * 0.02;
    isPortrait = screenHeight > screenWidth ? true : false;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Adaptive Rotation Test'),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        color: Colors.yellow,
        child: Container(
          padding: EdgeInsets.all(borderWidth),
          child: Stack(
            children: <Widget>[
              AnimatedAlign(
                duration: const Duration(milliseconds: 500),
                alignment: Alignment(
                  isPortrait == true ? -0.9 : 0.9,
                  isPortrait == true ? -0.9 : 0.9,
                ),
                ///
                /// Need to animate the size, without knowing the size since it's calculated as heightFactor and widthFactor.
                /// Also, AnimatedSize behaves more like an AnimatedClipper over a Container that changes size instantly, which
                /// is not what we're going for. We're looking to zoom in or out.
                child: FractionallySizedBox(
                  heightFactor: isPortrait == true ? 0.3 : 0.5,
                  widthFactor: .5,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 500),
                    color: isPortrait == true ? Colors.purple : Colors.green,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

现在有一个专门的类： 动画FractionallySizedBox

文档中的用法：

child: AnimatedFractionallySizedBox(
          widthFactor: selected ? 0.25 : 0.75,
          heightFactor: selected ? 0.75 : 0.25,
          alignment: selected ? Alignment.topLeft : Alignment.bottomRight,
          duration: const Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
          child: const ColoredBox(
            color: Colors.blue,
            child: FlutterLogo(size: 75),
          ),
        ),

实际上我自己错过了并实现了其他东西🙈