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,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我不知道它是否能很好地解决您的问题。

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

1 个答案: