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

Flutter系列(五)底部导航详解

Flutter系列(四)底部导航+顶部导航+图文列表完整代码,如下:

Flutter系列(四)底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

目录

一、前言

二、Scaffold组件

三、BottomNavigationBar组件

四、底部导航的具体实现步骤

步骤1. 构建底部导航组件,设置样式

步骤2. 设置底部导航图标和文字

步骤3. 导航页内容

步骤4. 使用底部导航

五、完整代码和工程结构


一、前言

        本文主要介绍底部导航 BottomNavigationBar 的实现,和Scaffold组件一些常用的属性

二、Scaffold组件

        在程序中查看组件属性可以点击组件Scaffold查看源码,常用属性的中文释义如下表:

属性释义类型
appBar顶部导航PreferredSizeWidget
body底部导航的页面内容Widget(组件)
bottomNavigationBar底部导航BottomNavigationBar
drawer左侧抽屉菜单Widget
backgroundColor背景色Color

         实现底部导航需要用到 bottomNavigationBar 和 body 两个属性

三、BottomNavigationBar组件

         BottomNavigationBar是flutter官方提供的组件,常用属性的中文释义如下表:

属性释义类型
items图文列表项List<BottomNavigationBarItem>
currentIndex当前页索引int
onTap点击切换页面ValueChanged<int>
fixedColor图标选中时颜色Color
type图文样式类型BottomNavigationBarType
iconSize图标尺寸double
selectedFontSize选中时文字尺寸double
unselectedFontSize未选中时文字尺寸double

         BottomNavigationBarItem 是flutter官方提供的组件,常用属性的中文释义如下表:

属性释义类型
icon图标Icon
label文字String

         Icon 是flutter官方提供的组件,提供了很多常用的图标,图标对应的名称有官方文档,而且支持检索,非常方便,链接如下:Flutter Icon 图标网

四、底部导航的具体实现步骤

步骤1. 构建底部导航组件,设置样式

int _bottomNavigationIndex = 0;  //底部导航页的索引,从第一页开始(比如首页)//底部导航-样式BottomNavigationBar _bottomNavigationBar(){return BottomNavigationBar(items: items(), //底部导航-图文列表currentIndex: _currentIndex, //底部导航页的当前索引onTap: (flag) {setState(() {_currentIndex = flag;  //点击响应,切换到选中图标});}, //onTap 点击切换页面fixedColor: Colors.blue,  //图标选中时的颜色:蓝色type: BottomNavigationBarType.fixed, //设置fixed,当图标数超过3个时不会改变样式iconSize: 20,  //图标大小selectedFontSize: 12.0, //选中时字体大小unselectedFontSize: 12.0,  //未选中时字体大小);}

步骤2. 设置底部导航图标和文字

       底部导航的图标和文字内容相对固定,不经常变更,避免代码嵌套太多,可以移出来封装到一个dart文件里,使代码简洁易读,这里封装到自定义的 bottomNavigationBar.dart 文件

//底部导航-图标和文字定义
List<BottomNavigationBarItem> items(){return [const BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页',),const BottomNavigationBarItem(icon: Icon(Icons.find_in_page),label: '发现',),const BottomNavigationBarItem(icon: Icon(Icons.shop),label: '商城',),const BottomNavigationBarItem(icon: Icon(Icons.local_activity),label: '我的',),];
}

步骤3. 导航页内容

         导航页的内容是app展示信息的核心,布局更为丰富,先封装成函数,具体布局后续再扩展

//底部导航页-切换页面
final pages = [IndexPage(), //首页FindPage(), //发现页ShopPage(), //商城页HomePage()  //个人主页
];

步骤4. 使用底部导航

@overrideWidget build(BuildContext context) {return Scaffold(body: pages[_bottomNavigationIndex], //页面切换bottomNavigationBar: _bottomNavigationBar()  //底部导航);}

五、完整代码和工程结构

Flutter系列(四)底部导航+顶部导航+图文列表完整代码_摸金青年v的博客-CSDN博客

END...

相关文章:

Flutter系列(五)底部导航详解

Flutter系列&#xff08;四&#xff09;底部导航顶部导航图文列表完整代码&#xff0c;如下&#xff1a; Flutter系列&#xff08;四&#xff09;底部导航顶部导航图文列表完整代码_摸金青年v的博客-CSDN博客 目录 一、前言 二、Scaffold组件 三、BottomNavigationBar组件 …...

『pyqt5 从0基础开始项目实战』02. 页面布局设计(保姆级图文)

目录弹性布局介绍导包和框架代码布局框架搭建1. 总体布局框架2. 顶部菜单布局3. form添加内容布局4. table数据展示布局5. footer底部菜单完整项目代码总结欢迎关注 『pyqt5 从0基础开始项目实战』 专栏&#xff0c;持续更新中 欢迎关注 『pyqt5 从0基础开始项目实战』 专栏&am…...

【Python机器学习】——平均中位数模式

Python机器学习——平均中位数模式 文章目录 Python机器学习——平均中位数模式一、Python 平均中位数模式一、Python 平均中位数模式 均值、中值和众数 从一组数字中我们可以学到什么? 在机器学习(和数学)中,通常存在三中我们感兴趣的值: 均值(Mean) - 平均值 中值(M…...

Windows窗口

Windows窗口 Unit01注册窗口类 01窗口类的概念 窗口类是包括了窗口的各种参数信息的数据结构每个窗口都具有窗口类&#xff0c;基于窗口类创建窗口每个窗口都具有一个名称&#xff0c;使用前必须注册到系统 02窗口类的分类 系统窗口类 系统已经定义好的窗口类&#xff0c;…...

Spring Transaction 源码解读

Spring Transaction 规范的maven坐标如下&#xff1a; <dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>...</version></dependency>该包提供了spring事务规范和默认的jta(ja…...

[Netty] Channel和ChannelFuture和ChannelFutureListener (六)

文章目录1.Channel介绍2.ChannelFuture接口介绍3.GenericFutureListener接口介绍1.Channel介绍 NIO的Channel与Netty的Channel 不一样 Netty重新设计了Channel接口,并且给予了很多不同的实现, Channel是Netty网络的抽象类, 除了NIO中Channel所包含的网络I/O操作, 主动建立和关…...

条件渲染

组件经常需要根据不同条件显示不同内容。在React中&#xff0c;你可以使用类似于if语句、&&和?:运算符的JavaScript语法有条件地呈现JSX。你将学到&#xff1a;如何根据条件返回不同的JSX如何有条件地包含或排除一段JSX在React代码库中常见的条件语法快捷方式有条件地…...

springboot(10)异步任务

文章目录1、SpringBoot异步任务1.1使用注解EnableAsync开启异步任务支持1.2使用Async注解标记要进行异步执行的方法1.3controller测试2.异步任务相关限制3.1自定义 Executor3.1.1应用层级&#xff1a;3.1.2方法层级&#xff1a;3.2自定义 Executor (第二种方式)4.1异常处理4.1.…...

清华大学开源的chatGLM-6B部署实战

Windows部署 win10 通过wsl部署 常见问题: torch.cuda.OutOfMemoryError: CUDA out of memory. 在Windows的系统环境变量中增加 变量名:PYTORCH_CUDA_ALLOC_CONF 变量值:max_split_size_mb:32 文档书写时使用3090 24G显存配置,其他规格酌情调整 32 至其他值,如未设置变…...

通过矩阵从整体角度搞懂快速傅里叶变换原理

离散傅里叶变换公式 公式 f[k]∑n0N−1g[n]e−i(2π/N)kn,其中(0<n<N)f[k]\sum_{n0}^{N-1}g[n]e^{-i(2\pi/N)kn}, 其中(0<n<N) f[k]n0∑N−1​g[n]e−i(2π/N)kn,其中(0<n<N) 逆变换公式 g[n]1N∑k0N−1f[k]ei(2π/N)kn,其中(0<k<N)g[n]\frac{1}{N}\…...

【C++从0到1】25、C++中嵌套使用循环

C从0到1全系列教程 1、实例代码 #include <iostream> // 包含头文件。 using namespace std; // 指定缺省的命名空间。int main() {// 超女分4个小组&#xff0c;每个小组有3名超女&#xff0c;在控制台显示每个超女的小组编号和组内编号。// 用一个循环…...

FastDFS与Nginx结合搭建文件服务器,并内网穿透实现公网访问

文章目录前言1. 本地搭建FastDFS文件系统1.1 环境安装1.2 安装libfastcommon1.3 安装FastDFS1.4 配置Tracker1.5 配置Storage1.6 测试上传下载1.7 与Nginx整合1.8 安装Nginx1.9 配置Nginx2. 局域网测试访问FastDFS3. 安装cpolar内网穿透4. 配置公网访问地址5. 固定公网地址5.1 …...

密集场景下的行人跟踪替代算法,头部跟踪算法 | CVPR 2021

一个不知名大学生&#xff0c;江湖人称菜狗 original author: Jacky LiEmail : 3435673055qq.com Time of completion&#xff1a;2023.4.8 Last edited: 2023.4.8 目录 摘要 主要内容 结果 这篇文章是CVPR 2021 的最新论文&#xff0c;文章的标题&#xff1a; 文章的主要内…...

Matlab与ROS(1/2)---服务端和客户端数据通信(五)

0. 简介 在前几讲我们讲了Matlab中的Message以及Topic的相关知识。而ROS主要支持的通信机制还有服务这一类。服务通过允许请求以及响应的通信方式&#xff0c;来给整个系统完成更紧密的耦合。服务客户端向服务服务器发送请求消息并等待响应。服务器将使用请求中的数据构造响应…...

数字化转型的避坑指南:细说数字化转型十二大坑

随着信息技术的快速发展&#xff0c;数字化转型已经成为许多企业发展的必经之路。然而&#xff0c;数字化转型过程中也存在许多坑&#xff0c;如果不谨慎处理&#xff0c;就可能导致企业陷入困境。本文将细说数字化转型的十二大坑&#xff0c;并提供相应的避坑指南。 1、不了解…...

pt05Encapsulationinherit

Encapsulation &inherit 封装继承 封装 向类外提供必要的功能&#xff0c;隐藏实现的细节, 代码可读性更高优势&#xff1a;简化编程&#xff0c;使用者不必了解具体的实现细节&#xff0c;只需要调用对外提供的功能。私有成员&#xff1a;作用&#xff1a;无需向类外提供…...

面向对象编程(基础)9:封装性(encapsulation)

目录 9.1 为什么需要封装&#xff1f; 而“高内聚&#xff0c;低耦合”的体现之一&#xff1a; 9.2 何为封装性&#xff1f; 9.3 Java如何实现数据封装 9.4 封装性的体现 9.4.1 成员变量/属性私有化 实现步骤&#xff1a; 成员变量封装的好处&#xff1a; 9.4.2 私有化…...

fate-serving-server增加取数逻辑并源码编译

1.什么是fate-serving-server? FATE-Serving 是一个高性能、工业化的联邦学习模型服务系统&#xff0c;专为生产环境而设计,主要用于在线推理。 2.fate-serving-server源码编译 下载fate-serving-serving项目&#xff08;GitHub - FederatedAI/FATE-Serving: A scalable, h…...

循环队列、双端队列 C和C++

队列 目录 概念 实现方式 顺序队列 循环队列 队列的数组实现 用循环链表实现队列 STL 之 queue 实现队列 STL 之 dequeue 实现双端队列 概念 队列是一种特殊的线性表&#xff0c;它只允许在表的前端&#xff08;称为队头&#xff0c;front&#xff09;进行删除操作…...

正则表达式(语法+例子)

文章目录一、介绍二、语法1、匹配字符2、表示数量的字符3、边界字符4、其他字符5、转义字符三、例子1、邮箱2、用逗号分隔的数字集合1,23、允许一位小数4、20yy-mm-dd日期格式5、手机号6、匹配html、xml标签一、介绍 正则表达式&#xff08;Regular Expression&#xff09;&am…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...