动画完成后颤动反向动画不起作用

Question

下面的代码是我实现简单滑动小部件到底部的示例代码，转换到底部的动画效果很好，但是当我再次点击关闭时，它不起作用

我还有另一个问题，在这部分代码中用容器的大小进行翻译：

Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.50))

例如：

Tween<Offset>(begin: Offset.zero, end: Offset(0.0, HEIGHT OF WIDGET ))

完整源代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            TopSlidingLayer(
              context,
              height: 200.0,
              backgroundColor: Colors.indigo,
              child: Container(color: Colors.green),
            )
          ],
        ),
      ),
    );
  }
}

class TopSlidingLayer extends StatefulWidget {
  final BuildContext context;
  final double height;
  final Color backgroundColor;
  final int animationSpeed;
  final Widget child;

  TopSlidingLayer(this.context, {this.height = 100.0, this.backgroundColor, this.animationSpeed = 300, @required this.child});

  @override
  State<TopSlidingLayer> createState() => _TopSlingLayerState();
}

class _TopSlingLayerState extends State<TopSlidingLayer> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offset;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: widget.animationSpeed));
    _offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.50)).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offset,
      child: Container(
        height: widget.height,
        decoration: BoxDecoration(
          color: Colors.indigo,
        ),
        child: Column(
          children: <Widget>[
            Expanded(child: widget.child),
            InkWell(
              onTap: () {
                print('tapped');
                switch (_controller.status) {
                  case AnimationStatus.completed:
                    _controller.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    _controller.forward();
                    break;
                  default:
                }
              },
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'click me',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

问题出在您的 SlideTransition 小部件中子容器的高度。 button out the container

当您点击按钮时，它会移出容器，因此您将无法再次点击它。

所以我删除了高度以获得全屏容器，而是在墨水瓶周围放置了一个尺寸框，以提供与您相同的结果。

class _TopSlingLayerState extends State<TopSlidingLayer>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offset;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: widget.animationSpeed));
    _offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.20))
        .animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _offset,
      child: Container(
        child: Column(
          children: <Widget>[
            Container(child: widget.child, height: widget.height),
            InkWell(
              onTap: () {
                print('tapped ${_controller.status}');
                switch (_controller.status) {
                  case AnimationStatus.completed:
                    _controller.reverse();
                    break;
                  case AnimationStatus.dismissed:
                    _controller.forward();
                    break;
                  default:
                }
              },
              child: SizedBox(
                width: double.infinity,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.indigo,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'click me',
                      style: TextStyle(color: Colors.white),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

不知道能不能很好的回答你的问题

动画完成后颤动反向动画不起作用

Flutter reverse animation doesn't work after animation complete

flutter

flutter-layout

flutter-animation