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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

6.9-QT模拟计算器

源码: 头文件: widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMouseEvent>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *parent nullptr);…...

DeepSeek越强,Kimi越慌?

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...