如何将RawScrollBar定位在ListView及所有容器外部的指定位置？

你现在的问题是滚动条包裹了整个包含顶部容器的Column，导致它的高度覆盖了从页面顶部到底部的所有区域，所以位置不对。只需要调整滚动条的包裹范围，让它只对应需要滚动的_Body区域即可。

最简单的解决方案 #

修改外层build方法，把MyScrollbar从最外层移到Expanded内部，只包裹_Body：

Widget build(BuildContext context) {
  return GetBuilder<...>(
    tag: controller!.tag,
    init: controller!,
    builder: (c) => Container(
      margin: const EdgeInsets.all(24),
      child: Column(
        children: [
          Container(...), // 对应图中的1、2、3容器
          const SizedBox(height: 24),
          Expanded(
            // 把MyScrollbar移到这里，仅包裹滚动区域
            child: MyScrollbar(
              controller: scrollCtrl,
              child: _Body(..., scrollCtrl),
            ),
          ),
        ],
      ),
    ),
  );
}

这样滚动条的高度会和_Body完全对齐，自然落在你标记的问号位置。如果需要微调滚动条的左右位置，直接修改MyScrollbar组件里的Container的margin参数即可。

更精确的外部定位（可选） #

如果需要滚动条完全脱离_Body的容器，放在页面最右侧底部，可以用Stack+Positioned来精确控制：

1. 先把顶部的三个容器封装成一个带GlobalKey的组件，用来获取它的高度：

final _topContainersKey = GlobalKey();

class _TopContainers extends StatelessWidget {
  const _TopContainers({super.key = _topContainersKey});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(...),
        Container(...),
        Container(...),
      ],
    );
  }
}

2. 用Stack布局，把滚动条定位到目标位置：

Widget build(BuildContext context) {
  return GetBuilder<...>(
    tag: controller!.tag,
    init: controller!,
    builder: (c) => Container(
      margin: const EdgeInsets.all(24),
      child: Stack(
        children: [
          Column(
            children: [
              const _TopContainers(),
              const SizedBox(height: 24),
              Expanded(
                child: _Body(..., scrollCtrl),
              ),
            ],
          ),
          // 定位滚动条到右侧底部
          Positioned(
            right: 0,
            // 计算顶部偏移：外层margin(24) + 顶部容器高度 + 间距(24)
            top: 24 + _topContainersKey.currentContext!.size!.height + 24,
            bottom: 0,
            child: MyScrollbar(
              controller: scrollCtrl,
              child: const SizedBox(width: 8), // 占位用，不影响滚动条功能
            ),
          ),
        ],
      ),
    ),
  );
}

这种方式可以让滚动条完全独立于内容容器，精准放在你需要的位置。

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