Flutter如何获取headerSliverBuilder内所有Sliver的Y轴偏移量

需要在Flutter中获取Sliver组件的Y轴偏移量，参考常规获取组件位置的方案实现时，触发类型转换错误：
type '_RenderSliverPinnedPersistentHeaderForWidgets' is not a subtype of type 'RenderBox' in type cast

Sliver组件的渲染对象为RenderSliver类型，和普通组件的RenderBox属于独立的渲染体系，无法直接调用RenderBox的localToGlobal方法获取位置信息。
需求为获取headerSliverBuilder内部所有Sliver组件的实时Y轴偏移量。

以下为问题复现示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key? key}) : super(key: key);
  final GlobalKey keySliverAppBar = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final List<String> tabs = <String>['Tab 1', 'Tab 2'];
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverToBoxAdapter(child: Container(height: 80, color: Colors.green)),
              SliverToBoxAdapter(child: Container(height: 50, color: Colors.yellow)),

              SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: const Text('Books'),
                  pinned: true,
                  expandedHeight: 150.0,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    onTap: (int index){
                      RenderBox box = keySliverAppBar.currentContext?.findRenderObject() as RenderBox;
                      Offset position = box.localToGlobal(Offset.zero);
                      double y = position.dy; 
                      print('this Y Offset: $y');
                    },
                    tabs: tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),
            ];
          },
          body: TabBarView(
            children: tabs.map((String name) {
              return SafeArea(
                top: false,
                bottom: false,
                child: Builder(
                  builder: (BuildContext context) {
                    return CustomScrollView(
                      key: PageStorageKey<String>(name),
                      slivers: <Widget>[
                        SliverOverlapInjector(
                          handle:
                              NestedScrollView.sliverOverlapAbsorberHandleFor(
                                  context),
                        ),
                        SliverPadding(
                          padding: const EdgeInsets.all(8.0),
                          sliver: SliverFixedExtentList(
                            itemExtent: 48.0,
                            delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                                return ListTile(
                                  title: Text('Item $index'),
                                );
                              },
                              childCount: 30,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

实现思路 #

Sliver的布局信息不通过RenderBox体系存储，所有位置、尺寸参数都保存在RenderSliver的constraints和geometry字段中，结合外层滚动视图的偏移量、视口本身的位置，就可以计算出任意Sliver的Y轴坐标，不需要做类型强转。
核心参数说明：

• RenderSliver.constraints.scrollOffset：当前Sliver顶部被滚出视口顶部的距离
• RenderSliver.geometry.paintOrigin：Sliver实际绘制位置相对布局起始点的偏移
• RenderSliver.geometry.paintExtent：Sliver当前在视口内的可见高度
• 外层NestedScrollView的outerController.offset：头部Sliver区域整体的滚动距离

通用计算方法 #

封装通用方法，传入Sliver绑定的GlobalKey即可返回当前Sliver顶部的全局Y轴偏移：

double? calculateSliverGlobalY(GlobalKey sliverKey) {
  final renderSliver = sliverKey.currentContext?.findRenderObject();
  if (renderSliver is! RenderSliver) return null;

  // 计算Sliver在视口内部的相对Y位置
  final sliverRelativeY = renderSliver.constraints.scrollOffset + 
      (renderSliver.geometry?.paintOrigin ?? 0);
  
  // 获取外层头部滚动区域的实时滚动偏移
  final outerScrollOffset = NestedScrollView
      .of(sliverKey.currentContext!)
      .outerController
      .offset;
  
  // 获取视口本身的全局Y坐标
  double viewportGlobalY = 0;
  final viewportRender = renderSliver.parent;
  if (viewportRender is RenderBox) {
    viewportGlobalY = viewportRender.localToGlobal(Offset.zero).dy;
  }

  // 最终计算得到Sliver顶部的全局Y偏移
  return viewportGlobalY + sliverRelativeY - outerScrollOffset;
}

代码修改步骤 #

1. 给headerSliverBuilder内所有需要获取偏移的Sliver分别绑定独立的GlobalKey，不要遗漏前两个SliverToBoxAdapter
2. 替换原有错误的RenderBox强转逻辑，调用上面封装的calculateSliverGlobalY方法获取偏移值
3. 如果需要滚动过程中实时获取偏移，给outerController添加滚动监听，在监听回调中执行计算即可，不需要等点击Tab时才触发

示例调用代码：

// 定义三个key分别对应三个头部Sliver
final GlobalKey keyGreenSliver = GlobalKey();
final GlobalKey keyYellowSliver = GlobalKey();
final GlobalKey keySliverAppBar = GlobalKey();

// 给对应Sliver绑定key：
// SliverToBoxAdapter(key: keyGreenSliver, child: Container(height: 80, color: Colors.green)),
// SliverToBoxAdapter(key: keyYellowSliver, child: Container(height: 50, color: Colors.yellow)),
// SliverAppBar(key: keySliverAppBar, ...)

// 取值逻辑
onTap: (int index){
  final greenY = calculateSliverGlobalY(keyGreenSliver);
  final yellowY = calculateSliverGlobalY(keyYellowSliver);
  final appBarY = calculateSliverGlobalY(keySliverAppBar);
  debugPrint('绿色块Y偏移：$greenY，黄色块Y偏移：$yellowY，AppBar Y偏移：$appBarY');
}

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