Flutter开发：如何在运行时获取构建完成后的Widget尺寸

你当前使用的是开启了shrinkWrap: true的ListView，会根据子项总高度自适应自身尺寸，可通过以下方式获取渲染完成后的实际高度：

步骤1：给ListView绑定GlobalKey #

在State类中定义全局Key，绑定到目标ListView上：

// State类内定义GlobalKey
final GlobalKey _listViewKey = GlobalKey();

给你的ListView添加key属性：

ListView.builder(
  key: _listViewKey, // 新增此行绑定Key
  shrinkWrap: true,
  itemCount: 4,
  itemBuilder: (BuildContext context, int index) {
    return Padding(
      padding: EdgeInsets.only(left: index * 12),
      child: UserComment(),
    );
  },
)

步骤2：监听布局完成回调读取高度 #

不可在initState或build方法中直接读取高度，此时布局尚未渲染完成，需要通过addPostFrameCallback监听第一帧渲染完成事件后再读取：

@override
void initState() {
  super.initState();
  // 监听页面首次渲染完成回调
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _getListViewActualHeight();
  });
}

/// 封装读取ListView高度的方法
void _getListViewActualHeight() {
  if (_listViewKey.currentContext == null) return;
  // 获取ListView对应的渲染对象
  final RenderBox renderBox = _listViewKey.currentContext!.findRenderObject() as RenderBox;
  // 读取实际高度
  final double height = renderBox.size.height;
  // 此处可自行处理拿到的高度，比如赋值给状态变量
  debugPrint("ListView实际高度为：$height");
}

步骤3：itemCount动态变化时重新获取高度 #

如果你的itemCount是动态变量，每次修改itemCount触发重绘后，再发起一次高度读取即可：

void changeItemCount(int newCount) {
  setState(() {
    itemCount = newCount;
  });
  // 等待重绘完成后重新读取高度
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _getListViewActualHeight();
  });
}

注意事项 #

• 必须保证shrinkWrap: true处于开启状态，若为默认滚动模式、撑满父容器的ListView，读取到的高度是父容器分配的最大可用高度，不是子项总高度
• 如果UserComment组件包含异步加载内容（如网络图片、接口拉取的文本），需要等内容加载完成后再读取高度，否则只会拿到占位状态的高度，可在UserComment的加载完成回调中额外触发一次高度读取

内容的提问来源于stack exchange，提问作者Shovan Shah