在页面抖动时按顺序淡入小部件

Question

这个问题听起来确实如此。有 2 个屏幕，屏幕 1 和 屏幕 2。 屏幕 1 有一个按钮，可导航至屏幕 2。 Screen 2 有 10 个小部件，一个接一个地在一列中，我希望它们在最后一个小部件淡入后淡入，比如说 3/4 。在颤振中执行此操作的最佳方法是什么？

Answer 1

使用

AnimatedOpacity

小部件。

下面的代码片段可能会对您有所帮助。

class Screen2 extends StatefulWidget {
  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  Timer? timer;
  int currentStep = 0;

  @override
  void initState() {
    timer = Timer.periodic(const Duration(seconds: 1), (t) {
      setState(() {
        currentStep = t.tick;
      });

      if (t.tick > 5) {
        timer?.cancel();
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen 2'),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        alignment: Alignment.center,
        child: Column(
          children: [
            const SizedBox(height: 16),
            AnimatedOpacity(
              opacity: currentStep >= 1 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: const Text(
                "First Widget",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                ),
              ),
            ),
            const SizedBox(height: 50),
            AnimatedOpacity(
              opacity: currentStep >= 2 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: const Text(
                "Second Widget",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                ),
              ),
            ),
            const SizedBox(height: 50),
            AnimatedOpacity(
              opacity: currentStep >= 3 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: const Column(
                children: [
                  Text(
                    "Third Widget",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                    ),
                  ),
                  SizedBox(height: 50),
                  Text(
                    "Fourth Widget",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 50),
            AnimatedOpacity(
              opacity: currentStep >= 4 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: ElevatedButton(
                style: const ButtonStyle(
                    backgroundColor: MaterialStatePropertyAll(Colors.cyan)),
                onPressed: () {},
                child: const Text(
                  "Fifth Widget",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}