Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置

简介: Flutter 滚动距离来设置TabBar的位置,点击TabBar滚动的到指定的位置
效果gif

定义属性
    final tabBarHeight = useRef(42.0);
    final items = useRef(['产品详情', '购买须知', '服务评价']
        .map((e) => Tab(
              height: 40,
              text: e,
            ))
        .toList());
    final tabC = useTabController(initialLength: items.value.length);
    final scroller = useScrollController();

    final isTabClicked = useRef(false);

    final keys = useRef([
      GlobalKey(debugLabel: 'tab1'),
      GlobalKey(debugLabel: 'tab2'),
      GlobalKey(debugLabel: 'tab3'),
    ]);
定义监听
useEffect(() {
      void tabCL() {
        if (tabC.indexIsChanging) {
          isTabClicked.value = true;
          final keyRenderObject = keys.value[tabC.index].currentContext
              ?.findAncestorRenderObjectOfType();
          scroller.position
              .ensureVisible(keyRenderObject!,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeIn)
              .then((value) {
            isTabClicked.value = false;
          });
        }
      }

      void scrL() {
        if (isTabClicked.value) return;
        int i = 0;
        for (; i < keys.value.length; i++) {
          final keyRenderObject =
              keys.value[i].currentContext?.findAncestorRenderObjectOfType();
          if (keyRenderObject != null) {
            final offsetY =
                (keyRenderObject.parentData as SliverPhysicalParentData)
                    .paintOffset
                    .dy;
            if (offsetY > tabBarHeight.value) {
              break;
            }
          }
        }
        tabC.index = i > 0 ? i - 1 : 0;
      }

      tabC.addListener(tabCL);
      scroller.addListener(scrL);
      return () {
        tabC.removeListener(tabCL);
        scroller.removeListener(scrL);
        tabC.dispose();
        scroller.dispose();
      };
    }, [3]);
每个组件设置Key
CustomScrollView(
        controller: scroller,
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.transparent,
            pinned: true,
            toolbarHeight: 0,
            expandedHeight: 380,
            flexibleSpace: const FlexibleSpaceBar(
              background: HeaderProductDetail(),
            ),
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(tabBarHeight.value),
              child: Container(
                color: Colors.white,
                child: TabBar(
                  tabs: items.value,
                  controller: tabC,
                  unselectedLabelColor: Colors.grey,
                  indicator: context.extensions.underlineTabIndicator,
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              key: keys.value[0],
              height: Screens.height,
              width: double.infinity,
              color: Colors.red,
              child: Text("==============="),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              key: keys.value[1],
              height: Screens.height,
              width: double.infinity,
              color: Colors.yellow,
              child: Text("==============="),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              key: keys.value[2],
              height: Screens.height,
              width: double.infinity,
              color: Colors.blue,
              child: Text("==============="),
            ),
          )
        ],
      )


参考

Flutter TabBar实现描点滚动绑定

源码 感觉有用的话,star一下

github地址

相关文章
|
7月前
|
数据库 容器
Flutter笔记:滚动之-无限滚动与动态加载的实现
Flutter笔记:滚动之-无限滚动与动态加载的实现
309 0
|
存储 数据库 索引
Flutter笔记:滚动之-无限滚动与动态加载的实现(GetX简单状态管理版)
本文介绍Flutter中如何实无线滚动(基于GetX简单状态管理而非有状态组件)
144 0
|
28天前
|
前端开发 数据处理 开发者
Flutter应用开发中滚动性能优化与无限列表实现的重要性
本文深入探讨了Flutter应用开发中滚动性能优化与无限列表实现的重要性。首先分析了影响滚动性能的因素,如布局复杂度、重绘频率和数据处理等。接着介绍了优化方法,包括懒加载、简化布局、控制重绘和高效数据处理。最后详细讲解了无限列表的实现原理及步骤,并通过案例分析展示了具体应用,旨在为开发者提供实用的技术指导。
37 5
|
1月前
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
115 1
|
4月前
Flutter设置Button的大小
Flutter设置Button的大小
109 1
|
5月前
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
flutter 导航组件 AppBar (含顶部选项卡TabBar,抽屉菜单 drawer ,自定义导航图标)
93 1
|
5月前
|
UED
Flutter-无限循环滚动标签
Flutter-无限循环滚动标签
105 0
|
5月前
|
容器
Flutter Container设置 width 无效
Flutter Container设置 width 无效
|
7月前
|
前端开发 UED 开发者
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
【4月更文挑战第30天】Flutter开发中,优化列表和滚动视图至关重要。本文介绍了几种优化方法:1) 使用`ListView.builder`和`GridView.builder`实现懒加载;2) 复用子组件以减少实例创建;3) 利用`CustomScrollView`和`Slivers`提升滚动性能;4) 通过`NotificationListener`监听滚动事件;5) 使用`KeepAlive`保持列表项状态。掌握这些技巧能提升应用性能和用户体验。
110 1
【Flutter前端技术开发专栏】Flutter中的列表与滚动视图优化
|
6月前
|
容器
flutter GestureDetector 点击空白区域无反应解决办法
flutter GestureDetector 点击空白区域无反应解决办法
150 0