Flutter中如何在Widget布局前获取其尺寸以实现自适应面包屑？

实现逻辑 #

你需要先预测量所有面包屑元素的实际宽度，再结合容器可用空间判断需要隐藏的元素，不需要等元素渲染到可见区域就可以完成计算，具体方案如下：

• 预测量所有子元素尺寸
  用Offstage组件包裹全部面包屑元素，设置offstage: true让元素不绘制到屏幕上，但会完整执行布局流程。给每个面包屑子元素绑定唯一GlobalKey，在布局回调中通过key.currentContext?.size即可拿到每个元素的精确宽高。如果你的面包屑元素都是固定样式的文本+分割线，也可以直接用TextPainter预先计算文本宽度，性能会更高。
• 计算可见元素范围
  先获取面包屑容器的可用宽度，先扣除「...」按钮本身的固定宽度，再从第一个和最后一个面包屑元素开始往中间累加宽度，直到剩余空间不足以放下下一个元素，中间放不下的元素就归入隐藏列表，刚好匹配你需要的类苹果系统面包屑展示逻辑。
• 构建最终交互布局
  空间充足时直接按顺序渲染所有面包屑元素；空间不足时渲染前后的可见元素，中间插入「...」按钮，点击按钮用自定义悬浮层或者PopupMenu组件展示被隐藏的元素即可。

注意事项 #

CustomMultiChildLayout只能在布局阶段拿到子元素尺寸，不适合提前做布局决策的场景，用Offstage预测量的方案完全可以满足你的需求，面包屑元素数量通常较少，不会带来额外的性能开销，也不会出现布局闪烁的问题。 #

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