Flutter 解决NestedScrollView与TabBar双列表滚动位置同步问题


文章目录

  • 前言
  • 一、需要实现的效果如下
  • 二、flutter实现代码如下:
  • 总结


前言

最近写flutter项目,遇到NestedScrollView与TabBar双列表滚动位置同步问题,下面是解决方案,希望帮助到大家。


一、需要实现的效果如下

1、UI图:
请添加图片描述
需要实现的效果是,左边滑动的时候,右边的列表不要随左边滑动。右边滑动的时候,左边也不要滑动。

二、flutter实现代码如下:

1、用flutter原生的NestedScrollView是有问题的
2、使用第三方库解决这个问题extended_nested_scroll_view: ^6.2.1
3、完整的代码如下:

import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyBitApp());
}

class MyBitApp extends StatelessWidget {
  const MyBitApp({super.key});

  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyApp(),
    );
  }
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NestedScrollView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late List<ScrollController> _scrollControllers;
  late ScrollController nestedScrollController;

  
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _scrollControllers = [
      ScrollController(),
      ScrollController(),
    ];
    nestedScrollController = ScrollController();
  }

  
  void dispose() {
    _tabController.dispose();
    for (var controller in _scrollControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    // var tabBarHeight = primaryTabBar.preferredSize.height;
    double statusBarHeight = MediaQuery.of(context).padding.top;
    var pinnedHeaderHeight = statusBarHeight + kToolbarHeight;
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: ExtendedNestedScrollView(
          onlyOneScrollInBody: true,
          pinnedHeaderSliverHeightBuilder: () => pinnedHeaderHeight,
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return [
              SliverAppBar(
                title: Text('NestedScrollView Demo'),
                pinned: true,
                floating: true,
                expandedHeight: 200,
                stretch: true,
                elevation: 0,
                stretchTriggerOffset: 100,
                bottom: TabBar(
                  controller: _tabController,
                  tabs: [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            controller: _tabController,
            children: [
              KeepAliveWrapper(
                child: MediaQuery.removePadding(
                  removeTop: true,
                  context: context,
                  child: ListView.builder(
                    itemCount: 1000,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Tab 1 Item $index'),
                      );
                    },
                  ),
                ),
              ),
              KeepAliveWrapper(
                child: MediaQuery.removePadding(
                  removeTop: true,
                  context: context,
                  child: ListView.builder(
                    itemCount: 1000,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Tab 2 Item $index'),
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class KeepAliveWrapper extends StatefulWidget {
  final Widget child;

  const KeepAliveWrapper({Key? key, required this.child}) : super(key: key);

  
  _KeepAliveWrapperState createState() => _KeepAliveWrapperState();
}

class _KeepAliveWrapperState extends State<KeepAliveWrapper> with AutomaticKeepAliveClientMixin {
  
  Widget build(BuildContext context) {
    super.build(context);
    return widget.child;
  }

  
  bool get wantKeepAlive => true;
}

总结

这就是Flutter解决NestedScrollView与TabBar双列表滚动位置同步问题相关代码,希望能帮助到你!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/521242.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Quantinuum与微软携手突破:开创容错量子计算新纪元

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

高精度端到端在线校准环视相机和LIDAR(精度0.2度内!无需训练数据)

高精度端到端在线校准环视相机和LIDAR&#xff08;精度0.2度内&#xff01;无需训练数据&#xff09; 附赠自动驾驶学习资料和量产经验&#xff1a;链接 写在前面 在自动驾驶车辆的使用寿命内&#xff0c;传感器外参校准会因振动、温度和碰撞等环境因素而发生变化。即使是看似…

闪站侠洗护管理系统,洗衣洗鞋小程序软件定制,干洗连锁店软件系统搭建;

闪站侠洗护管理系统&#xff0c;洗衣洗鞋小程序软件定制&#xff0c;干洗连锁店软件系统搭建&#xff1b; 为了让每一个洗衣洗鞋工厂与门店的连接更加高效便捷&#xff0c;送洗流程更加简单轻松&#xff0c;拽牛科技倾心打造洗衣洗鞋管理软件。我们的目标是通过高效和优质的服务…

Rust vs C++:2024,谁更懂错误处理?

讲动人的故事,写懂人的代码 「席双嘉,听说你的C++项目又因为忘了检查返回值导致内存泄漏,又加班了?」 周五中午,在国内某科技巨头熙熙攘攘的员工餐厅,贾克强半开玩笑地戳了戳坐在隔壁的席双嘉,眼神中满是戏谑。 贾克强,一个热衷于Rust的程序员,总是乐于挑战和探索新…

域名应该如何实名?域名应该如何备案?域名如何解析到服务器

大家好欢迎来到易极赞&#xff0c;今天我们来跟大家聊一下“域名应该如何实名以及备案”这个话题。 域名实名认证是验证域名所有者身份的过程&#xff0c;以确保域名的合法性&#xff0c;通常需要登录到域名服务商后台&#xff0c;进行域名的注册&#xff0c;注册后创建域名模…

【PyQt5篇】多线程

文章目录 &#x1f354;使用QtDesigner进行设计&#x1f6f8;实现多线程&#x1f339;效果&#x1f50e;原因 &#x1f354;使用QtDesigner进行设计 对应的代码btn.ui <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0">&l…

虚拟机VMware启动虚拟机刚启动有网之后没网

虚拟机VMware启动虚拟机刚启动有网之后没网 害&#xff0c;感觉这种调试的事情是真的浪费时间 如题&#xff0c;对于这种情况&#xff0c;一句话&#xff0c;就是你本地的DHCP虚拟机服务以及NAT网络服务没启动 本机windowR,输入services.msc 进入服务 然后 喏&#xff0c;…

迷茫下是自我提升

长夜漫漫&#xff0c;无心睡眠。心中所想&#xff0c;心中所感&#xff0c;忧愁当前&#xff0c;就执笔而下&#xff0c;写下这篇文章。 回忆过往 回想当初为啥学前端&#xff0c;走前端这条路&#xff0c;学校要求嘛&#xff0c;兴趣爱好嘛&#xff0c;还是为了钱。 时间带着…

机器学习周报第36期

目录 一、文献阅读1.1 摘要1.2 论文背景1.3 论文背景1.4 视频处理特征传播1.5 论文方法 二、相关代码 一、文献阅读 论文标题&#xff1a;Object Detection in Videos by High Quality Object Linking 1.1 摘要 与静态图像中的目标检测相比&#xff0c;视频中的目标检测由于…

瑞_Redis_商户查询缓存_添加Redis缓存缓存更新策略

文章目录 项目介绍1 短信登录2 商户查询缓存2.1 什么是缓存2.1.1 缓存的应用场景2.1.2 为什么要使用缓存2.1.3 Web应用中缓存的作用2.1.4 Web应用中缓存的成本 2.2 添加Redis缓存2.2.1 背景2.2.2 缓存模型和思路2.2.3 代码实现2.2.4 测试附&#xff1a;IDEA控制台输出自动换行设…

专注项目管理的Mac工具 - Project Office Pro 最新版

Project Office Pro for Mac是一款功能强大的项目管理软件&#xff0c;旨在帮助用户更好地管理和跟踪项目进展&#xff0c;提高工作效率和质量。以下是该软件的主要功能介绍&#xff1a; 项目创建与编辑&#xff1a;用户可以根据自己的需求自定义项目计划&#xff0c;包括设置…

如何在 Ubuntu 上安装和配置 Tomcat 服务器?

简介&#xff1a;最近有粉丝朋友在问如何在 Ubuntu 上安装和配置 Tomcat 服务器&#xff1f;今天特地写这篇文章进行解答&#xff0c;希望能够帮助到大家。 文章目录 Ubuntu上安装和配置Tomcat的详细步骤Tomcat在Linux环境下的安装与配置一、下载并上传Tomcat压缩包二、启动To…

《图解Vue3.0》- 调试

如何对vue3项目进行调试 调试是开发过程中必备的一项技能&#xff0c;掌握了这项技能&#xff0c;可以很好的定义bug所在。一般在开发vue3项目时&#xff0c;有三种方式。 代码中添加debugger;使用浏览器调试&#xff1a;sourcemap需启用vs code 调试&#xff1a;先开启node服…

735.小行星碰撞

题目&#xff1a;给定一个整数数组 asteroids&#xff0c;表示在同一行的小行星。 对于数组中的每一个元素&#xff0c;其绝对值表示小行星的大小&#xff0c;正负表示小行星的移动方向&#xff08;正表示向右移动&#xff0c;负表示向左移动&#xff09;。每一颗小行星以相同…

【智能排班系统】雪花算法生成分布式ID

文章目录 雪花算法介绍起源与命名基本原理与结构优势与特点应用场景 代码实现代码结构自定义机器标识RandomWorkIdChooseLocalRedisWorkIdChooselua脚本 实体类SnowflakeIdInfoWorkCenterInfo 雪花算法类配置类雪花算法工具类 说明 雪花算法介绍 在复杂而庞大的分布式系统中&a…

Pnpm + Turbo 搭建 Web Component Monorepo 组件库

技术选型 使用 Pnpm Turbo 搭建 Web Component Monorepo项目 stencil-component-ui 组件库 pnpm 作为包管理器Turborepo 作为构建系统Vitepress 管理文档 pnpm 技术 什么是 pnpm? 它有哪些优势&#xff1f; pnpm 跟 npm、yarn一样&#xff0c;都是用于管理Node包依赖的管…

构建连接世界的高校海外系统:功能架构解析与思考

随着全球化的深入发展&#xff0c;越来越多的高校开始面向海外拓展&#xff0c;建立起跨国合作与交流的桥梁。而为了更好地管理和服务海外学生、教职员工以及校友&#xff0c;高校海外系统的功能架构显得尤为重要。本文将深入探讨高校海外系统的功能架构设计&#xff0c;以及如…

免注册,ChatGPT可即时访问了!

AI又有啥进展&#xff1f;一起看看吧 Apple进军个人家用机器人 Apple在放弃自动驾驶汽车项目并推出混合现实头显后&#xff0c;正在进军个人机器人领域&#xff0c;处于开发家用环境机器人的早期阶段 报告中提到了两种可能的机器人设计。一种是移动机器人&#xff0c;可以跟…

【STM32】存储器和位带映射(bit band mapping)

文章目录 0 前言1 关于地址和存储器2 STM32内部存储器3 位带映射&#xff08;bit band mapping&#xff09;4 扩展&#xff1a;IAP 0 前言 最近在研究stm32标准库&#xff0c;对使用宏定义实现位操作的函数非常感兴趣&#xff0c;简单的一句PAout(1) 0;就能实现某个引脚电平的…

lua学习笔记7(函数的学习)

print("*****************************函数的学习*******************************") print("*****************************无参数无返回值函数的学习*******************************") function f1()print("f1函数") end f1() f2function()--…