Обратная анимация флаттера не работает после завершения анимации - PullRequest
Новая
       18

Обратная анимация флаттера не работает после завершения анимации

0 голосов
/ 05 июля 2019

код ниже - мой пример кода для реализации простого скользящего виджета снизу, анимация перевода в низ работает нормально, но когда я нажимаю снова, чтобы закрыть, это не работает

и у меня есть еще одна проблема: перевод с размером контейнера в этой части кода: 

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

1 Ответ

1 голос
/ 05 июля 2019

Проблема связана с высотой дочернего контейнера в виджете SlideTransition. застегнуть контейнер

Когда вы нажимаете кнопку, она выходит из контейнера, поэтому вы не сможете нажать на нее снова.

Итак, я убрал высоту, чтобы получить полноэкранный контейнер, и вместо этого я поместил размерную коробку вокруг чернильницы, чтобы получить тот же результат, что и у вас. 

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

Я не знаю, хорошо ли это отвечает вашей проблеме.

...