Flutter滚动悬浮效果

news2024/9/20 15:05:19

有以下几种效果

1、tabBar透明度随偏移0-1渐变过度

2、app上下滚动触发tabBar同步滚动

3、tabBar切换触发app上下同步滚动

image-20220127202810611

1、计算每个区块的高度

用keyList保存声明的key，用heightList保存每个key对应的组件高度

// key列表
List<GlobalKey> keyList = [
  GlobalKey(),
  GlobalKey(),
  GlobalKey(),
  GlobalKey(),
  GlobalKey(),
  GlobalKey(),
  GlobalKey(),
];
// 计算每个key对应的高度
List<double> heightList;

把key放到需要计算的组件中（这里最后计算的发现就是500）

Container(
  key: keyList[index],
  height: 500,
  color: colorList[index],
)

监听滚动。

备注：controller可以监听CustomScrollView、SingleScrollView、SmartRefresher等，不一定要用CustomScrollView，另外如果是监听SmartRefresher可能会出现负数的情况需要处理成0下。

// 滚动控制器
ScrollController scrollController = new ScrollController();

@override
void initState() {
  scrollController.addListener(() => _onScrollChanged());
  super.initState();
}

@override
Widget build(BuildContext context) {
  return CustomScrollView(
    controller: scrollController,
    slivers: <Widget>[
      SliverList(
        delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
            return Container(
              key: keyList[index],
              height: 500,
              color: colorList[index],
            );
          },
          childCount: keyList.length,
        ),
      ),
    ],
  );
}

在滚动动态计算组件高度

备注：这里计算可以用防抖优化，另外这个是计算已绘制的组件高度，因此一定要在滚动的时候动态计算。

// 监听ScrollView滚动
void _onScrollChanged() {
  initHeightList();
}

// 初始化heightList
initHeightList() {
  for (int i = 0; i < keyList.length; i++) {
    if (keyList[i].currentContext != null) {
      try {
        heightList[i] = keyList[i].currentContext.size.height;
      } catch (e) {
        // 这里只是计算可视部分，因此需要持续计算
        print("can not get size, so do not modify heightList[i]");
      }
    }
  }
}

2、实现分析 - tabBar透明度渐变

小于起始点透明度：0

起始点->终点透明度:0-1

大于终点透明度:1

// 监听ScrollView滚动
void _onScrollChanged() {
  initHeightList();

  // 是否显示tabBar
  double showTabBarOffset;
  try {
    showTabBarOffset = keyList[0].currentContext.size.height - TAB_HEIGHT;
  } catch (e) {
    showTabBarOffset = heightList[0] - TAB_HEIGHT;
  }
  if (scrollController.offset >= showTabBarOffset) {
    setState(() {
      opacity = 1;
    });
  } else {
    setState(() {
      opacity = scrollController.offset / showTabBarOffset;
      if (opacity < 0) {
        opacity = 0;
      }
    });
  }
}

3、实现分析 - app上下滚动触发tabBar

首先接入tabController控制器

// tabBar控制器
TabController tabController;

@override
void initState() {
  tabController = TabController(vsync: this, length: listTitle.length);
  super.initState();
}

@override
Widget build(BuildContext context) {
  return TabBar(
    controller: tabController,
    indicatorColor: Color(0xfffdd108),
    labelColor: Color(0xff343a40),
    unselectedLabelColor: Color(0xff8E9AA6),
    unselectedLabelStyle: TextStyle(
        fontSize: 14, fontWeight: FontWeight.normal),
    isScrollable: true,
    labelStyle:
    TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
    tabs: _buildTabsWidget(listTitle),
    onTap: _onTabChanged,
  );
}

然后在滚动中使用tabController.animateTo滚动到tabBar

// 监听ScrollView滚动
void _onScrollChanged() {
  initHeightList();

  // 滑动页面触发tabBar水平滚动
  if (scrollController.position.userScrollDirection ==
          ScrollDirection.reverse ||
      scrollController.position.userScrollDirection ==
          ScrollDirection.forward) {
    double totalOffset = -TAB_HEIGHT;
    for (int i = 0; i < keyList.length; i++) {
      if (scrollController.offset >= totalOffset &&
          scrollController.offset < totalOffset + heightList[i]) {
        tabController.animateTo(
          i,
          duration: Duration(milliseconds: 0),
        );
        return;
      }
      totalOffset += heightList[i];
    }
  }
}

4、实现分析 - tabBar切换触发app滚动

首先获取tab的改变事件，在改变时获取当前的targetKey，用于记录需要滚动到什么高度

@override
Widget build(BuildContext context) {
  return TabBar(
    controller: tabController,
    indicatorColor: Color(0xfffdd108),
    labelColor: Color(0xff343a40),
    unselectedLabelColor: Color(0xff8E9AA6),
    unselectedLabelStyle: TextStyle(
        fontSize: 14, fontWeight: FontWeight.normal),
    isScrollable: true,
    labelStyle:
    TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
    tabs: _buildTabsWidget(listTitle),
    onTap: _onTabChanged,
  );
}

void _onTabChanged(int index) {
  targetKey = keyList[index];
  _gotoAnchorPoint();
}

然后使用 scrollController.position
.ensureVisible滚动到targetKey所在位置即可

// 点击tabBar去对应锚点
void _gotoAnchorPoint() async {
  scrollController.position
      .ensureVisible(
    targetKey.currentContext.findRenderObject(),
    alignment: 0.0,
  );
}

5、源码

tabbar_scroll_demo_page.dart

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

class TabBarScrollDemoPage extends StatefulWidget {
  TabBarScrollDemoPage({
    Key key,
  }) : super(key: key);

  @override
  _TabBarScrollDemoPageState createState() => _TabBarScrollDemoPageState();
}

class _TabBarScrollDemoPageState extends State<TabBarScrollDemoPage>
    with SingleTickerProviderStateMixin, WidgetsBindingObserver {
  // 滚动控制器
  ScrollController scrollController = new ScrollController();

  // key列表
  List<GlobalKey> keyList = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
  ];

  // 当前锚点key
  GlobalKey targetKey;

  // 计算每个key对应的高度
  List<double> heightList;

  // tabBar控制器
  TabController tabController;

  // 是否显示tabBar
  bool showTabBar = true;

  // 状态栏高度
  static const double TAB_HEIGHT = 48;

  // 标题
  List<String> listTitle = [
    "Red",
    "Orange",
    "Yellow",
    "Green",
    "Indigo",
    "Blue",
    "Purple"
  ];

  // 颜色
  List<Color> colorList = [
    Color(0xffFF0000),
    Color(0xffFF7F00),
    Color(0xffFFFF00),
    Color(0xff00FF00),
    Color(0xff00FFFF),
    Color(0xff0000FF),
    Color(0xff8B00FF),
  ];

  // tabBar过度透明度
  double opacity = 0.0;

  @override
  void initState() {
    heightList = List.filled(keyList.length, 0);
    targetKey = keyList[0];
    tabController = TabController(vsync: this, length: listTitle.length);
    scrollController.addListener(() => _onScrollChanged());
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  void _onTabChanged(int index) {
    targetKey = keyList[index];
    _gotoAnchorPoint();
  }

  // 监听ScrollView滚动
  void _onScrollChanged() {
    initHeightList();

    // 是否显示tabBar
    double showTabBarOffset;
    try {
      showTabBarOffset = keyList[0].currentContext.size.height - TAB_HEIGHT;
    } catch (e) {
      showTabBarOffset = heightList[0] - TAB_HEIGHT;
    }
    if (scrollController.offset >= showTabBarOffset) {
      setState(() {
        opacity = 1;
      });
    } else {
      setState(() {
        opacity = scrollController.offset / showTabBarOffset;
        if (opacity < 0) {
          opacity = 0;
        }
      });
    }

    // 滑动页面触发tabBar水平滚动
    if (scrollController.position.userScrollDirection ==
            ScrollDirection.reverse ||
        scrollController.position.userScrollDirection ==
            ScrollDirection.forward) {
      double totalOffset = -TAB_HEIGHT;
      for (int i = 0; i < keyList.length; i++) {
        if (scrollController.offset >= totalOffset &&
            scrollController.offset < totalOffset + heightList[i]) {
          tabController.animateTo(
            i,
            duration: Duration(milliseconds: 0),
          );
          return;
        }
        totalOffset += heightList[i];
      }
    }
  }

  // 初始化heightList
  initHeightList() {
    for (int i = 0; i < keyList.length; i++) {
      if (keyList[i].currentContext != null) {
        try {
          heightList[i] = keyList[i].currentContext.size.height;
        } catch (e) {
          // 这里只是计算可视部分，因此需要持续计算
          print("can not get size, so do not modify heightList[i]");
        }
      }
    }
  }

  // 点击tabBar去对应锚点
  void _gotoAnchorPoint() async {
    GlobalKey key = targetKey;
    if (key.currentContext != null) {
      scrollController.position
          .ensureVisible(
        key.currentContext.findRenderObject(),
        alignment: 0.0,
      )
          .then((value) {
        // 在此基础上再偏移一个TAB_HEIGHT的高度
        if (scrollController.offset - TAB_HEIGHT > 0) {
          scrollController.jumpTo(scrollController.offset - TAB_HEIGHT);
        }
      });
      return;
    }

    // 以下代码处理获取不到key.currentContext情况，没问题也可以去掉
    int nearestRenderedIndex = 0;
    bool foundIndex = false;
    for (int i = keyList.indexOf(key) - 1; i >= 0; i -= 1) {
      // find first non-null-currentContext key above target key
      if (keyList[i].currentContext != null) {
        try {
          // Only when size is get without any exception，this key can be used in ensureVisible function
          Size size = keyList[i].currentContext.size;
          print("size: $size");
          foundIndex = true;
          nearestRenderedIndex = i;
        } catch (e) {
          print("size not availabel");
        }
        break;
      }
    }
    if (!foundIndex) {
      for (int i = keyList.indexOf(key) + 1; i < keyList.length; i += 1) {
        // find first non-null-currentContext key below target key
        if (keyList[i].currentContext != null) {
          try {
            // Only when size is get without any exception，this key can be used in ensureVisible function
            Size size = keyList[i].currentContext.size;
            print("size: $size");
            foundIndex = true;
            nearestRenderedIndex = i;
          } catch (e) {
            print("size not availabel");
          }
          break;
        }
      }
    }
    int increasedOffset = nearestRenderedIndex < keyList.indexOf(key) ? 1 : -1;
    for (int i = nearestRenderedIndex;
        i >= 0 && i < keyList.length;
        i += increasedOffset) {
      if (keyList[i].currentContext == null) {
        Future.delayed(new Duration(microseconds: 10), () {
          _gotoAnchorPoint();
        });
        return;
      }
      if (keyList[i] != targetKey) {
        await scrollController.position.ensureVisible(
          keyList[i].currentContext.findRenderObject(),
          alignment: 0.0,
          curve: Curves.linear,
          alignmentPolicy: increasedOffset == 1
              ? ScrollPositionAlignmentPolicy.keepVisibleAtEnd
              : ScrollPositionAlignmentPolicy.keepVisibleAtStart,
        );
      } else {
        await scrollController.position
            .ensureVisible(
          keyList[i].currentContext.findRenderObject(),
          alignment: 0.0,
        )
            .then((value) {
          Future.delayed(new Duration(microseconds: 1000), () {
            if (scrollController.offset - TAB_HEIGHT > 0) {
              scrollController.jumpTo(scrollController.offset - TAB_HEIGHT);
            } else {}
          });
        });

        break;
      }
    }
  }

  // 悬浮tab的item
  List<Widget> _buildTabsWidget(List<String> tabList) {
    var list = List<Widget>();
    String keyValue = DateTime.now().millisecondsSinceEpoch.toString();
    for (var i = 0; i < tabList.length; i++) {
      var widget = Tab(
        text: tabList[i],
        key: Key("i$keyValue"),
      );
      list.add(widget);
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('滚动悬浮示例Demo'),
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.topLeft,
          overflow: Overflow.clip,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: CustomScrollView(
                    controller: scrollController,
                    slivers: <Widget>[
                      SliverList(
                        delegate: SliverChildBuilderDelegate(
                          (BuildContext context, int index) {
                            return Container(
                              key: keyList[index],
                              height: 500,
                              color: colorList[index],
                            );
                          },
                          childCount: keyList.length,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
            if (showTabBar)
              Positioned(
                top: 0,
                width: MediaQuery.of(context).size.width,
                child: Opacity(
                  opacity: opacity,
                  child: Container(
                    color: Colors.white,
                    child: TabBar(
                      controller: tabController,
                      indicatorColor: Color(0xfffdd108),
                      labelColor: Color(0xff343a40),
                      unselectedLabelColor: Color(0xff8E9AA6),
                      unselectedLabelStyle: TextStyle(
                          fontSize: 14, fontWeight: FontWeight.normal),
                      isScrollable: true,
                      labelStyle:
                          TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                      tabs: _buildTabsWidget(listTitle),
                      onTap: _onTabChanged,
                    ),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

直接运行上述文件即可

示例： main.dart

import 'package:flutter/material.dart';
import 'package:scroll_tabbar_sample/tabbar_scroll_demo_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TabBarScrollDemoPage(),
    );
  }
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

lower_bound与upper_bound的应用

lower_bound与upper_bound的应用

<1>lower_bound (1). . 上述代码返回在升序排序的序列a中第一个大于等于 t 的元素的地址. 示例: (2) 上述代码返回在升序排序的序列a中第一个大于等于 t 的元素的下标. 示例: 例题: P2249 【深基13.例1】查找 P2249 【深基13.例1】查找 - 洛谷 | 计算机科学教育新生…
阅读更多...
JavaSE(多态、abstract、接口）

JavaSE(多态、abstract、接口）

1.多态 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同 的状态。 向上转型 向上转型&#xff1a;实际就是创建一个子类对象&#xff0c;将其当成父类对象来使用。 语法格式&…
阅读更多...
（牛客）小杜跑酷

（牛客）小杜跑酷

链接&#xff1a;https://ac.nowcoder.com/acm/contest/49244/F?&headNavacm 来源&#xff1a;牛客网 题目描述 小杜又在玩游戏了&#xff01;这回他玩的是跑酷游戏&#xff01; 已知该跑酷地图长为n&#xff0c;有3层&#xff0c;可以理解为一张3n的地图。令人新奇的是&…
阅读更多...
Shiro学习看这一篇文章就够了

Shiro学习看这一篇文章就够了

第一章 Shiro简介 第1节 shiro介绍 1官网地址: http://shiro.apache.org/Apache Shiro 是一个功能强大,易于使用的Java安全框架,他执行认证、授权、加密、会话管理等功能,使用Shiro易于理解的API,使你能够轻松的保护任何应用,如移动端应用,大型web应用以及企业级应用. Shiro可…
阅读更多...
当前主流的后端语言，谁能夺得桂冠，果然是后生可畏！

当前主流的后端语言，谁能夺得桂冠，果然是后生可畏！

主流后端语言 如今编程语言遍地开花&#xff0c;烟花迷乱&#xff0c;小编整理了最流行的几种编程语言如下&#xff1a; 这几种语言都是经久不衰&#xff0c;占领着后端编程界的半壁江山。TIOBE上的语言排名&#xff1a; C、Java、python&#xff0c;C&#xff0c; C#鏖战榜首…
阅读更多...
元宇宙浪潮下，数智人拒绝“标品”

元宇宙浪潮下，数智人拒绝“标品”

作者 | 曾响铃 文 | 响铃说 在各地文博会、生活节等大型文娱活动上&#xff0c;在博物馆等各类场馆的线上平台&#xff0c;在企业与用户交互的窗口&#xff0c;在政务平台滚动政策宣讲片中&#xff0c;尤其是&#xff0c;在各大卫视的跨年晚会上…… 2022年末、2023年年初&a…
阅读更多...
MyBatis Generator ORM层面的代码自动生成器

MyBatis Generator ORM层面的代码自动生成器

在日常开发工作中&#xff0c;我们往往需要自己去构建各种数据表所对应的持久化对象&#xff08;POJO&#xff09;、用于操作数据库的接口&#xff08;DAO&#xff09;以及跟 DAO 所绑定的对应 XML。这都是一些重复性的操作&#xff0c;不需要多大技术含量。MyBatis Generator工…
阅读更多...
优思学院｜Minitab中的子组大小应该怎样填写？

优思学院｜Minitab中的子组大小应该怎样填写？

关于SPC中的均值极差控制图&#xff08;X-bar-R Chart&#xff09;&#xff0c;都是质量管理和六西格玛最常用的工具之一&#xff0c;学生经常都会问及SPC和子组的问题。 所谓的子组&#xff08;Subgroup&#xff09;&#xff0c;是指在同一组条件&#xff08;包括人、机、物、…
阅读更多...
人工智能辅助药物发现(2)苗头化合物筛选

人工智能辅助药物发现(2)苗头化合物筛选

目录AI辅助苗头化合物筛选概述AI辅助CPICPI数据库蛋白质和化合物的特征表示深度学习CPI预测经典Y型架构基于注意力的架构基于复合物的架构CPI性能评估苗头化合物筛选的发展前景挑战与趋势实际应用AI辅助苗头化合物筛选概述 新型小分子药物的开发通常从生物学家确定疾病靶标开始…
阅读更多...
oracle数据库初始化问题及处理方法记录

oracle数据库初始化问题及处理方法记录

环境&#xff1a; 服务器装机是redhat7.9&#xff0b;oracle19&#xff0c;用户是oracle&#xff0c;用户组dba 装机后进行初始化&#xff1a; 1.配置oracle用户环境变量&#xff1a;~/.bash_profile export ORACLE_SIDxxx export ORACLE_BASE/oracle/app/oracle export OR…
阅读更多...
海康visionmaster-在WPF中使用Winform控件的方法

海康visionmaster-在WPF中使用Winform控件的方法

描述 环境&#xff1a;VM4.0.0 VS2013及以上 现象&#xff1a;在算子SDK开发过程中&#xff0c;用户如何使用封装好的Winform模板匹配等控件&#xff1f; 解答 首先添加对如下两个dll文件的引用&#xff1a;WindowsFormsIntegration.dll&#xff0c;System.Windows.Forms.…
阅读更多...
深入MySQL字符编码与对照规则

深入MySQL字符编码与对照规则

前言 本篇和大家一起深入MySQL的字符集与对照规则&#xff0c;剖析下我们存储在MySQL中的字段是如何进行存储和校验比对的。 先看问题&#xff1a;unique key为什么失效了&#xff1f;拉齐共识&#xff1a;回顾下字符编码的基础知识&#xff0c;回炉下ASCII和Unicode。深入了解…
阅读更多...
算法训练营 day22 二叉树 二叉搜索树的最近公共祖先 二叉搜索树中的插入操作 删除二叉搜索树中的节点

算法训练营 day22 二叉树 二叉搜索树的最近公共祖先 二叉搜索树中的插入操作 删除二叉搜索树中的节点

算法训练营 day22 二叉树 二叉搜索树的最近公共祖先 二叉搜索树中的插入操作 删除二叉搜索树中的节点 二叉搜索树的最近公共祖先 235. 二叉搜索树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度…
阅读更多...
第三章 逻辑与推理

第三章 逻辑与推理

命题逻辑谓词逻辑知识图谱推理因果推理 3.1 命题逻辑 逻辑和推理是基于知识的操作。 命题逻辑是应用一套形式化规则对以符号表示的描述性陈述进行推理的系统。在命题逻辑中&#xff0c;一个或真或假的描述性陈述被称为原子命题&#xff0c;对原子命题的内部结构不做任何解析。…
阅读更多...
UnityC#的lock用法简记

UnityC#的lock用法简记

UnityC#的lock用法简记简述代码实例一、单线程二、多线程无lock三、多线程使用lock死锁注意拓展lock->InvokeMonitor参考链接简述 多线程环境中&#xff0c;不使用lock锁&#xff0c;会形成竞争条件&#xff0c;导致错误。 使用lock锁可以保证当有线程操作某个共享资源时&a…
阅读更多...
【ONE·C || 操作符详解】

【ONE·C || 操作符详解】

总言 C语言&#xff1a;各种操作符的使用介绍。 文章目录总言1、算术操作符2、移位操作符2.1、整体介绍2.2、左移操作符2.3、右移操作符&#xff08;逻辑右移、算术右移&#xff09;3、位操作符3.1、整体介绍3.2、演示实例3.2.1、按位与3.2.2、按位或3.2.3、按位异或3.2.4、按位…
阅读更多...
离线文章画像计算--Tfidf计算

离线文章画像计算--Tfidf计算

2.4.2 Tfidf计算 2.4.2.1 目的 计算出每篇文章的词语的TFIDF结果用于抽取画像 2.4.2.2TFIDF模型的训练步骤 读取N篇文章数据文章数据进行分词处理TFIDF模型训练保存&#xff0c;spark使用count与idf进行计算利用模型计算N篇文章数据的TFIDF值 2.4.2.3 实现 想要用TFIDF进行…
阅读更多...
【数据结构初阶（Java）】认识时间复杂度和空间复杂度

【数据结构初阶（Java）】认识时间复杂度和空间复杂度

目录 前言&#xff1a; 1、算法效率 2、时间复杂度 1、大O的渐近表示法&#xff08;不是一个准确的&#xff09; 2、时间复杂度练习题&#xff08;没有明确要求&#xff0c;计算的时间复杂度就是最坏情况下&#xff09; 3、空间复杂度 前言&#xff1a; 如何衡量一个算法的…
阅读更多...
Java中多线程wait和notify的用法

Java中多线程wait和notify的用法

目录 一、wait和notify/notifyAll的由来 二、wait()方法 三、notify方法 3.1 notify的作用 3.2 wait和notify的 相互转换代码图 3.3 notifyAll 四、为什么需要notify和wait都需要上锁&#xff1f; 五、wait和sleep的对比 前言&#xff1a;由于线程之间是抢占式执行的&a…
阅读更多...
Linux常用命令——tftp命令

Linux常用命令——tftp命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) tftp 在本机和tftp服务器之间使用TFTP协议传输文件 补充说明 tftp命令用在本机和tftp服务器之间使用TFTP协议传输文件。 TFTP是用来下载远程文件的最简单网络协议&#xff0c;它其于UDP协议而实现。嵌入式linu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023