Question

我有这样的东西：

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  bool loading = true;

  @override
  Widget build(BuildContext context) {
    if(loading) {
      return Container(
        color: Theme.of(context).scaffoldBackgroundColor,
        child: Center(
          child: SizedBox(
            width: 24,
            height: 24,
            child: GestureDetector(
              onTap: _toggle,
              child: CircularProgressIndicator(),
            ),
          ),
        ),
      );
    } else {
      return Container(
        child: Center(
          child: GestureDetector(
            onTap: _toggle,
            child: Text("WELCOME"),
          ),
        ),
      );
    }
  }

  _toggle() {
    setState(() {
      loading = !loading;
    });
  }
}

我遇到的最大问题是在切换小部件之间设置动画

我想在_toggle调用时加载小部件fadeOut，并在动画完成后从屏幕上删除，然后显示具有fadeIn效果的普通小部件

我如何做到这一点？

谢谢

Answer 1

正确的方法是使用AnimatedSwitcher小部件：

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  bool loading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedSwitcher(
        duration: Duration(milliseconds: 300),
        child: loading ? Container(
          key: UniqueKey(),
          color: Theme.of(context).scaffoldBackgroundColor,
          child: Center(
            child: SizedBox(
              width: 24,
              height: 24,
              child: GestureDetector(
                onTap: _toggle,
                child: CircularProgressIndicator(),
              ),
            ),
          ),
        ) : Container(
          key: UniqueKey(),
          child: Center(
            child: GestureDetector(
              onTap: _toggle,
              child: Text("WELCOME"),
            ),
          ),
        ),
      ),
    );
  }

  _toggle() {
    setState(() {
      loading = !loading;
    });
  }
}

注意：在您的示例中，如果删除key动画无效，则必须为孩子提供key: UniqueKey()

Answer 2

Select-Object -Skip 1

动动显示或隐藏窗口小部件的动画

2 个答案: