代码之家 › 专栏 › 技术社区 › Stéphane de Luca

为什么有一个大小的盒子会在堆栈中移动兄弟姐妹?

transform widget flutter

Stéphane de Luca · 技术社区 · 4 年前

我正在努力学习Flitter处理小部件定位的方式。

背景:我的目标是用一辆移动的汽车和一个汽油泵来布置一个动画场景;根据设备的方位,我想将观看者的眼睛(泵的位置)缩放并定位在屏幕中央,就像我在iPhone上使用本机Swift版本时所做的那样,如下所示:

景观模式:

肖像模式:

在尝试使用Flatter实现这一点时,我面临着各种问题,其中一个问题是调试小部件的存在会将其他小部件从同一堆栈中移出:

它以堆栈中的SizedBox为中心

但没有它就没有了:

我的代码如下,可以在这里找到一个最小的省道版本: https://dartpad.dev/?id=ccd214b1efacb61b158f6f0c2092e809


Widget buildScene(Size size, /* double scale,*/ bool debug) {
    final hill = Hill(size: size);

    final punmpOffsetX = size.width / 4;

    // == Build the scene
    return Stack(clipBehavior: Clip.none, children: [
      // == The whole scene debug materialisation 
      if (debug). => THIS IS WHAT I TOGGLE WHICH MOVES THE REST OF THE SCENE
      SizedBox(
          width: size.width,
          height: size.height,
          child: Container(
            color: const Color(0x7ff67e22),
          )),

      // == Add the sky
      ...widget.clouds,

      // == Add ground
      hill,

      // == The pump
      Transform.translate(
          offset: Offset(punmpOffsetX /*- 115 / 2*/, 120),
          child: Container(
              width: 150,
              child: ScaleTransition(
                  scale: Tween<double>(begin: 3, end: 1).animate(
                      CurvedAnimation(
                          parent: _controller, curve: Curves.elasticOut)),
                  child: Pump(offset: Offset.zero, width: 150)))),

      // == The animated vehicle
      DrivingVehicle(hill: hill),

0 回复 | 直到 4 年前

Stéphane de Luca 4 年前

我终于找到了一个解决方案,它包括使用Positioned()Widget到absolute position Widget。使改变translate向呈现流中的小部件当前位置添加一个翻译,这就是为什么移除一个小部件会使其余的小部件移动。

代码变成:


    // == Build the scene
    return Stack(clipBehavior: Clip.none, children: [
      // == The whole scene debug materialisation 
      if (debug)
      Positioned(left: 0, top: 0, child: SizedBox(
          width: size.width,
          height: size.height,
          child: Container(
            color: const Color(0x7ff67e22),
          ))),

    
      // == Add ground
      Positioned(left: 0, top: 0, child: hill),

      // == The pump
      Positioned(left: punmpOffsetX, top: 120, child: 
          offset: Offset(punmpOffsetX /*- 115 / 2*/, 120),
          child: Container(
              width: 150,
              child: ScaleTransition(
                  scale: Tween<double>(begin: 3, end: 1).animate(
                      CurvedAnimation(
                          parent: _controller, curve: Curves.elasticOut)),
                  child: Pump(offset: Offset.zero, width: 150)))),

      // == The animated vehicle
      Positioned(left: 0, top: 0, child: DrivingVehicle(hill: hill)),