《Flutter 项目工程化》第二章 2.4 导航栏

最新推荐文章于 2024-04-23 00:17:39 发布
最新推荐文章于 2024-04-23 00:17:39 发布
阅读量189 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Flutter 项目工程化 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/geeksoarsky/article/details/118875518
本文介绍了如何在Flutter项目中实现导航栏功能。通过新建视图并组织文件结构，创建了动态页、发现页、地图页、消息页和我的页面。使用BottomNavigationBar与BottomNavigationBarItem配合，动态改变 IndexedStack 中显示的页面，实现底部导航栏切换效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

导航栏

我所设计的 App 应具有五大模块，动态页，发现页，地图页，消息页，我的页面，故导航条应有五项，用户点击某一个导航图标会自动加载该按钮对应的页面。

新建视图

新建 /page 目录，在该目录下新建 dynamic.dart、find.dart、map.dart、message.dart、mine.dart，如果你是 Linux 开发环境或者在 Git bash 环境下，可以使用如下命令快速新建目录和文件。

mkdir -p lib/page
cd lib/page/
touch dynamic.dart find.dart map.dart message.dart mine.dart

下面进一步将 default_app.dart 内的 MyHomePage 类剥离，放在 dynamic.dart 文件内，如果按钮点击方法是抛出异常，请改回增加数字方法_incrementCounter()，以便我们看到效果。
default_app.dart 导入 index.dart ，MyHomePage(

了解本专栏 订阅专栏 解锁全文 超级会员免费看
《Flutter 项目工程化》序言
geeksoarsky的博客
07-18 477
序言 Flutter 项目工程化 《Flutter 项目工程化》一书是Flutter 快速开发实战专栏的上册，笔者以快速命名是因为 “完成要比完美更重要”，“快速推进，打破常规”，“天下武功，唯快不破”，对于如今迅猛发展的互联网，也是如此。要知道，用户多变，所以唯一能够抓住机会的办法就是快。 在互联网行业，要成就一个项目，idea 一文不值，不仅是在中国，在哪都一样。笔者希望读者通过《Flutter 项目工程化》这本书能把你的想法在技术层面上来讲从不可行到可行，提高你的执行力，最终做成一款好的APP。 由于
《Flutter 项目工程化》第五章 5.5 启动图标和应用名称
geeksoarsky的博客
07-19 184
启动图标 安装 flutter_launcher_icons pub.dev Github 配置依赖 ，执行 flutter pub get 获取插件 pubspec.yaml dependencies: · · · flutter_native_splash: ^1.1.8+4 flutter_launcher_icons: ^0.9.0 使用 flutter_launcher_icons 准备一张 1024x1024 格式的图片，位置 assets/icon/icon.png pubspe
《Flutter 项目工程化》后记
geeksoarsky的博客
07-20 206
后记 万丈高楼平地起，打好地基是重中之重。我们通过《Flutter 项目工程化》前四章的学习和实践就已经完成了 Flutter App 开发框架的搭建，这就好比参天大树有了主干，Flutter 快速开发实战专栏下册中的功能模块的实现只是添枝加叶，项目目录结构除特殊情况不会再发生变化。 下册《Flutter 实战开发旅行社交手机APP》内容预览： 首页布局，广场游记列表，上拉加载，下拉刷新； 游记详情页，点赞、收藏、评论游记； 发现页布局，仿抖音短视频功能的实现； 集成高德定位、高德地图、地图选点； 发布游
《Flutter 项目工程化》第一章 起步
geeksoarsky的博客
07-18 366
第一章 起步1.1 开发环境1.2 新建项目Android Studio (图形化界面)Git Bash 或 CMD (命令行界面)1.3 版本控制用户信息检查配置信息提交代码版本回退1.4 配置信息pubspec.yaml 1.1 开发环境 对于开发，我们使用集成开发环境（IDE）– 使开发和测试变得轻松快捷。目前有2种流行的IDE： VS Code –轻便，快速，你想要 IDE 拥有的功能它全都有 ！ Android Studio –使用设备上的Android Studio，您只需安装 Flutter
《Flutter 项目工程化》第四章 4.2 登录注册
geeksoarsky的博客
07-19 535
4.2 登录注册 手机号登录注册 客户端只需要提供手机号和验证码，服务端端检测是否注册，没注册则自动注册，故登录注册客户端实现起来只需要一个页面。 新建用户文件夹和用户注册文件 mkdir lib/page/User touch lib/page/User/login.dart 验证码输入框插件 flutter_verification_box 依赖库 dependencies: · · · flutter_spinkit: ^5.0.0 flutter_verification_b
flutter底部导航栏填充动画，android视频播放器开发
2401_84408418的博客
04-23 1149
大型项目屏幕适配UI绘制流程自定义View注：学习Android9.0最新技术，刘海屏适配在原生体验上更高一层路总而言之，Android开发行业变化太快，作为技术人员就要保持终生学习的态度，让学习力成为核心竞争力，所谓“活到老学到老”只有不断的学习，不断的提升自己，才能跟紧行业的步伐，才能不被时代所淘汰。
flutter底部导航栏填充动画，头条android面试
最新发布
2401_84408437的博客
04-23 720
简历首选内推方式，速度快，效率高啊！然后可以在拉钩，boss，脉脉，大街上看看。简历上写道熟悉什么技术就一定要去熟悉它，不然被问到不会很尴尬！做过什么项目，即使项目体量不大，但也一定要熟悉实现原理！不是你负责的部分，也可以看看同事是怎么实现的，换你来做你会怎么做？做过什么，会什么是广度问题，取决于项目内容。但做过什么，达到怎样一个境界，这是深度问题，和个人学习能力和解决问题的态度有关了。大公司看深度，小公司看广度。大公司面试你会的，小公司面试他们用到的你会不会，也就是岗位匹配度。
【Flutter 专题】126 图解自定义两侧对齐 ACETabBar 标签导航栏
2401_84149256的博客
04-18 857
好了，今天的分享就到这里，如果你对在面试中遇到的问题，或者刚毕业及工作几年迷茫不知道该如何准备面试并突破现状提升自己，对于自己的未来还不够了解不知道给如何规划，可以来看看同行们都是如何突破现状，怎么学习的，来吸收他们的面试以及工作经验完善自己的之后的面试计划及职业规划。Tab(text: ‘今日’, icon: Icon(Icons.account_circle)),是否可滑动两种状态下，在导航栏中添加左右两个固定位图标；Tab(text: ‘今日爆款土货生鲜’),Tab(text: ‘今日爆款’),
《Flutter 项目工程化》第四章 4.1二次封装 Dio
geeksoarsky的博客
07-19 509
第四章 用户相关 整个 App 是以用户为中心的，用户必须保持登录状态才能正常使用App，否则跳转到用户登录页。这是一个前后端完全分离的 App ,我已经搭建好了 Laravel API 服务器，使用 JWT 鉴权，即使用 Bear Token 确定用户身份，这就要求我们 App 在发起请求时附带 Token 值，如果 Token 过期但还在刷新周期内，则需要客户端自动刷新 Token , 我们将在此章节完成这些功能。 4.1 Dio 网络请求 安装 Dio 请安装好 Post Man 进行接口调试。
【Dart 教程系列第 34 篇】Dart 之 indexOf、lastIndexOf 获取指定元素在字符串的索引
“Allen Su”的博客
10-16 1206
Dart 之 indexOf、lastIndexOf 获取指定元素在字符串的索引
Flutter 工程化框架选择——搞定 Flutter 动画
Dream It Possible
11-28 1472
在之前的Flutter 小技巧： 用于控制动画启动、暂停： 用于创建所需的vsync参数，一般最常使用Animation： 用于处理动画的 value ，例如常见的接收动画的对象：例如这种写法如下代码所示，我们一般可以称为显式动画（不要纠结名词叫法），大致特征就是：以 *Transition命名，比如、和等，需要我们自己定义和操作。);}}复制代码也就是开箱即用，常见是 Animated*开头的 Widget，例如、、、
【Dart 教程系列第 16 篇】Dart 之 indexOf、lastIndexOf 获取指定元素在数组中的索引
“Allen Su”的博客
08-21 4567
Dart 获取指定元素在数组中的索引
《Flutter 项目工程化》第五章 5.4 隐私声明
geeksoarsky的博客
07-19 817
隐私声明持久化存储状态管理视图演示版本提交 持久化存储 lib/utils/sputils.dart ///隐私 static void savePrivacy() { _spf!.setBool('key_privacy', true); } static void clearPrivacy() { _spf!.remove('key_privacy'); } static bool? getPrivacy() { return _spf!.getBool('key_privacy'); }
《Flutter 实战开发旅行社交手机APP》第二章 地图模块 2.1 Flutter 集成高德地图
geeksoarsky的博客
08-27 1014
Flutter 集成高德地图安装依赖KEY创建应用调试版签名发布版签名高德地图添加 jar 文件：添加权限修改配置按需引入高德定位配置截图版本提交 安装依赖 安装高德定位 Flutter 插件，高德地图 Flutter 插件。定位和地图是分开的，不要混淆。 amap_flutter_location: 2.0.0 amap_flutter_map: 2.0.2 KEY 创建应用 根据插件Readme得知，我们需要前往高德地图开放平台 分别申请 Android 端和 iOS 端的 key。 调试版
《Flutter 项目工程化》第三章 3.3 GetX 国际化
geeksoarsky的博客
07-18 989
3.3 GetX 国际化切换语言视图share_preferences 持久化存储Getx 状态管理切换语言测试版本提交 首先用户打开抽屉，再点击设置按钮跳转到设置页面，随后选择切换语言或主题。 切换语言视图 设置页面 settings.dart 代码如下： import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'language.dart'; class SettingsPage extends Sta
《Flutter 项目工程化》第三章 3.2 GetX 路由管理
geeksoarsky的博客
07-18 438
GetX 路由管理 路由管理 新建路由文件和路由表文件 mkdir lib/router cd lib/router touch router.dart router_map.dart router_map.dart 定义了命名路由表 import 'package:flutter_locyin/menu/about.dart'; import 'package:flutter_locyin/menu/language.dart'; import 'package:flutter_locyin/menu/
《Flutter 实战开发旅行社交手机APP》第一章 广场模块 1.1 游记列表
geeksoarsky的博客
08-18 438
视图层 列表视图，包括上拉加载，下拉刷新，骨架装载器、自定义AppBar 视图 第三方库 包括上拉加载、下拉刷新 easyrefresh，skeleton 骨架加载器和支持空安全的 swiper 轮播图。 flutter_easyrefresh: ^2.2.1 skeleton_text: ^3.0.0 flutter_swiper_null_safety: ^1.0.2 基本视图 lib/page/Dynamic/Dynamic.dart import 'package:flutter/material
《Flutter 实战开发旅行社交手机APP》第一章 广场模块 1.5 评论列表
geeksoarsky的博客
08-26 426
游记列表视图层基本视图子项视图数据层API实体类接口服务类状态管理逻辑层评论列表加载更多演示版本提交 视图层 基本视图 游记详情一篇中讲到 SliverToBoxAdapter 是一个加载普通 widget 的 Sliver 组件，如果是滑动的组件推荐使用 Sliver 滑动组件，因为评论是滚动列表，故视图要返回 SliverList() 小部件。 lib/page/Dynamic/dynamic_detail.dart @override Widget build(BuildContext conte
Flutter实战：封装底部导航栏与ListView数据
首先，针对底部导航栏的设计，由于Flutter的代码结构可能带来冗余和复杂性，作者提出将ListView中展示的每个item数据进行封装，以简化代码并提升可维护性。 文章的核心内容涉及以下几个方面： 1. **控件封装**：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

geeksoarsky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值