首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >动画完成后,颤振反向动画不起作用

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

Stack Overflow用户
提问于 2019-07-05 07:04:35
回答 1查看 5.6K关注 0票数 2

下面的代码是我的示例代码,用来实现简单的滑动小部件到底部,翻译到底部的动画很好,但是当我再次点击关闭时,那就不起作用了。

我还有另一个问题,就是在代码的这一部分中使用容器的大小进行翻译:

代码语言:javascript
运行
复制
Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.50))

例如:

代码语言:javascript
运行
复制
Tween<Offset>(begin: Offset.zero, end: Offset(0.0, HEIGHT OF WIDGET ))

完整源代码:

代码语言:javascript
运行
复制
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),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-05 08:29:18

问题来自于SlideTransition小部件中子容器中的高度。按下容器的按钮

当你点击按钮时,它会移出容器,这样你就不能再点击它了。

因此,我去掉了高度,有一个全屏容器,取而代之的是,我在墨水槽周围放了一个大小的盒子,给出了和你一样的结果。

代码语言:javascript
运行
复制
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,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我不知道它是否能很好地回答你的问题。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56898100

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档