tabbar 快速滑动问题

[bingweibi]

进行到二级tab切换一级tab，继续快速滑动，会直接越过第二个一级tab的二级tab,滑到一级tab的第三个tab 另外二级tab滑到一级tab时阻力较大，请问有什么好的解决方案吗

[zmtzawqlp]

试试 1.0.0 版本

[smadey]

快速滑动只切一级 tab 1.0.0 版本此问题还存在(阻力大的问题1.0.0已解决)，不过可以通过设置 physics 解决 https://github.com/fluttercandies/extended_image/issues/152 有详细描述 实测把 stiffness 设为 1000 基本没有此问题，和以前的区别就是一级 tab 切换变快了

[zmtzawqlp]

https://github.com/fluttercandies/extended_image/issues/152

[bingweibi]

我试试

[lwlizhe]

快速滑动只切一级 tab 1.0.0 版本此问题还存在(阻力大的问题1.0.0已解决)，不过可以通过设置 physics 解决 fluttercandies/extended_image#152 有详细描述 实测把 stiffness 设为 1000 基本没有此问题，和以前的区别就是一级 tab 切换变快了

额，老哥能看下是不是这么设置的……我这好像设置为1000也没啥用

class CustomScrollPhysics extends ClampingScrollPhysics{
  const CustomScrollPhysics({ScrollPhysics parent}) : super(parent: parent);

  @override
  CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => SpringDescription.withDampingRatio(
    mass: 0.5,
    stiffness: 10000.0, // Increase this value as you wish.
    ratio: 1.1,
  );
}

然后在demo的那个link.dart 中的ExtendedTabBarView 设置上上面那个自定义的physics，像这样

ExtendedTabBarView(
              physics: const CustomScrollPhysics(),
              children：<Widget>[
                              ……
                             ]
）

而且这样好像增加了点阻力，不过这个不是最大的问题，主要是想问下你那里，如果在拖动到tab切换一半的时候，松开，然后在恢复动画结束前立马再次点击拖拽，是否还存在快速滑动只切一级的问题？

[zmtzawqlp]

重新开一个issue。你的问题跟这个不一样了

[bingweibi]

快速滑动只切一级 tab 1.0.0 版本此问题还存在(阻力大的问题1.0.0已解决)，不过可以通过设置 physics 解决 fluttercandies/extended_image#152 有详细描述 实测把 stiffness 设为 1000 基本没有此问题，和以前的区别就是一级 tab 切换变快了

额，老哥能看下是不是这么设置的……我这好像设置为1000也没啥用

class CustomScrollPhysics extends ClampingScrollPhysics{
  const CustomScrollPhysics({ScrollPhysics parent}) : super(parent: parent);

  @override
  CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => SpringDescription.withDampingRatio(
    mass: 0.5,
    stiffness: 10000.0, // Increase this value as you wish.
    ratio: 1.1,
  );
}

然后在demo的那个link.dart 中的ExtendedTabBarView 设置上上面那个自定义的physics，像这样

ExtendedTabBarView(
              physics: const CustomScrollPhysics(),
              children：<Widget>[
                              ……
                             ]
）

而且这样好像增加了点阻力，不过这个不是最大的问题，主要是想问下你那里，如果在拖动到tab切换一半的时候，松开，然后在恢复动画结束前立马再次点击拖拽，是否还存在快速滑动只切一级的问题？

我也这样设置了，然后没有效果，不知道是不是姿势不正确

[zmtzawqlp]

最好提供步骤和视频

[lwlizhe]

最好提供步骤和视频

其实也没啥好提供的，说白了把项目拉下来，修改demo中的那个link.dart，使其tab00,tab01,tab02下分别都有各自的子tab……然后运行并快速滑动就能看到问题所在了

[lwlizhe]

重新开一个issue。你的问题跟这个不一样了

其实就是一个问题，只不过那个老哥说他亲测没问题……然而我和下面那个老哥一样，设置了也没用

最后那个描述内容，其实就是一种模拟快速滑动的方法而已，用那种方式看更直观而已

[zmtzawqlp]

希望能提供重现问题的demo 以及 视频，不然大家操作不一样。很难诊断问题, 我没有在我这边重现你们说的问题

[zmtzawqlp]

https://github.com/fluttercandies/extended_tabs/issues/12

[zmtzawqlp]

试试 1.0.1 https://github.com/fluttercandies/extended_tabs/issues/12

[smadey]

如果很快很快的滑动，确实还是会只切换一级 tab(1.0.1 还是一样) 但是设置了 physics 可以做到不那么快的时候可以切换到二级 tab 了 如果能做到即使很慢也能切换到二级 tab 的话当然最好

[zmtzawqlp]

惯性是惯性，1.0.1是解决的 #12 问题。惯性的问题只能靠自己修改。这是没办法的事情。而且我不知道用户为啥要滑动这么快。

[bingweibi]

惯性是惯性，1.0.1是解决的 #12 问题。惯性的问题只能靠自己修改。这是没办法的事情。而且我不知道用户为啥要滑动这么快。you

惯性是惯性，1.0.1是解决的 #12 问题。惯性的问题只能靠自己修改。这是没办法的事情。而且我不知道用户为啥要滑动这么快。

有些人喜欢暴力

[zmtzawqlp]

那你可以增加阻力

[lwlizhe]

希望能提供重现问题的demo 以及 视频，不然大家操作不一样。很难诊断问题, 我没有在我这边重现你们说的问题

来了老哥，gif图片看这个，整这个玩意还挺麻烦的~~

下面这个图就是基于那个1.0.1升级来的，也加上了上面那老哥说的自定义ScrollPhysics

触摸操作提示也开启了，按下的时候会有那个圆圈提示，可能因为压制问题，可能有稍微一点点不清楚，不过我试了下，好像问题不大（实在不行点一下全屏看）

另外其实也没那么暴力，我感觉操作挺正常的，就是正常滑动的速度……

如果还有需要的话，我再把我改的link.dart 传的到gist上发过来

[zmtzawqlp]

我没看出来啥问题呢。你用了最新版本没有

[lwlizhe]

我没看出来啥问题呢。你用了最新版本没有

额，你注意，我明明滑动的是tab000，tab001，tab002，tab003那帮，按理说，滑tab01下面的那些tab000，tab001，tab002，tab003区域的时候，也应该是tab000，tab001，tab002，tab003 这些子tab滑动；

然而实际上是tab01自己本身在滑动，所以直接表现就是跳过了tab01下面那四个子tab，直接到tab02那块了，你看是不是

[zmtzawqlp]

https://github.com/fluttercandies/extended_tabs/issues/12 这个问题我重现了。修复了。不知道是不是你说的问题

[lwlizhe]

12 这个问题我重现了。修复了。不知道是不是你说的问题

额，其实都是一个问题……我那个gif图刚开始的操作就是#12说的那样

其实这么操作的目的就是模拟快速滑动……

[zmtzawqlp]

你说的问题还是惯性啊。。tab1 事件都没有end。你告诉我它滑动是子tab？？

[lwlizhe]

你说的问题还是惯性啊。。tab1 事件都没有end。你告诉我它滑动是子tab？？

额……但是我作为使用者来说，我明明滑动的就是tab01的子tab啊，用户才不管这些……

[zmtzawqlp]

所以说啊。你可以把惯性调高，而且说实话。。有这么多tab的产品是失败的

[zmtzawqlp]

你说的#12.我倒是重现了。已经修复点了

[lwlizhe]

所以说啊。你可以把惯性调高，而且说实话。。有这么多tab的产品是失败的

惯性已经调制10000了……实在不行我这把link.dart 发过去你自己试试

另外多tab这种不是我们程序员该讨论的话题……怼策划这种事不是这块该干的

[zmtzawqlp]

你用了1.0.1了？

[lwlizhe]

你用了1.0.1了？

是的，这样吧，我传link.dart 到gist上，稍等下哈

[lwlizhe]

你用了1.0.1了？

是的，这样吧，我传link.dart 到gist上，稍等下哈

丢……发现量也没那么大，直接在这贴吧

import 'package:example/widget/list.dart';
import 'package:extended_tabs/extended_tabs.dart';
import 'package:flutter/material.dart';
import 'package:ff_annotation_route/ff_annotation_route.dart';
import 'package:flutter/physics.dart';

@FFRoute(
  name: 'fluttercandies://link',
  routeName: 'Link',
  description:
      'if link is true and current tabbarview over scroll,it will check and scroll ancestor or child tabbarView.',
  exts: <String, dynamic>{
    'group': 'Simple',
    'order': 0,
  },
)
class LinkDemo extends StatefulWidget {
  @override
  _LinkDemoState createState() => _LinkDemoState();
}

class _LinkDemoState extends State<LinkDemo> with TickerProviderStateMixin {
  TabController tabController;
  TabController tabController1;
  TabController tabController21;
  TabController tabController22;
  TabController tabController23;

  @override
  void initState() {
    tabController = TabController(length: 2, vsync: this);
    tabController1 = TabController(length: 3, vsync: this);
    tabController21 = TabController(length: 4, vsync: this);
    tabController22 = TabController(length: 4, vsync: this);
    tabController23 = TabController(length: 4, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Column(
        children: <Widget>[
          TabBar(
            indicator: const ColorTabIndicator(Colors.blue),
            labelColor: Colors.black,
            tabs: const <Tab>[
              Tab(text: 'Tab0'),
              Tab(text: 'Tab1'),
            ],
            controller: tabController,
          ),
          Expanded(
            child: ExtendedTabBarView(
              physics: const CustomScrollPhysics(),
              children: <Widget>[
                Column(
                  children: <Widget>[
                    TabBar(
                      indicator: const ColorTabIndicator(Colors.red),
                      labelColor: Colors.black,
                      tabs: const <Tab>[
                        Tab(text: 'Tab00'),
                        Tab(text: 'Tab01'),
                        Tab(text: 'Tab02'),
                      ],
                      controller: tabController1,
                    ),
                    Expanded(
                      child: ExtendedTabBarView(
                        children: <Widget>[
                          Column(
                            children: <Widget>[
                              TabBar(
                                indicator:
                                    const ColorTabIndicator(Colors.green),
                                labelColor: Colors.black,
                                //indicatorSize: TabBarIndicatorSize.label,
                                tabs: const <Tab>[
                                  Tab(text: 'Tab000'),
                                  Tab(text: 'Tab001'),
                                  Tab(text: 'Tab002'),
                                  Tab(text: 'Tab003'),
                                ],
                                controller: tabController21,
                              ),
                              Expanded(
                                child: ExtendedTabBarView(
                                  children: const <Widget>[
                                    ListWidget('Tab000'),
                                    ListWidget('Tab001'),
                                    ListWidget('Tab002'),
                                    ListWidget('Tab003'),
                                  ],
                                  controller: tabController21,

                                  /// if link is true and current tabbarview over scroll,
                                  /// it will check and scroll ancestor or child tabbarView.
                                  link: true,

                                  /// cache page count
                                  /// default is 0.
                                  /// if cacheExtent is 1, it has two pages in cache
                                  /// null is infinity, it will cache all pages
                                  cacheExtent: 1,
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: <Widget>[
                              TabBar(
                                indicator:
                                const ColorTabIndicator(Colors.green),
                                labelColor: Colors.black,
                                //indicatorSize: TabBarIndicatorSize.label,
                                tabs: const <Tab>[
                                  Tab(text: 'Tab000'),
                                  Tab(text: 'Tab001'),
                                  Tab(text: 'Tab002'),
                                  Tab(text: 'Tab003'),
                                ],
                                controller: tabController22,
                              ),
                              Expanded(
                                child: ExtendedTabBarView(
                                  children: const <Widget>[
                                    ListWidget('Tab000'),
                                    ListWidget('Tab001'),
                                    ListWidget('Tab002'),
                                    ListWidget('Tab003'),
                                  ],
                                  controller: tabController22,

                                  /// if link is true and current tabbarview over scroll,
                                  /// it will check and scroll ancestor or child tabbarView.
                                  link: true,

                                  /// cache page count
                                  /// default is 0.
                                  /// if cacheExtent is 1, it has two pages in cache
                                  /// null is infinity, it will cache all pages
                                  cacheExtent: 1,
                                ),
                              )
                            ],
                          ),
                          Column(
                            children: <Widget>[
                              TabBar(
                                indicator:
                                const ColorTabIndicator(Colors.green),
                                labelColor: Colors.black,
                                //indicatorSize: TabBarIndicatorSize.label,
                                tabs: const <Tab>[
                                  Tab(text: 'Tab000'),
                                  Tab(text: 'Tab001'),
                                  Tab(text: 'Tab002'),
                                  Tab(text: 'Tab003'),
                                ],
                                controller: tabController23,
                              ),
                              Expanded(
                                child: ExtendedTabBarView(
                                  children: const <Widget>[
                                    ListWidget('Tab000'),
                                    ListWidget('Tab001'),
                                    ListWidget('Tab002'),
                                    ListWidget('Tab003'),
                                  ],
                                  controller: tabController23,

                                  /// if link is true and current tabbarview over scroll,
                                  /// it will check and scroll ancestor or child tabbarView.
                                  link: true,

                                  /// cache page count
                                  /// default is 0.
                                  /// if cacheExtent is 1, it has two pages in cache
                                  /// null is infinity, it will cache all pages
                                  cacheExtent: 1,
                                ),
                              )
                            ],
                          ),
                        ],
                        controller: tabController1,
                      ),
                    )
                  ],
                ),
                const ListWidget('Tab1')
              ],
              controller: tabController,
            ),
          )
        ],
      ),
    );
  }
}

class CustomScrollPhysics extends ClampingScrollPhysics{
  const CustomScrollPhysics({ScrollPhysics parent}) : super(parent: parent);

  @override
  CustomScrollPhysics applyTo(ScrollPhysics ancestor) {
    return CustomScrollPhysics(parent: buildParent(ancestor));
  }

  @override
  SpringDescription get spring => SpringDescription.withDampingRatio(
    mass: 0.5,
    stiffness: 10000.0, // Increase this value as you wish.
    ratio: 1.1,
  );
}

[lwlizhe]

你用了1.0.1了？

已经贴上去了，麻烦看下是不是姿势不对还是怎么样

[bingweibi]

我将stifiness设置为10000.0 ratio设置为2.0 现在体验还行，你可以试一下

[lwlizhe]

我将stifiness设置为10000.0 ratio设置为2.0 现在体验还行，你可以试一下

额，是我那个gif图中的操作么？怎么我这还是没效果……………… 我这flutter doctor信息是

[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.17763.1577], locale zh-CN)
    • Flutter version 1.22.5 at D:\Program File\sdk\flutter\flutter_windows_v1.9.1+hotfix.2-stable
    • Framework revision 7891006299 (7 days ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at xxx
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = xxx
    • Java binary at: xxx
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[√] Android Studio (version 3.5)
    • Android Studio at xxx
    • Flutter plugin version 42.1.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[!] VS Code, 64-bit edition (version 1.32.3)
    • VS Code at xxx
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (2 available)
    • xxx        • android-arm64 • Android 10 (API 29)
    • xxx2 • 127.0.0.1:62001 • android-x86   • Android 5.1.1 (API 22)

! Doctor found issues in 2 categories.

[bingweibi]

你代码好像只设置了一个地方的physics, 我是所有ExtendedTabBarView都设置了（因为我不确定那些地方没用那些地方有用）你可以先都设置一下试试看，是不是这个原因导致的

[lwlizhe]

你代码好像只设置了一个地方的physics, 我是所有ExtendedTabBarView都设置了（因为我不确定那些地方没用那些地方有用）你可以先都设置一下试试看，是不是这个原因导致的

okok

[lwlizhe]

你代码好像只设置了一个地方的physics, 我是所有ExtendedTabBarView都设置了（因为我不确定那些地方没用那些地方有用）你可以先都设置一下试试看，是不是这个原因导致的

破案了，就是这个原因……虽然动画很快了，但是至少可以用了 仔细看了下，确实我滑的是子tab，physics却设置到主tab上了……眼瞎眼瞎，罪过罪过

[zmtzawqlp]

其实这个问题还是这个惯性，也是flutter机制所致。增加这个参数是让惯性变短，让child 更快能获得点击事件

[lwlizhe]

其实这个问题还是这个惯性，也是flutter机制所致。增加这个参数是让惯性变短，让child 更快能获得点击事件

其实根据当初的研究，惯性这块和手势差距并没那么大，最终都走的是一个地方

所以我当初想的就是加个事件分发拦截机制~~不过想了想，这tm好像需要从手势竞争器开始重写，就彻底pass掉了

不过当时另一个想法是获取子View，通过判断子View是否可以滑动来分发事件，如果子View可以滑动，就将手势传给子View 不过这个想法唯一存在的问题是如何让父View停在对应的地方~~当时用动画让父VIew自己恢复到相应位置，效果实现是实现了；但是如果很快速的滑动，父View过度滑动的距离太大，效果很差

后来工作一忙，外加人一懒，就放弃了~~~

现在想想，是否可以通过计算过度滑动距离，然后修改手势数据并传给子View呢？

[bingweibi]

现在感觉二级TAB切换到一级TAB阻力有点大，我将2.0ratio调稍微小一点会稍微好一点 不知道怎么优化能够用相同的力度 二级tab->二级tab 二级tab->一级tab

[zmtzawqlp]

https://github.com/fluttercandies/extended_tabs/blob/640f3770c4822473bcc21f0a8ca5f18abe551da0/lib/src/tab_view.dart#L113

已解决试试，有问题再open