Flutter技术问询：如何在子组件每次渲染完成时调用父组件函数以适配父组件高度

这个问题的核心是子组件完成异步加载并切换到目标组件后，父组件需要感知到这个渲染变化并重新计算自身高度。你目前的实现只在父组件第一次渲染完成后执行了一次高度计算，但子组件从CircularProgressIndicator切换到CentralisedAssetLoader时，父组件没有收到任何通知，自然无法更新高度。

最直接的解决方案是通过回调函数让子组件在完成加载并渲染完目标组件后，主动通知父组件触发高度计算。下面是具体的实现步骤和修改后的代码：

步骤说明 #

1. 给CustomChildWidget添加一个回调参数，用于在加载完成后通知父组件
2. 在子组件的异步加载完成并调用setState更新isLoaded后，调用这个回调函数
3. 父组件在创建子组件时，传入回调函数，触发自身的高度计算逻辑

修改后的完整代码 #

class CustomParentWidget extends StatefulWidget {
  CustomParentWidget();
  @override
  _CustomParentWidgetState createState() => _CustomParentWidgetState();
}

class _CustomParentWidgetState extends State<CustomParentWidget> {
  double widgetHeight;

  @override
  void initState() {
    // 初始渲染后执行一次计算（可选，用于获取加载状态的高度）
    WidgetsBinding.instance.addPostFrameCallback((_) => calculateWidgetHeight());
    super.initState();
  }

  void calculateWidgetHeight() {
    setState(() {
      widgetHeight = getWidgetHeight(); // 这里替换为你实际获取高度的逻辑
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 传入回调，子组件加载完成后会触发这个方法
      child: CustomChildWidget(height: widgetHeight, onLoaded: calculateWidgetHeight),
    );
  }
}

class CustomChildWidget extends StatefulWidget {
  final double height;
  final VoidCallback onLoaded; // 添加回调参数

  CustomChildWidget({this.height, this.onLoaded});

  @override
  _CustomChildWidgetState createState() => _CustomChildWidgetState();
}

class _CustomChildWidgetState extends State<CustomChildWidget> {
  double _height;
  double _width;
  bool isLoaded;

  @override
  void initState() {
    isLoaded = false;
    prepareData();
    super.initState();
  }

  void prepareData() async {
    try {
      _height = getheight(); // 你的异步获取高度逻辑
      _width = getwidth(); // 你的异步获取宽度逻辑
    } catch (error) {
      // 按需处理错误情况
    }
    setState(() {
      isLoaded = true;
    });

    // 加载完成后，确保子组件渲染完成再通知父组件
    if (widget.onLoaded != null) {
      WidgetsBinding.instance.addPostFrameCallback((_) => widget.onLoaded());
    }
  }

  @override
  Widget build(BuildContext context) {
    final screenMaxWidth = MediaQuery.of(context).size.width;
    if (!isLoaded) {
      return CircularProgressIndicator();
    }
    return Container(
      width: min(screenMaxWidth, _width),
      height: _height,
      child: CentralisedAssetLoader(
        fit: BoxFit.contain,
        assetIdentifier: assetIdentifier, // 注意这里需要确保assetIdentifier已定义
      ),
    );
  }
}

关键细节解释 #

• 在子组件的prepareData方法中，我们在setState之后使用WidgetsBinding.instance.addPostFrameCallback来调用父组件的回调，这是为了确保子组件已经完成了从加载状态到目标组件的渲染，此时父组件计算高度才能拿到CentralisedAssetLoader的真实高度。
• 父组件initState中的初始addPostFrameCallback是可选的，如果你不需要获取加载状态下的高度，可以直接移除。
• 回调函数是Flutter中父子组件通信的常用手段，简单直接，非常适合这种状态变化通知的场景。

内容的提问来源于stack exchange，提问作者Mohan Raj