Question

我正在着手处理光晕和颤动，现在，将动画放到颤动中而无需手动进行编码非常好。但是我不明白如何使光晕反应灵敏（如何支持不同的屏幕尺寸）。

这是启动屏幕的一部分：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color.fromRGBO(250, 224, 61, 1.0),
        body: Center(
          child: Container(
              child: FlareActor(
                "assets/flare/splash.flr",
                callback: (nameOfAnimation) =>
                    Navigator.pushReplacementNamed(context, "/login"),
                fit: BoxFit.none,
                animation: "splash",
              )),
        ));
  }

这在我的iPhone X上效果很好，因为动画是为该尺寸设计的。有什么办法可以使较小的设备使用相同的耀斑动画？使用iPhone SE进行测试会产生动画剪辑。

我希望除了为多种屏幕尺寸创建多个动画之外，还有另一种方法。

Answer 1

您可以将MediaQuery与窗口小部件的当前上下文一起使用，并在容器或大小框中获取width或height

width: MediaQuery.of(context).size.width * 0.65
   height: MediaQuery.of(context).size.width * 0.65

否则，如果只有一个小部件，则可以使用FractionallySizedBox小部件来指定要填充的可用空间的百分比

FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child:FlareActor(
                "assets/flare/splash.flr",
                callback: (nameOfAnimation) =>
                    Navigator.pushReplacementNamed(context, "/login"),
                fit: BoxFit.none,
                animation: "splash",
              )),
  );

Answer 2

只需将动画添加为SizedBox的子级，然后为其指定宽度/高度，就可以了。

如果需要，您还可以使用MediaQuery.of(context).size.width或height获取视口尺寸，并将SizedBox设置为相应地使用屏幕的百分比。

不同设备（屏幕）的耀斑和颤动

2 个答案: