flutter 两种方式优雅的实现app首页底部菜单项切换功能，以及凸起效果

已于 2024-01-23 10:47:37 修改
阅读量1.5k 收藏 1
点赞数 1
文章标签： flutter 首页底部菜单
于 2021-01-19 10:36:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gpf1320253667/article/details/112107306
版权
本文介绍了使用Flutter的bottomNavigationBar和IndexedStack，以及BottomNavigationBar、TabBar、PageView和AutomaticKeepAliveClientMixin两种方式实现底部菜单切换功能。详细讨论了各自优缺点，并提供了组件封装和状态保持的处理方法。此外，还提到了显示未读消息数和自定义凸起效果的实现策略。
摘要由CSDN通过智能技术生成

前言

首页底部菜单切换几乎是所有app都必须实现的功能，目前网上针对该功能的实现方式基本大同小异，并且细节之处讲的都不是很清楚，本篇将使用两种不同的方式来更优雅的实现该功能，相信看完你肯定会有所收获。

ConvexBottomBar是一个底部导航栏组件，用于展现凸起的TAB效果，支持多种内置样式与动画交互。你可以在https://appbar.codemagic.app上找到在线样例。

// 引入插件
convex_bottom_bar

在这里插入图片描述

方式1： bottomNavigationBar + IndexedStack

1，类似于安卓里面Activity+多个fragment的方式，通过控制各个fragment的显示和隐藏来显示不同Tab对应的页面，保证每个页面只builder一次

了解本专栏 订阅专栏 解锁全文
智玲君
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
Flutter 首页面底部菜单栏切换页面搭建
weixin_38107457的博客
06-05 246
Flutter 首页面底部菜单栏切换页面搭建
Flutter 底部导航凸起效果
海阔天空
06-17 1088
Flutter 底部导航凸起效果
发现动画魔力：Flutter 动态底部导航栏
最新发布
gitblog_00058的博客
06-04 397
发现动画魔力：Flutter 动态底部导航栏 项目地址:https://gitcode.com/wiltonribeiro/animated_bottombar_flutter 在寻求创新与用户体验的完美结合点时，我们经常会遇到那颗闪耀的开源珍宝——Animated Bottom NavigationBar Flutter。今天，让我们深入探索这个基于Flutter平台的精妙组件，它巧妙地融合了动...
FLutter BottomNavigationBar 底部导航 实现切换Page
2401_84132685的博客
04-05 363
面试题集可以帮助你查漏补缺，有方向有针对性的学习，为之后进大厂做准备。但是如果你仅仅是看一遍，而不去学习和深究。那么这份面试题对你的帮助会很有限。最终还是要靠资深技术水平说话。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。建议先制定学习计划，根据学习计划把知识点关联起来，形成一个系统化的知识体系。学习方向很容易规划，但是如果只通过碎片化的学习，对自己的提升是很慢的。
Flutter 菜单切换样式
lyj1005353553的专栏
12-18 1848
首先来看效果图 之前做这个的时候，有尝试用ChoiceChip去做，不过这个场景的话，用这个有点大材小用，还是换了最直接的方式实现，但个人感觉还是不怎么完美，还是直接上代码吧： int _currentSelectIndex = 0; List<Widget> _getTabs() { List<Widget> tabWidgets = List(); ...
Flutter 使用TabBar实现类似安卓中Fragment切换的效果
疯狂D乌牛的博客
02-25 634
TabBar使用步骤 继承StatefulWidget 页面必须实现SingleTickerProviderStateMixin 页面初始化时，实例化TabController 在TabBar和TabBarView组件中指定同一个controller 属性 说明 tabs 一系列标签控件 controller 标签选择变化控制器 isScrollable .
Flutter以两种方式实现App主题切换的代码
08-19
Flutter 实现 App 主题切换的两种方式 Flutter 是一个流行的跨平台移动应用程序开发框架，它提供了丰富的 UI 组件和强大的开发工具。其中，App 主题切换是一个非常重要的功能，能够为用户提供更加个性化的体验。...
Flutter实现仿微信底部菜单栏功能
10-16
在Flutter开发中，创建一个仿微信底部菜单栏是一项常见的任务，它能够提供用户友好的导航体验。本篇文章将详细讲解如何使用Flutter来实现这一功能。 首先，我们需要导入必要的包。在示例代码中，我们看到引入了`...
flutter（四）底部tabbar切换，顶部切换，页面跳转
07-07 9143
flutter（四）底部tabbar，顶部切换，页面跳转 上篇文章为大家讲述了flutter的组件；（动态组件和静态组件）本篇文章接着上篇内容继续为大家介绍flutter的其他主要组件（底部选项卡，顶部切换等等实用组件），本文针对功能点做特殊实例讲解，特别详细的整体使用我们会在其它的文章中来展开说明。每篇文章只要有代码说明 就会有demo提供。 前言 一、底部tabbar 二、图片资源加载...
flutter实现类android的底部导航栏+fragment切换
无量天尊
03-27 879
入口： import 'package:flutter/material.dart'; import 'MyTab.dart'; void main() { runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return ...
flutter PageView实现左右滑动切换视图
01-05
本文实例为大家分享了flutter PageView左右滑动切换视图的具体代码，供大家参考，具体内容如下 import 'dart:math'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_x/base/base_appbar_page.dart'; class LeftPageViewPage e
Flutter 之Tab切换效果
万小凡的专栏
08-31 3797
1、点击tab实现自由切换页面 一、首先在Flutter中一切皆组件，万物皆组件，都可以用组件来表达 1、创建一个Flutter界面 class MainPage extends StatelessWidget { const MainPage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return TabNavigator(); } } 2、在创...
Flutter 左右菜单联动
yechaoa
05-22 1万+
效果： 像这种左右菜单联动的效果很常见，即点击左边菜单列表右边刷新，这里演示一下在Flutter中的实现 页面结构 很简单，分为左右结构，左边是一个ListView，右边也是一个ListView，然后按比例显示即可 return new Row( mainAxisAlignment: MainAxisAlignment.start, children: &l...
Flutter PageView左右滑动切换视图
热门推荐
代码小疯子
07-05 1万+
Flutter PageView左右滑动切换视图
flutter学习（三）底部导航栏切换
小松与蘑菇
10-09 1283
做android原生开发时，底部导航栏是通过自定义布局，图片自己上网找，点击之后还要变色，在切换的时候使用fragment，切换下一个的同事上一个隐藏…… 现在，来看flutter怎么实现吧 效果 解析 除了主界面以外，必然需要这三个界面，界面布局如下 然后还需要一个bottom.dart表示主界面，tabs.dart表示底部栏以及调用上面三个界面，所以总共五个dart文件，不需要资源文件 单...
Flutter教程_Flutter实现底部tab切换_ Flutter BottomNavigationBar 自定义底部导航条实现底部页面tab切换
xiaoyuan188的博客
06-22 1877
BottomNavigationBar 是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是Scaffold组件的参数。 这是Flutter BottomNavigationBar 自定义底部导航条实现底部页面tab切换的效果 看视频的话去B站找 Dart Flutter教程，或者百度搜索 大地老师Flutter教程 BottomNavigationBar 常见...
Flutter学习笔记--仿闲鱼底部导航栏带有中间凸起图标，Android开发面经分享
m0_57472099的博客
04-10 1105
home: MainPage(), ); } }import ‘package:flutter/material.dart’;class HomePage extends StatefulWidget{ @override State createState() { return _HomePageState(); } }class _HomePageState extends State{ @override Widget build(BuildContext context) { return Mate
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

智玲君

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

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

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

打赏作者

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

抵扣说明：

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

余额充值