当前位置: 首页 > news >正文

Flutter NestedScrollView 、SliverAppBar全解析,悬浮菜单的应用

在我们开发过程中经常会使用到悬浮菜单的使用,当我们滑动到指定位置后,菜单会自动悬浮。

实现效果如下(左为滑动前、右为滑动后):

上述便是通过NestedScrollView 、SliverAppBar实现的效果,通过两个控件我们便可以实现上述的效果。

废话不多说直接上代码,代码的实现原理会以注释的形式实现:

import 'package:aboxmini/view/home/room/room_device_page.dart';
import 'package:flutter/material.dart';
import '../../model/app_model.dart';class HomeTabBar extends StatefulWidget {const HomeTabBar({super.key});@overrideState<HomeTabBar> createState() => _HomeTabBarState();
}class _HomeTabBarState extends State<HomeTabBar> with TickerProviderStateMixin {/// 自定义的一个类,此类可获取屏幕宽度等final AppModel _appModel = AppModel.share();/// 设置 中间展示区域的高度final double _topHeight = 180 + AppModel.share().safeTop + kToolbarHeight;/// 分栏控制器late TabController tabController = TabController(length: 3, vsync: this);/// 分栏控制器每一个标题final _tabs = <String>["Tab 1", "Tab 2", "Tab 3"];@overridevoid dispose() {tabController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return DefaultTabController(length: _tabs.length,child: NestedScrollView(headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {return <Widget>[SliverOverlapAbsorber(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),sliver: SliverAppBar(/// 取消系统导航左边按钮leading: Container(),/// 设置背景色backgroundColor: Colors.white,/// 设置左边按钮宽度leadingWidth: _appModel.width,centerTitle: false,pinned: true,floating: false,snap: false,primary: true,/// 设置分栏区域上面的高度expandedHeight: 230.0,elevation: 10,//是否显示阴影,直接取值innerBoxIsScrolled,展开不显示阴影,合并后会显示forceElevated: innerBoxIsScrolled,///自定义导航和中间内容的展示flexibleSpace: _displayNavAndEnvInfo(),/// TabBar 分栏标题bottom: _addTabBar(),),),];},/// 分栏展示的页面信息body: _addTabBarView(),),);}/// 自定义导航和中间内容展示Widget _displayNavAndEnvInfo() {return Container(color: Colors.white,width: _appModel.width,height: _topHeight,child: Column(children: <Widget>[_addNav(),_displayEnvDevice(),],),);}/// 自定义导航 可随意定制Widget _addNav() {return SizedBox(width: _appModel.width,height: _appModel.safeTop + kToolbarHeight,child: Container(margin: EdgeInsets.only(top: _appModel.safeTop),height: kToolbarHeight,width: _appModel.width,alignment: Alignment.centerLeft,child: Row(children: <Widget>[GestureDetector(onTap: () {widget.z.toggle!();},child: Row(children: [Container(margin: const EdgeInsets.only(left: 12, right: 6),child: const Icon(Icons.menu,size: 20,color: Colors.red,),),Text("${_appModel.currentDatum?.hostname ?? ""}"),],),),Expanded(child: Container())],),),);}/// 导航和TabBar中间展示的内容,可随意自定义Widget _displayEnvDevice() {return Container(color: Colors.white,);}/// TabBar 展示样式自定义,可以滚动并且居左展示PreferredSize _addTabBar() {return PreferredSize(/// 设置高度preferredSize: const Size.fromHeight(35),child: Align(/// 设置展示方式alignment: Alignment.centerLeft,/// TabBar选中、未选中样式child: TabBar(/// 是否允许滚动 isScrollable: true,unselectedLabelColor: Colors.black54,unselectedLabelStyle: const TextStyle(fontSize: 15),labelColor: Colors.blue,labelStyle:const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),indicatorSize: TabBarIndicatorSize.label,tabs: _tabs.map((String name) => Tab(text: name)).toList(),),),);}/// TabBar 分栏下的各个页面Widget _addTabBarView() {return TabBarView(children: _tabs.map((String name) {// 分栏下的页面(可随意定义、也可以设置成Text等控件),实现方式还有其他方式return RoomDevicePage();}).toList(),);}
}

以上便是菜单悬浮的效果实现,注释写的很详细,直接粘贴复制即可实现。

相关文章:

Flutter NestedScrollView 、SliverAppBar全解析,悬浮菜单的应用

在我们开发过程中经常会使用到悬浮菜单的使用&#xff0c;当我们滑动到指定位置后&#xff0c;菜单会自动悬浮。 实现效果如下&#xff08;左为滑动前、右为滑动后&#xff09;&#xff1a; 上述便是通过NestedScrollView 、SliverAppBar实现的效果&#xff0c;通过两个控件我…...

Mongodb 副本集名称重命名

副本集重命名 要重命名副本集&#xff0c;您必须关闭副本集的所有成员&#xff0c;然后使用新的副本集名称配置每个成员的数据库。 此过程需要停机。 先决条件 确保您的副本集未分片。重命名过程仅适用于未分片的副本集。 在重命名副本集之前&#xff0c;请 对 MongoDB 部…...

C#WPF属性触发器实例

本文讲解C#WPF属性触发器的实例 在属性触发器中,当一个属性发生更改时,它将立即或动画更改另一个属性 实例 <Windowx:Class="TriggerDemo.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://sch…...

Kotlin 核心语法,为什么选择Kotlin ?

Kotlin 是一个基于 JVM 的新的编程语言&#xff0c;由 JetBrains 开发。与Java相比&#xff0c;Kotlin的语法更简洁、更具表达性&#xff0c;而且提供了更多的特性。 Kotlin是使用Java开发者的思维被创建的&#xff0c;Intellij作为它主要的开发IDE。对于 Android开发者&#…...

SpringCloud微服务:Nacos的集群、负载均衡、环境隔离

目录 集群 在user-service的yml文件配置集群 启动服务 负载均衡 order-service配置集群 设置负载均衡 当本地集群的服务挂掉时 访问权重 环境隔离 1、Nacos服务分级存储模型 一级是服务&#xff0c;例如userservice 二级是集群&#xff0c;例如杭州或上海 …...

Selenium+Python做web端自动化测试框架实战

最近受到万点暴击&#xff0c;由于公司业务出现问题&#xff0c;工作任务没那么繁重&#xff0c;有时间摸索seleniumpython自动化测试&#xff0c;结合网上查到的资料自己编写出适合web自动化测试的框架&#xff0c;由于本人也是刚刚开始学习python&#xff0c;这套自动化框架目…...

Linux:安装MySQL服务(非docker方式)

1、下载安装包 下载MySQL安装包&#xff0c;需要Oracle官网的账号 下面是网友提供的账号及密码&#xff0c;亲测有效。 账户&#xff1a;3028064308qq.com 我用的这个&#xff0c;可以登陆 密码&#xff1a;OraclePassword123!Oracle Account: 602205528qq.com Oracle Pass…...

C++实现有理数类 四则运算和输入输出

面试 C 程序员&#xff0c;什么样的问题是好问题&#xff1f; - 知乎 https://www.cnblogs.com/bwjblogs/p/12982908.html...

小鸟飞呀飞

欢迎来到程序小院 小鸟飞呀飞 玩法&#xff1a;鼠标控制小鸟飞翔的方向&#xff0c;点击鼠标左键上升&#xff0c;不要让小鸟掉落&#xff0c;从管道中经过&#xff0c;快去飞呀飞哦^^。开始游戏https://www.ormcc.com/play/gameStart/204 html <canvas width"288&quo…...

Unity 场景烘培 ——unity Post-Processing后处理1(四)

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、Post-Processing是什么&#xff1f;二、安装使用Post-Processing1.安装Post-Processing2.使用Post-Processing&#xff08;1&#xff09;.添加Post-process Volume&#xff08…...

Burpsuite抓HTTPS证书导入问题

Burpsuite证书导出有两种方法&#xff1a; 第一种方法 1、开启代理后直接在浏览器中输入burp下载CA证书 2、在中间证书颁发机构中导入刚导出的证书 3、导入完成后再把这个证书选择导出&#xff0c;另存为cer格式的文件 4、在受信任的根证书颁发机构中导入刚保存的cer格式证书…...

python保存文件到zip压缩包中

这里我们使用zipfile这个库进行操作&#xff0c;保存压缩文件相对简单&#xff0c;只需要指定文件名即可&#xff0c;不需要读取那个文件&#xff1a; with zipfile.ZipFile("zip文件路径", mode, zipfile.ZIP_DEFLATED) as z:z.write("压缩源文件路径", …...

java发送媒体类型为multipart/form-data的请求

文章目录 public static String sendMultipartFormDataPostRequest(String urlString, String data) throws IOException {String fullUrl urlString "?" data;log.info("完整请求路径为{}", fullUrl);URL url new URL(fullUrl);HttpURLConnection co…...

自定义类使用ArrayList中的remove

Java中ArrayList对基础类型和字符串类型的删除操作&#xff0c;直接用remove方法即可。但是对于自定义的类来说&#xff0c;用remove方法删除不了&#xff0c;因为没有办法确定是否是要删除的对象。 ArrayList中remove源码是&#xff1a; public boolean remove(Object o) {if…...

前端面试考核点【更持续新中】

文章目录 HTMLcssjsVueReactTypeScript移动端&小程序编译/打包/构建npmnodejs微前端网络安全浏览器性能OKR工程化、标准化 HTML Script放在body中间会阻塞吗&#xff1f;defer与async的区别&#xff1f;https://blog.csdn.net/qq_41887214/article/details/124909219 DOM和…...

linux-docker安装

​TOC 一&#xff0c;Docker简介 百科说&#xff1a;Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化&#xff0c;容器是完全使用沙箱机制&…...

如何用html css js 画出曲线 或者斜线;

效果图 解题思路 将图片全部定位至中心点&#xff0c;然后x轴就变动translateX &#xff0c;y轴同理&#xff1b; 这里有两个问题 浏览器&#xff1a; 以左上角为原点0&#xff0c;0 越往下y越大 数学坐标系&#xff1a;以中心点为原点0&#xff0c;0 越往下y越小&#xff1…...

【错误记录】Uncaught TypeError: m.nodeName.toLowerCase is not a function

描述&#xff1a;在控制台输出上述错误~ 原因&#xff1a;在页面中&#xff0c;使用jQuery 开发时&#xff0c;命名不能和jQuery一起方法属性冲突&#xff0c;比如这里的nodeName&#xff0c;这里换一个不冲突的名字&#xff0c;就解决问题了。...

王颖奇:ONES.ai 上线,以及我的一些思考

ONES.ai 正式上线&#xff01;为你解锁更智能、更高效的新一代研发管理体验 我们上线了 ONES.ai&#xff0c;当然我们用了公开的 LLM(AI)&#xff0c;目前我们最方便使用的就是公开的 LLM&#xff0c;其实是不是 公开的 LLM 也不重要&#xff0c;在未来可预见的时间内&#xff…...

将AI技术与VR元宇宙相结合的整体解决方案

当前人工智能与VR虚拟现实两大热门技术的融合&#xff0c;正引领着人类走向更智能、更数字化、更便捷、更快速的时代。将这两者结合&#xff0c;AI智能检索应用到VR教学中&#xff0c;将为教育带来前所未有的好处。 个性化教学体验 通过AI智能检索&#xff0c;VR教学可以针对每…...

5个维度深度评估:哪款内容解锁工具真正值得投入时间?

5个维度深度评估&#xff1a;哪款内容解锁工具真正值得投入时间&#xff1f; 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在数字信息时代&#xff0c;付费墙已成为内容获取的主要障…...

5个步骤彻底修复Windows更新问题:Reset Windows Update Tool完整指南

5个步骤彻底修复Windows更新问题&#xff1a;Reset Windows Update Tool完整指南 【免费下载链接】Reset-Windows-Update-Tool Troubleshooting Tool with Windows Updates (Developed in Dev-C). 项目地址: https://gitcode.com/gh_mirrors/re/Reset-Windows-Update-Tool …...

从零玩转GitHub:避坑指南与进阶技巧——2026年还不懂的天塌了

好的&#xff0c;今天这篇&#xff0c;咱不聊风花雪月&#xff0c;不扯行业趋势&#xff0c;就唠一个程序员安身立命的硬通货——GitHub。 对&#xff0c;就是那个绿油油的头像、一片Contributions的小方格&#xff0c;被无数简历写成“熟悉版本控制工具”&#xff0c;但可能连…...

京东开放平台应用申请实战:从零到一,避开那些“看不见”的坑

1. 为什么你需要这份京东开放平台避坑指南&#xff1f; 第一次申请京东开放平台应用时&#xff0c;我踩遍了所有能踩的坑。记得当时为了赶项目进度&#xff0c;直接跳过了官方文档的"不重要章节"&#xff0c;结果在云鼎环境配置环节卡了整整三天。后来才发现&#xf…...

在GCP上运行autoresearch

Andrej Karpathy最近开源了autoresearch&#xff0c;这是一个将真实LLM训练环境交给AI代理并让它自主实验的项目。代理修改模型代码&#xff0c;训练恰好5分钟&#xff0c;检查验证损失是否改善&#xff0c;保留或丢弃更改&#xff0c;然后重复。你去睡觉&#xff1b;醒来时会看…...

Java Web新手必看:EDUCODER头哥MVC用户登录实战(含JDBC连接避坑指南)

Java Web新手实战&#xff1a;EDUCODER平台MVC用户登录全流程解析 第一次接触Java Web开发时&#xff0c;最让人兴奋的莫过于亲手实现一个完整的用户登录系统。这不仅是对MVC架构的直观理解&#xff0c;更是打通前后端数据流的关键里程碑。在EDUCODER这样的实训平台上&#xff…...

LFM2.5-1.2B-Thinking-GGUF部署教程:解决‘返回为空’问题的max_tokens调优策略

LFM2.5-1.2B-Thinking-GGUF部署教程&#xff1a;解决返回为空问题的max_tokens调优策略 1. 模型简介与部署准备 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;特别适合在资源有限的环境中快速部署使用。这个模型采用GGUF格式和llama.cpp运行时&…...

Swagger2Word终极指南:从Swagger文档到专业Word接口文档的高效转换方案

Swagger2Word终极指南&#xff1a;从Swagger文档到专业Word接口文档的高效转换方案 【免费下载链接】swagger2word 项目地址: https://gitcode.com/gh_mirrors/swa/swagger2word Swagger2Word是一款专为开发团队设计的开源工具&#xff0c;能够将Swagger/OpenAPI接口文…...

微电网集中式架构vs分布式架构:设计差异与选型依据

微电网作为整合“源、储、荷、网”的新型能源系统&#xff0c;其架构设计直接决定系统的运行效率、可靠性、扩展性与经济性&#xff0c;是微电网规划建设的核心环节。在微电网主流架构中&#xff0c;集中式架构与分布式架构凭借各自的技术特性&#xff0c;适配不同的应用场景与…...

RimSort:重新定义RimWorld模组管理的智能工具

RimSort&#xff1a;重新定义RimWorld模组管理的智能工具 【免费下载链接】RimSort 项目地址: https://gitcode.com/gh_mirrors/ri/RimSort 当你花费数小时手动调整上百个RimWorld模组的加载顺序&#xff0c;却依然遭遇游戏崩溃时&#xff1b;当你在多个平台间切换下载…...