Flutter WidgetsBinding.instance.addPostFrameCallback

1,153 阅读1分钟

测试WidgetsBinding.instance.addPostFrameCallback回调时机

WidgetsBinding.instance.addPostFrameCallback会在

Widget build(BuildContext context)

执行第一帧结束后回调

WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
  setState(() {
    ///build()执行结束后
    ///timeStamp build()
    ///执行步骤2时间戳
    _text = "$_text \n add timeStamp: $timeStamp";
    _text = "$_text \n 2";
  });
});

案例

import 'package:flutter/material.dart';

class WBinding extends StatefulWidget {
  const WBinding({super.key});

  @override
  State<StatefulWidget> createState() => _WBindingState();
}

class _WBindingState extends State<WBinding>
    with SingleTickerProviderStateMixin {
  ///默认数据
  String _text = "测试WidgetsBinding.instance.addPostFrameCallback";

  late AnimationController _animationController;

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

    _animationController = AnimationController(
        vsync: this,
        lowerBound: 0,
        upperBound: 1,
        duration: const Duration(milliseconds: 3000))
      ..forward();

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      setState(() {
        ///build()执行结束后
        ///timeStamp build()
        ///执行步骤2时间戳
        _text = "$_text \n add timeStamp: $timeStamp";
        _text = "$_text \n 2";
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    ///执行步骤1
    _text = "$_text \n 1";
    return Scaffold(
      body: Center(
        child: Builder(
          builder: (context) {
            ///测试动画回是否会影响addPostFrameCallback回调
            ///本案例测试结果不会影响
            return AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) {
                return Transform.scale(
                  scale: _animationController.value,
                  child: Text(
                    _text,
                    textAlign: TextAlign.center,
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}