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

Flutter 多标签页显示 有关TabController需要知道的知识

背景

很多应用都需要导航栏加多个标签页的方式来构建一个多页显示逻辑,比如购物软件常有:已完成,已发货,待付款三个顶部导航按钮,点击则下面的页面显示不同属性的订单

正文

在flutter中,实现这样的功能需要依靠TabBar(进行页面选择)和TabBarView(展示不同页面),而TabController起到沟通这两个控件的作用。

DefaultTabController

DefaultTabController,它是一个flutter内置的简易控制器,常在功能不复杂时候用于快速构建页面
 

DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(bottom: TabBar(tabs: [],),),body: TabBarView(children: [],),),
)

手动创建TabController

更复杂功能的场景,比如动态添加或删除标签页,监听标签页变化,需要手动创建TabController

步骤如下

  • StatefulWidget中初始化TabController
  • 使用with SingleTickerProviderStateMixin或TickerProviderStateMixin(如果有多个动画控制器)
  • 在initState方法中初始化TabController,并在dispose方法中释放它
class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {TabController? _tabController;@overridevoid initState() {super.initState();_tabController = TabController(vsync: this, length: 3);}@overridevoid dispose() {_tabController?.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(bottom: TabBar(controller: _tabController,tabs: [],),),body: TabBarView(controller: _tabController,children: [],),);}
}

性能

使用TabBarView,所有的标签页内容默认都会被加载。如果每个标签页中都有复杂的布局或需要加载大量数据,会影响性能

相关文章:

Flutter 多标签页显示 有关TabController需要知道的知识

背景 很多应用都需要导航栏加多个标签页的方式来构建一个多页显示逻辑&#xff0c;比如购物软件常有&#xff1a;已完成&#xff0c;已发货&#xff0c;待付款三个顶部导航按钮&#xff0c;点击则下面的页面显示不同属性的订单 正文 在flutter中&#xff0c;实现这样的功能需…...

【Elasticsearch专栏 16】深入探索:Elasticsearch的Master选举机制及其影响因素分析

Elasticsearch&#xff0c;作为当今最流行的开源搜索和分析引擎&#xff0c;以其分布式、可扩展和高可用的特性赢得了广大开发者的青睐。在Elasticsearch的分布式架构中&#xff0c;集群的稳健性和高可用性很大程度上依赖于其Master节点的选举机制。本文将深入剖析Elasticsearc…...

Leetcode : 215. 数组中的第 K 个最大元素

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 思路&#xff1a;最开始排序算法&…...

node express实现Excel文档转json文件

有些场景我们需要将Excel文档中的内容抽取出来生成别的文件&#xff0c;作为一个前端&#xff0c;服务框架最应该熟悉的就是node了&#xff0c;以下是基于多语言转换实现代码&#xff0c;看明白原理自己改一改就能用了 1.安装node环境 2.创建一个文件夹&#xff0c;文件夹中创建…...

【算法分析与设计】最大二叉树

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最…...

面试问答总结之并发编程

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f380;多线程的优点、缺点&#x1f415;并发编程的核心问题 &#xff1a;不可见性、乱序性、非原子性&#x1fa80;不可见性&#x1fa80;乱序性&#x1fa80;非原子性&#x1…...

红外测温仪芯片方案开发设计

红外测温仪由光学系统、光电探测器、信号放大器及信号处理、显示输出等部分组成。光学系统汇集其视场内的目标红外辐射能量&#xff0c;视场的大小由测温仪的光学零件以及位置决定。被测物体辐射的红外首先进入测温仪的光学系统&#xff0c;再由光学系统汇聚射入的红外线&#…...

五、数组——Java基础篇

五、数组 1、数组元素的遍历 1.1数组的遍历&#xff1a;将数组内的元素展现出来 1、普通for遍历&#xff1a;根据下表获取数组内的元素 2、增强for遍历&#xff1a; for&#xff08;数据元素类型 变量名&#xff1a;数组名&#xff09;{ 变量名&#xff1a;数组内的每一个值…...

如何用golang写一个自己的后端框架

如果你想要不使用任何现有的后端框架,完全从头开始创建一个后端框架,你需要实现Web服务器的基本组件,比如路由器、请求处理、中间件支持等。以下是一个简单的指南,用于创建一个基本的、不使用任何外部框架的Go后端框架。 步骤 1: 设置工作环境 确保你已经安装了Go语言环境…...

linux 如何给服务器批量做免密,如何批量挂在磁盘

前提条件 所有机器网络互通&#xff0c;且已做了免密登录 linux服务器批量做免密脚本如下 #!/bin/bash # 定义服务器列表文件 SERVERS_FILE"host" # 定义生成的密钥的存储目录 KEY_DIR"/root/.ssh" # 检查是否输入了文件路径 if [ $# -ne 1 ]; then …...

Android Activity的生命周期详解

在Android开发中&#xff0c;了解Activity的生命周期是非常重要的&#xff0c;它决定了Activity在不同状态下的行为和处理逻辑。Android中的Activity生命周期包括多个方法&#xff0c;每个方法都代表了Activity在特定状态下的行为。下面我们来逐一介绍这些方法及其对应的生命周…...

python学习笔记-内置类型

Python内置类型是Python编程语言中自带的基本数据类型&#xff0c;它们用于存储和处理数据。其中包括数字、序列、映射、类、实例和异常等主要类型。 在这些内置类型中&#xff0c;有一些是可变的&#xff0c;它们具有修改自身内容的能力&#xff0c;比如添加、移除或重排成员…...

校园微社区微信小程序源码/二手交易/兼职交友微信小程序源码

云开发校园微社区微信小程序开源源码&#xff0c;这是一款云开发校园微社区-二手交易_兼职_交友_项目微信小程序开源源码&#xff0c;可以给你提供快捷方便的校园生活&#xff0c;有很多有趣实用的板块和功能&#xff0c;如&#xff1a;闲置交易、表白交友、疑问互答、任务兼职…...

如何在 Angular 中使用 NgTemplateOutlet 创建可重用组件

简介 单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 Angular 应用程序更容易测试和开发。 在 Angular 中&#xff0c;使用 NgTemplateOutlet 而不是创建特定组件&#xff0c;可以使组件在不修改组件本身的情况下轻松修改为各种用例。 在本文…...

改进的yolo交通标志tt100k数据集目标检测(代码+原理+毕设可用)

YOLO TT100K: 基于YOLO训练的交通标志检测模型 在原始代码基础上&#xff1a; 修改数据加载类&#xff0c;支持CoCo格式&#xff08;使用cocoapi&#xff09;&#xff1b;修改数据增强&#xff1b;validation增加mAP计算&#xff1b;修改anchor&#xff1b; 注: 实验开启weig…...

nginx 日志,压缩,https功能介绍

一&#xff0c; 自定义访问日志 &#xff08;一&#xff09;日志位置存放 1&#xff0c;格式 2&#xff0c; 级别 level: debug, info, notice, warn, error, crit, alert, emerg 3&#xff0c;示例 服务机定义 错误日志存放位置 客户机错误访问 查看错误日志 4&#xff…...

代码随想录三刷day17

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣144. 二叉树的前序遍历二、力扣145. 二叉树的后序遍历三、力扣94. 二叉树的中序遍历四、力扣144. 二叉树的前序遍历无、力扣145. 二叉树的后序遍历六、…...

postcss-px-to-viewport include属性

包含include配置的(github)&#xff1a;npm i https://github.com/evrone/postcss-px-to-viewport -S 包含include配置的(npm)&#xff1a;npm i postcss-px-to-viewport-8-with-include -S 不包含包include配置的(npm)&#xff1a;npm i postcss-px-to-viewport 看了一下这篇文…...

C++设计模式——抽象工厂模式

文章目录 抽象工厂模式的主要组成部分抽象工厂模式的一个典型例子抽象工厂模式用于其他场景抽象工厂模式与其他设计模式结合使用 C 中的抽象工厂模式是一种创建型设计模式&#xff0c;它主要用于处理对象家族的创建&#xff0c;这些对象之间可能存在一定的关联关系或属于相同的…...

Windows安装VNC连接工具并结合cpolar实现远程内网Ubuntu系统桌面

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…...

【AGI意识觉醒倒计时】:基于217项跨模态意识指标的预测模型显示——2027.03±47天为概率峰值

第一章&#xff1a;AGI意识觉醒倒计时&#xff1a;217项跨模态指标与概率峰值的科学共识 2026奇点智能技术大会(https://ml-summit.org) 跨模态意识评估框架的实证基础 217项指标并非主观枚举&#xff0c;而是基于全球14个顶尖AGI研究团队&#xff08;含DeepMind、OpenAI Ali…...

电力-DTU实战配置:从组态王到花生壳的组网与调试

1. DTU在电力行业的实战价值 DTU&#xff08;数据终端设备&#xff09;在电力自动化系统中扮演着神经末梢的角色。我参与过多个变电站监控项目&#xff0c;发现很多新手工程师容易把DTU和普通无线模块混淆。实际上&#xff0c;DTU是自带完整协议栈的智能终端&#xff0c;它能将…...

保姆级教程:从驱动到IDE,搞定MaixBit开发环境(附固件选择避坑指南)

保姆级教程&#xff1a;从驱动到IDE&#xff0c;搞定MaixBit开发环境&#xff08;附固件选择避坑指南&#xff09; 刚拿到MaixBit开发板的新手们&#xff0c;面对嵌入式AI开发可能会感到无从下手。别担心&#xff0c;这篇教程将带你从零开始&#xff0c;一步步完成开发环境的搭…...

如何快速上手Citra模拟器:3步完成3DS游戏体验的终极指南

如何快速上手Citra模拟器&#xff1a;3步完成3DS游戏体验的终极指南 【免费下载链接】citra A Nintendo 3DS Emulator 项目地址: https://gitcode.com/GitHub_Trending/ci/citra Citra是一款开源的任天堂3DS模拟器&#xff0c;让你能在PC上畅玩经典的3DS游戏。无论你是想…...

Access练习题(4)

请务必仔细阅读下列信息&#xff0c;单击“回答”按钮&#xff0c;进行Access2003 操作考试。在考生文件夹的Paper子文件夹中&#xff0c;已有“Access.mdb”文件存在&#xff0c;按下列要求操作&#xff0c;结果存盘。1、在库中建立一个“供货商”表&#xff0c;字段信息为&am…...

Node-Cache 测试策略与覆盖率:确保缓存可靠性的完整方法

Node-Cache 测试策略与覆盖率&#xff1a;确保缓存可靠性的完整方法 【免费下载链接】node-cache a node internal (in-memory) caching module 项目地址: https://gitcode.com/gh_mirrors/no/node-cache Node-Cache 作为一款轻量级的内存缓存模块&#xff0c;其可靠性直…...

告别MATLAB!用ArcGIS Pro处理XYZ点云数据,5步搞定三维地形建模与表面积计算

告别MATLAB&#xff01;用ArcGIS Pro处理XYZ点云数据&#xff0c;5步搞定三维地形建模与表面积计算 当我们需要从离散的XYZ坐标点重建三维地形时&#xff0c;MATLAB的mesh函数可能是许多科研人员的首选。但如果你需要精确计算复杂曲面的表面积、生成等高线或分析地形特征&#…...

3大核心功能解析:Obsidian本地AI助手如何重塑你的隐私优先知识工作流

3大核心功能解析&#xff1a;Obsidian本地AI助手如何重塑你的隐私优先知识工作流 【免费下载链接】obsidian-local-gpt Local Ollama and OpenAI-like GPTs assistance for maximum privacy and offline access 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-local-…...

QMCDecode:数字音乐解放引擎,12种加密格式一键破解

QMCDecode&#xff1a;数字音乐解放引擎&#xff0c;12种加密格式一键破解 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff…...

Qt右键菜单失效排查指南:从customContextMenuRequested信号到正确响应

1. 当右键菜单不响应时&#xff0c;先检查这三个关键点 最近在重构一个Qt项目时&#xff0c;遇到了一个典型问题&#xff1a;明明按照文档正确连接了customContextMenuRequested信号和槽函数&#xff0c;但右键点击控件时菜单死活不弹出来。如果你也遇到过类似情况&#xff0c;…...