Question

您知道我们如何在过渡到新屏幕之前为小部件制作动画吗？我的意思是：

用户单击FAB，这将打开一个新屏幕
在用户单击后，FAB会立即进行动画处理以缩小直到不可见（就像本机开发中的hide函数一样）
当FAB不可见时，将触发新的屏幕转换

通过一个活动/多个片段在本机开发中实现此目标相对容易，但我找不到在flutter中实现此目标的方法：/

Answer 1

您需要使用AnimationController并为您的FAB配置它并附加AnimationStatusListener。按下FAB键后，您将启动动画，动画完成后，您将在状态监听器中导航到下一页。

我在这里为您编写了一个代码：

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: FabApp(),
      ),
    );

class FabApp extends StatefulWidget {
  _FabAppState createState() => _FabAppState();
}

class _FabAppState extends State<FabApp> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    controller.addListener(() {
      setState(() {});
    });
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Navigator.of(context).push(
          MaterialPageRoute<void>(builder: (BuildContext context) {
            return Scaffold(
              body: Text("Hi"),
            );
          }),
        );
      }
    });
    animation = Tween<double>(begin: 1, end: 0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Transform.scale(
        scale: animation.value,
        child: FloatingActionButton(onPressed: () {
          controller.forward();
        }),
      ),
    );
  }

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

Flutter：如何在触发转换之前为小部件制作动画？

1 个答案: