当前位置: 首页 > 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教学可以针对每…...

FreeRTOS进阶:任务优先级与调度策略深度解析

1. FreeRTOS任务优先级基础 在嵌入式实时操作系统中&#xff0c;任务优先级决定了任务执行的先后顺序。FreeRTOS采用数值越大优先级越高的设计&#xff0c;优先级范围通常为0到(configMAX_PRIORITIES-1)。我刚开始接触FreeRTOS时&#xff0c;经常混淆这个概念&#xff0c;直到在…...

3步解锁音乐自由:NCMDump帮你破解网易云音乐NCM格式

3步解锁音乐自由&#xff1a;NCMDump帮你破解网易云音乐NCM格式 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为下载的网易云音乐只能在特定App里播放而烦恼吗&#xff1f;当你精心挑选的歌单无法在车载音响、运动手表或家庭音…...

Python MCP服务部署卡在step3?揭秘92%开发者忽略的config.toml权限校验机制(配置失效终极诊断指南)

第一章&#xff1a;Python MCP服务部署卡在step3的典型现象与问题定位当执行 Python MCP&#xff08;Model Control Platform&#xff09;服务自动化部署脚本时&#xff0c;step3&#xff08;即服务容器化构建与镜像推送阶段&#xff09;常出现长时间无响应、日志停滞于 Buildi…...

别再死记硬背了!用Python可视化理解L-smooth函数与梯度Lipschitz连续

别再死记硬背了&#xff01;用Python可视化理解L-smooth函数与梯度Lipschitz连续 第一次接触L-smooth这个概念时&#xff0c;我盯着数学公式看了整整一个下午——梯度Lipschitz连续、二次上界、等价性证明&#xff0c;每个词都认识&#xff0c;连起来却像天书。直到我用Python画…...

推理神器Phi-4-mini-reasoning实测:解方程、逻辑题一键生成答案

推理神器Phi-4-mini-reasoning实测&#xff1a;解方程、逻辑题一键生成答案 1. 模型介绍与核心能力 Phi-4-mini-reasoning是一款专注于逻辑推理和数学计算的轻量级AI模型。与通用聊天模型不同&#xff0c;它被专门设计用于处理需要分步推理的任务&#xff0c;能够将复杂的解题…...

避坑指南:GF-3 SAR数据预处理中常见的5个错误及解决方法

GF-3 SAR数据预处理实战&#xff1a;5个关键错误分析与Python解决方案 在遥感数据处理领域&#xff0c;GF-3卫星的合成孔径雷达(SAR)数据因其全天候、全天时的观测能力而备受青睐。然而&#xff0c;从原始数据到可用成果的预处理过程中&#xff0c;即便是经验丰富的工程师也常会…...

Pylint魔法方法验证:10个技巧确保特殊方法符合Python规范的终极指南

Pylint魔法方法验证&#xff1a;10个技巧确保特殊方法符合Python规范的终极指南 【免费下载链接】pylint Its not just a linter that annoys you! 项目地址: https://gitcode.com/gh_mirrors/pyl/pylint Python开发者们&#xff0c;你是否曾为魔法方法&#xff08;dund…...

数据库工具集成与自动化:awesome-db-tools 中的工作流优化终极指南

数据库工具集成与自动化&#xff1a;awesome-db-tools 中的工作流优化终极指南 【免费下载链接】awesome-db-tools Everything that makes working with databases easier 项目地址: https://gitcode.com/gh_mirrors/aw/awesome-db-tools awesome-db-tools 是一个社区驱…...

【设计模式】行为型-模板方法模式

文章目录前言一、概念二、核心结构三、Java 代码实现&#xff08;订单支付流程&#xff09;1. 抽象类&#xff08;定义模板&#xff09;2. 具体子类&#xff1a;微信支付3. 具体子类&#xff1a;支付宝支付4. 客户端调用四、钩子方法&#xff08;Hook&#xff09;—— 让模板更…...

小白友好:InstructPix2Pix极速推理,秒级响应你的修图指令

小白友好&#xff1a;InstructPix2Pix极速推理&#xff0c;秒级响应你的修图指令 你有没有过这样的经历&#xff1f;手机里存着一张照片&#xff0c;风景很美&#xff0c;但天空灰蒙蒙的&#xff1b;或者朋友聚会合影&#xff0c;大家都笑得很开心&#xff0c;就是背景有点乱。…...