当前位置: 首页 > 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 测试…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...