Flutter中PositionedTransition停靠至Stack子组件下方，如何获取高度？

我明白你想要实现的效果——让前景组件初始时稳稳停靠在背景内容的底部，而不是依赖固定的overhang值。这确实需要我们等布局完全完成后，获取背景的实际高度，再动态调整前景的初始位置。下面是具体的实现方案：

步骤1：用GlobalKey追踪背景组件的尺寸 #

首先，我们需要给背景组件绑定一个GlobalKey，这样就能在布局完成后获取它的渲染对象，进而拿到真实高度。在你的State类里添加这个key：

final GlobalKey _backgroundKey = GlobalKey();

然后在build方法里，把背景组件用KeyedSubtree包裹（确保key能正确关联到背景的渲染对象）：

KeyedSubtree(key: _backgroundKey, child: widget.background),

步骤2：在布局完成后获取背景高度并更新状态 #

组件第一次build完成后，我们需要等待Flutter完成帧渲染，才能准确获取到组件的尺寸。这里用WidgetsBinding.instance.addPostFrameCallback来实现，在你的initState方法里添加这段逻辑：

@override
void initState() {
  super.initState();
  // 等待第一帧渲染完成后获取背景高度
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _updateBackgroundOverhang();
  });
}

void _updateBackgroundOverhang() {
  // 获取背景组件的渲染对象
  final RenderBox? backgroundRenderBox =
      _backgroundKey.currentContext?.findRenderObject() as RenderBox?;
  
  if (backgroundRenderBox != null) {
    // 获取背景的实际高度
    final double backgroundHeight = backgroundRenderBox.size.height;
    // 更新状态里的动态overhang值
    setState(() {
      _dynamicOverhang = backgroundHeight;
    });
  }
}

别忘了在State类里定义_dynamicOverhang变量：

double _dynamicOverhang = 0.0;

步骤3：调整动画的初始位置 #

现在把原来固定的widget.overhang换成我们动态获取的_dynamicOverhang，修改_buildForeground方法里的动画起始值：

Animation<RelativeRect> rectAnimation = RelativeRectTween(
  begin: RelativeRect.fromLTRB(
    0.0,
    constraints.maxHeight - _dynamicOverhang, // 这里用动态高度
    0.0,
    0.0,
  ),
  end: const RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0),
).animate(_controller);

完整修改后的代码示例 #

class YourWidgetState extends State<YourWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  final GlobalKey _backgroundKey = GlobalKey();
  double _dynamicOverhang = 0.0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    // 等待布局完成后更新overhang
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _updateBackgroundOverhang();
    });
  }

  void _updateBackgroundOverhang() {
    final RenderBox? backgroundRenderBox =
        _backgroundKey.currentContext?.findRenderObject() as RenderBox?;
    
    if (backgroundRenderBox != null) {
      setState(() {
        _dynamicOverhang = backgroundRenderBox.size.height;
      });
    }
  }

  Widget _buildForeground(BuildContext context, BoxConstraints constraints) {
    Animation<RelativeRect> rectAnimation = RelativeRectTween(
      begin: RelativeRect.fromLTRB(
        0.0,
        constraints.maxHeight - _dynamicOverhang,
        0.0,
        0.0,
      ),
      end: const RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0),
    ).animate(_controller);

    return PositionedTransition(
      rect: rectAnimation,
      child: Material(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(15.0),
            topRight: Radius.circular(15.0),
          ),
        ),
        elevation: 16.0,
        child: widget.foreground,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) => Stack(
        children: <Widget>[
          Container(color: Theme.of(context).primaryColor),
          KeyedSubtree(key: _backgroundKey, child: widget.background),
          _buildForeground(context, constraints),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

额外提示：处理背景高度动态变化的情况 #

如果你的背景内容高度会动态变化（比如加载数据、列表滚动），可以监听尺寸变化。你可以用LayoutBuilder包裹背景组件，或者使用ResizeObserver（Flutter 3.10+支持）来实时更新_dynamicOverhang值，确保前景始终能停靠在背景底部。

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