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

Flutter基础(前端教程①①-底部导航栏)

1. 主页面(BottomNavBarPage)
  • 用 _currentBarIndex 记录当前选中的导航索引(默认 0,即首页)。
  • 用 IndexedStack 管理 4 个页面,通过 _currentBarIndex 控制显示哪个页面(比如索引 1 就显示 NodePage)。
  • 底部导航栏用 CustomNavigationBar 组件,传递当前索引和点击回调。
2. 底部导航栏(CustomNavigationBar)
  • 定义了 4 个导航项(NavItem),每个包含标题、图标、是否选中(isHighlighted)。
  • 通过 Row 横向排列 4 个导航项,每个占满屏幕宽度的 1/4(Expanded 组件实现)。
  • 点击导航项时,触发 onTap 回调,更新 _currentBarIndex 切换页面。
3. 导航项样式(选中 / 未选中)
  • 未选中状态_buildIconContainer):灰色图标,无背景。
  • 选中状态_buildHighlightedIconContainer):白色图标,带渐变绿色椭圆形背景(有边框),文字也变为亮绿色。
  • 通过 isHighlighted 判断状态,动态切换样式。
http://www.dtcms.com/a/282498.html

相关文章:

  • 中医舌诊学习软件,图文视频详解
  • Flutter Web 的发展历程:Dart、Flutter 与 WasmGC
  • 2025华为ODB卷-箱子之字形摆放100分-三语言题解
  • 文字图标设计-色彩魔方:动态变色技术实现场景自适应 大学毕业论文——仙盟创梦IDE
  • 【Unity】Mono相关理论知识学习
  • 深入核心:理解Spring Boot的三大基石:起步依赖、自动配置与内嵌容器
  • Kafka——生产者压缩算法
  • IsaacLab学习记录(一)
  • opencv 值类型 引用类型
  • Hadoop架构演进:从1.0到2.0的深度对比与优化解析
  • ARCGIS PRO DSK 颜色选择控件(ColorPickerControl)的调用
  • Lumerical Charge ------ 运行 PN 结仿真
  • 74、搜索二维矩阵
  • Python+Tkinter制作音频格式转换器
  • PDF 转 Word 支持加密的PDF文件转换 批量转换 编辑排版自由
  • lua(xlua)基础知识点记录
  • 非控制器(如 Service、工具类)中便捷地获取当前 HTTP 请求的上下文信息
  • SQL,在join中,on和where的区别
  • HTTP性能优化实战
  • GeoTools 基础概念解析
  • 5-Nodejs-npm与第三方模块
  • smolagents - 如何在mac用agents做简单算术题
  • 导入无人机航拍屋顶,10分钟智能铺设光伏板
  • 基于 Drools 的规则引擎性能调优实践:架构、缓存与编译优化全解析
  • MySQL 8.0 OCP 1Z0-908 题目解析(28)
  • 项目学习笔记 display从none切换成block
  • AWS ML Specialist 考试备考指南
  • 自学中医笔记(一)
  • AWS WebRTC 并发 Viewer 拉流失败分析:0.3 秒等待为何如此关键?
  • 线上分享:解码eVTOL安全基因,构建安全飞行生态