Flutter中AdaptiveScrollbar滚动条位置不符合预期问题

嗨，我明白你现在遇到的问题了——明明已经设置了滚动条的位置，结果水平滚动条还是跑到顶部去了，确实挺闹心的😅。我帮你分析下原因，再给你个可行的解决方案。

你当前的嵌套方式是把水平滚动条放在垂直滚动的内容区域里，这会导致水平滚动条的位置计算是基于内部内容的高度，而不是外层容器的底部，所以才会出现显示位置不对的情况。想要让滚动条牢牢固定在外层容器的右侧和底部，我们可以换个思路，用Stack来把滚动条和内容区域分开布局，这样滚动条的位置就能相对于外层容器来定位了。

下面是修改后的完整代码，你可以直接替换试试：

return LayoutBuilder(
  builder: (context, constraints) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Container(
        color: Colors.yellow,
        width: constraints.maxWidth - 20,
        height: constraints.maxHeight - 20,
        child: Stack(
          children: [
            // 核心内容区域：嵌套实现二维滚动
            SingleChildScrollView(
              controller: _verticalScrollController,
              scrollDirection: Axis.vertical,
              child: SingleChildScrollView(
                controller: _horizontalScrollController,
                scrollDirection: Axis.horizontal,
                child: Column(
                  children: [
                    Row(
                      children: [
                        Container(color: Colors.red, width: 200, child: Text("Test")),
                        Container(color: Colors.pink, width: 200, child: Text("Test")),
                        Container(color: Colors.orange, width: 200, child: Text("Test")),
                        Container(color: Colors.purple, width: 200, child: Text("Test")),
                        Container(color: Colors.black, width: 200, child: Text("Test")),
                        Container(color: Colors.blue, width: 200, child: Text("Test")),
                        Container(color: Colors.green, width: 200, child: Text("Test")),
                      ],
                    ),
                    for (int a = 0; a < 100; a++)
                      Row(
                        children: [
                          Container(color: Colors.red, width: 200, child: Text("Test")),
                          Container(color: Colors.pink, width: 200, child: Text("Test")),
                          Container(color: Colors.orange, width: 200, child: Text("Test")),
                          Container(color: Colors.purple, width: 200, child: Text("Test")),
                          Container(color: Colors.black, width: 200, child: Text("Test")),
                          Container(color: Colors.blue, width: 200, child: Text("Test")),
                          Container(color: Colors.green, width: 200, child: Text("Test")),
                        ],
                      ),
                  ],
                ),
              ),
            ),
            // 垂直滚动条：固定在容器右侧
            AdaptiveScrollbar(
              width: 20,
              controller: _verticalScrollController,
              position: ScrollbarPosition.right,
              child: const SizedBox(), // 空容器占位，仅用于绑定滚动条
            ),
            // 水平滚动条：固定在容器底部
            AdaptiveScrollbar(
              height: 20,
              controller: _horizontalScrollController,
              position: ScrollbarPosition.bottom,
              child: const SizedBox(), // 空容器占位，仅用于绑定滚动条
            ),
          ],
        ),
      ),
    );
  },
);

关键修改点说明： #

• 用Stack将内容区域和两个滚动条分层，滚动条会叠加在内容上方，位置计算基于外层的黄色容器
• 给水平滚动条添加了height:20的属性，确保它有合适的显示高度（垂直滚动条你已经设置了width:20）
• 滚动条的子控件用SizedBox()占位，因为我们只需要它绑定对应的滚动控制器，不需要额外内容

这样调整后，垂直滚动条会固定在容器右侧，水平滚动条固定在底部，完全符合你的需求，而且在Web端也能正常显示滚动条哦～

备注：内容来源于stack exchange，提问作者Saad Bashir