Question

我遇到了一个非常奇怪的问题。这就像某种类型的混乱吗？

如果我这样编写动画，它会按预期工作：

Widget _animatedButtonsBuilder(BuildContext context, LoginState state) {
    final animTarget = state.isPhoneNumberFocused
        ? _controller.lowerBound
        : _controller.upperBound;

    _controller.animateTo(animTarget);

    final double width = MediaQuery.of(context).size.width;
    //final transform = Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0);

    return AnimatedBuilder(
        animation: _controller,
        builder: (BuildContext context, Widget child) {
          return Transform(
            transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0),
            child: new RaisedButton(
              child: const Text('Login'),
              color: Color(0xff938065),
              elevation: 4.0,
              splashColor: Colors.blueGrey,
              textColor: Color(0xffffffff),
              onPressed: () {},
          ));
    });
  }

但如果我取消评论

//final transform = Matrix4.transla...

并将其传递给transform:参数，它似乎无法正常工作。

发生了什么事？

Answer 1

我认为要获得相同的结果，您需要将生产线移至构建器中，因为每次动画进行时都会执行该操作，而不仅仅是在动画开始时执行。

Widget _animatedButtonsBuilder(BuildContext context, LoginState state) {
    final animTarget = state.isPhoneNumberFocused
        ? _controller.lowerBound
        : _controller.upperBound;

    _controller.animateTo(animTarget);

    final double width = MediaQuery.of(context).size.width;

    return AnimatedBuilder(
        animation: _controller,
        builder: (BuildContext context, Widget child) {
          //final transform = Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0);

          return Transform(
            transform: Matrix4.translationValues(_animation.value * width, 0.0, 0.0)..scale(1.0, 1.0-_animation.value, 1.0),
            child: new RaisedButton(
              child: const Text('Login'),
              color: Color(0xff938065),
              elevation: 4.0,
              splashColor: Colors.blueGrey,
              textColor: Color(0xffffffff),
              onPressed: () {},
          ));
    });
  }

间接传递给Transform的Matrix4参数的行为不同

1 个答案: