flutter scollable.ensurevisible 不能反向工作

如何解决flutter scollable.ensurevisible 不能反向工作

请查看视频/gif：

我有一个页面浏览量，可以激活当前标签页。即使用户多次滑动屏幕，我也需要确保活动选项卡始终可见。它从左到右工作。但是当我们从右向左尝试返回时，它的表现并不如预期。

         PageView(
            controller: pageController,onPageChanged: (int page) {
              _duaWidgetState.currentState.updateBtn(page + 1);
              Scrollable.ensureVisible(
                  _duaWidgetState.currentState.activeBtn.currentContext);
            },children: loaded

带有滚动视图文件的 TabBarWidget

    GlobalKey activeBtn = GlobalKey();
      var _selectedTab = 1;
      @override
      Widget build(BuildContext context) {
        return Container(
          padding: EdgeInsets.symmetric(vertical: 20),child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,child: Row(
              children: List.generate(widget.numberOfTab,(index) => tabBarItem(index + 1,widget.numberOfTab,activeBtn)),),);
      }

使用 Key 的容器

               Container(
                  key: activeBtn,margin: EdgeInsets.only(left: 20),padding: EdgeInsets.symmetric(
                    vertical: 10,horizontal: 24,

解决方法

没有人回答我的问题。但是，经过大量的努力和时间。我找到了解决此问题的解决方法。希望这是一个错误，并且会在即将到来的更新中由 Flutter 团队修复。

Scrollable.ensureVisible(_duaWidgetState.currentState.activeBtn.currentContext);

该函数有一个可选参数，称为对齐，可以调整它以确保所选元素/按钮位于视口的中心。（在我的情况下水平居中）。

我的小部件是水平滚动的，所以我需要根据 PageView() 的结果更新页码，当我使用时

alignment: 0

从左到右滑动页面视图工作正常。但是，当我从右向左滑动页面以转到 PageView 小部件中的上一页时，使用这种对齐方式时，ensureVisible 无法按预期工作。所选元素/按钮不在视图中。我实验发现当我使用

aligment: 1

从右向左滑动时，ensureVisible 工作正常，但同时。当我从左向右滚动时，出现了同样的问题。

最后，我设法采取了一些解决方法来解决此问题。解决方案是将最后一页索引存储在一个变量中，并检查最后一页是否大于新页然后 alignment: 0 以及最后一页是否小于新页 aligment:1 这样。

   PageView(
    onPageChanged: (int page) {
    if (lastPage < page) {
    Scrollable.ensureVisible(
    _duaWidgetState.currentState.activeBtn.currentContext,alignment: -0.0100,);
     } else {
     Scrollable.ensureVisible(
        _duaWidgetState.currentState.activeBtn.currentContext,(Perfect For font size 24)
     alignment: 1.005,);
                  }}

希望我的回答对未来有所帮助。