web-dev-qa-db-ja.com

Flutter slideTransitionがアニメーションしていません

だから私は、ささいなスライド遷移要素をフラッターで作成しようとしていますが、少し苦労しています。以下は、アニメーション時間を待って、Text("hello there sailor")を表示するだけです。なぜこれがアニメーション化されないのかはわかりません-些細な例があるこの前の投稿に非常に似ているようです（ アニメーションを下にスライドさせる ）。

これは、以下のコードを呼び出す方法です：DeleteCheck(offsetBool: widget.model.deleteNotify, widthSlide: 0.50*width100) where double width100 = MediaQuery.of(context).size.width;。

誰かが私が間違っていることを見ていますか？

class DeleteCheck extends StatefulWidget{

  final offsetBool;
  final double widthSlide;

  DeleteCheck({
    Key key, 
    this.offsetBool, 
    this.widthSlide
  }): super(key: key);

  @override 
  State<StatefulWidget> createState() {
    return new _MyDeleteCheck();
  }
}

class _MyDeleteCheck extends State<DeleteCheck> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetFloat; 

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    _offsetFloat = Tween<Offset>(begin: Offset(widget.widthSlide, 0.0), end: Offset.zero)
        .animate(_controller);

    _offsetFloat.addListener((){
      setState((){});
    });

    _controller.forward();

  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double height100 = MediaQuery.of(context).size.height;
    double width100 = MediaQuery.of(context).size.width;
    return new SlideTransition(
      position: _offsetFloat,
      child: Container(
        color: Colors.cyan,
        width: 0.525*width100-3.0,
        child: Text("hello there sailor")
      )
    );
  }
}
user-interfaceanimationmobileflutterslide
7
Peter Weyand

良い知らせがあります！あなたのコードは機能しています！ :)移動する距離はhugeであるため、アニメーションは発生していないように見えます。 SlideTransition に渡される Offset は、その子のサイズに関連しています。たとえば、子供には_width: 100.0_があり、Offset(2.0, 0.0)でオフセットすると、子供は_200.0_ピクセルを右に移動します。

begin: Offset(widget.widthSlide, 0.0), end: Offset.zeroをbegin: Offset(2.0, 0.0), end: Offset.zeroに変更してみてください。テキストが画面の右から中央に向かってゆっくりとアニメーション表示されます。したがって、パラメータ化を調整するだけです。

SlideTransition changed

とにかく、コードを最適化するためのいくつかの追加提案があります。

  • 事前に構築された AnimatedWidgets を SlideTransition のように使用している場合、コントローラーのaddListenerでsetStateを呼び出す必要はありません。 AnimatedWidgetはそれ自体を処理します。したがって、次の行を削除できます。

行：

__offsetFloat.addListener((){
  setState((){});
});
_
  • また、constコンストラクターを呼び出す必要はありません。このキーワードは、newのように省略できます。コンパイラーは、それぞれの場合に最適なコンストラクターを最適化して選択します。
12
Niklas