浅识Flutter 基本组件Scaffold的bottomNavigationBar属性 app底部导航条

最新推荐文章于 2023-04-09 10:47:57 发布
最新推荐文章于 2023-04-09 10:47:57 发布
阅读量797 收藏 1
点赞数
分类专栏： 浅识Flutter笔记 文章标签： flutter android android studio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43336158/article/details/123487670
版权
本文介绍了Flutter中的Scaffold组件如何通过bottomNavigationBar属性创建底部导航栏，该导航栏通常包含多个按钮，用于在不同页面间切换。BottomNavigationBar支持设置事件监听，并能指定默认选中的页面索引。
摘要由CSDN通过智能技术生成

浅识Flutter 基本组件Scaffold的 bottomNavigationBar属性 app底部导航条

bottomNavigationBar属性用于定义应用程序的底部导航栏，主要由按钮加文字组成， 可以实现点击按钮切换不同的页面，显示在Scaffold的底部区域.
该属性值为BottomNavigationBar类型组件，BottomNavigationBar组件包含下表所示的常用属性。

属性名 类型 功能说明
currentIndex int 设置用于切换按钮的当前索引值
fixedColor Color 设置选中按钮的颜色，如果没有指定，则用系统主题色
iconSize double 设置按钮图标大小
items List 设置底部导航栏按钮集，每一项是一个BottomNavigationBarItem，由icon图标及title文本属性组成
onTap ValueChanged 设置按下某一个按钮的回调事件,需要根据返回的索引值设置当前索引值

设置底部导航栏

/*设置底部导航栏*/
      bottomNavigationBar: BottomNavigationBar(
最低0.47元/天 解锁文章
阿大豆
关注
专栏目录
Flutter之底部导航BottomNavigationBar
一花一世界 一叶一菩提
09-26 682
BottomNavigationBar是Flutter的一个底部导航 BottomNavigationBar({ Key key, @required this.items, 接受一个BottomNavigationBarItem=>(icon默认图标、title底部导航文字、actionIcon激活时候的图标、backgroundColor背景颜色) this.onTap ...
Flutter中BottomNavigationBar 定义底部导航条
越陌度阡
12-22 2309
BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，在Scaffold 组件中通过配置bottomNavigationBar来实现该功能。 常见的属性： 1.itemsist 底部导航条按钮集合。类型为List<BottomNavigationBarItem>； 2.iconSize 图标大小。类型为double； 3.currentIndex 默认选中Tab的下标。类型为int； 4.fixedColor选中Tab的颜色。值的类型为Co......
flutter使用Scaffold中的bottomNavigationBar创建项目中的首页、个人中心等主页面
androidhyf的博客
08-05 535
flutter优缺点就不说了，最令人崩溃的是遇到各种非常规的bug时无助啊，还好有万能的网友 不bb了~ bottomNavigationBar创建应用主页面简单，但在网上没看到自己想要的： 1.导航栏icon的修改(使用自己的icon而非环境中配置的Icons库中的) 2.切换Tab时,页面的刷新导致的再次数据请求及资源浪费，体验也不好 1关于icon的更换，点就在要在inItState()方法中加载在后面代码里会有 2切换Tab时常规写法一般会这么干 final _pages = [HomePage
【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-31 4527
一、Scaffold 组件、 二、底部导航栏整体架构、 三、BottomNavigationBar 底部导航栏、 四、BottomNavigationBarItem 导航栏条目、 五、BottomNavigationBarItem 导航栏条目、 六、完整代码示例、 七、相关资源、
BottomNavigationBar
zhengyongbo的博客
04-05 1613
Android底部导航栏的实现方式特别多，例如TabHost，TabLayout，或者TextView等，都可以实现底部导航栏的效果，但是却没有Google官方统一的导航栏样式，今天讲的就是Google最近添加到Material design中的底部导航栏BottomNavigationBar，也可以说是现今Android底部导航栏的一个标准与统一吧。 效果： 实现效果：
【Flutter学习】基本组件之BottomNavigationBar底部导航栏
weixin_34367845的博客
06-24 1126
一，概述 　　BottomNavigationBar即是底部导航栏控件，显示在页面底部的设计控件，用于在试图切换，底部导航栏包含多个标签、图标或者两者搭配的形式，简而言之提供了顶级视图之间的快速导航。 二，Bar关键元素 BottomNavigationBar　　 BottomNavigationBar是属于 Scaffold 中的一个位于底部的控件。通常和BottomNavi...
Flutter系列（五）底部导航详解
最新发布
摸金校尉的博客
04-09 2080
本文主要介绍底部导航bottomNavigationBar的实现，和Scaffold组件一些常用的属性
Flutter-快速使用BottomNavigationBar（底部导航栏组件）
bsc
06-13 2157
BottomNavigationBar是底部导航条，可以很容易地在tap之间切换和浏览顶级视图。很多App主页底部都采用这种切换的方式。 下面先来看看效果 实现过程主要分为三步： 第一步.导入图片到项目中并在pubspec.yaml文件中配置图片路径 1.1 1.2这里注意前面必须加空格 第二步.自定义BottomNavigationBarItem import 'package:flutter/material.dart'; //自定义底部导航栏itme class NavigationIconV
Flutter教程_Flutter实现底部tab切换_ Flutter BottomNavigationBar 自定义底部导航条实现底部页面tab切换
xiaoyuan188的博客
06-22 1886
BottomNavigationBar 是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是Scaffold组件的参数。 这是Flutter BottomNavigationBar 自定义底部导航条实现底部页面tab切换的效果 看视频的话去B站找 Dart Flutter教程，或者百度搜索 大地老师Flutter教程 BottomNavigationBar 常见...
Flutter底部导航栏BottomNavigationBar
热门推荐
喻志强的博客
03-04 4万+
Flutter 底部导航栏（BottomNavigationBar） 在移动开发中，底部导航栏是非常常见的，在之前我也写过一篇关于在Android中如何使用底部导航栏的博客，感兴趣的可以看一下。 Android底部导航栏BottomNavigationBar使用方法 下面，我们来看一下在Flutter 中 底部导航栏是如何使用的。 首先看一下效果图： shifting模式 fixed模式 Bo...
Flutter篇 BottomNavigationBar底部导航栏
独树一枝
02-20 1131
效果如下： 简单解释一下吧， 创建两个数组，一个存放tab的icon 和 标题，另一个存放对应的状态界面的函数名； int currentIndex = 0; //接收点击到的页面数 var currentPage ;//用来接收要展示的对应界面 BottomNavigationBar 首先，bottomNavigationBar是属于Scaffold中的一个位于底部的控件。通常和BottomNavigationBarItem配合使用 BottomNavigation...
flutter底部导航栏
代码小疯子
07-06 4539
flutter BottomNavigationBar 一般来说，点击底部导航栏都是要进行页面我们需要动态的改变一些状态，所以，我们要继承自StatefulWidget. bottomNavigationBar 是属于 Scaffold 中的一个位于底部的控件。通常和 BottomNavigationBarItem 配合 开发底部导航栏。 1 基本构造方法说明 1.1 BottomNavig...
flutter 之BottomNavigationBarItem属性分析
记录网络缺失的知识
08-21 2253
BottomNavigationBarItem BottomNavigationBarItem({ @required this.icon, this.title, Widget activeIcon, this.backgroundColor, }) icon： 类型：Widget 描述：Item显示的图标 title： 类型：Widget 描述：一般使用Text文本，item文字描述 activeIcon： 类型：Widget 描述：被选中时显示的icon bac
Flutter Scaffold、AppBar、BottomNavigationBar、SnackBar、Drawer示例
海阔天空
05-17 198
Flutter Scaffold、AppBar、BottomNavigationBar、SnackBar、Drawer示例
Jetpack Compose Scaffold和BottomAppBar(底部导航)
ScottePerk的博客
06-10 1402
Jetpack Compose 以下简称JC JC提供了Scaffold这个组件来实现一些导航的效果，例如顶部菜单，底部导航，旁边的抽屉菜单等等，Scaffold的意思是脚手架，也就是Scaffold这是提供的一个支架，或者说固定了一些控件实现的位置。下面通过实现BottomAppBar来说明。 bottomBar是Scaffold的一个属性，类似的属性还有topbar，这篇文章只介绍bottomBar。 topbar可以看这篇文章：topBar主要用到的类其实就是BottomAppBar，这个类也没什么特
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-01 2152
一、BottomNavigationBar 底部导航栏、 二、PageView 滑动页面、 三、BottomNavigationBar 与 PageView 关联、 四、完整代码示例、 1、核心导航组件、 2、四个切换页面、 3、应用启动主界面、 4、运行效果、 五、相关资源、
11.Flutter学习之BottomNavigationBar自定义底部导航栏，以及页面切换
易帜¤的博客
02-29 671
BottomNavigationBar BottomNavigationBar是底部导航栏，可以让我们定义底部tab切换，bottomNavigationBar是之前讲到的Scaffold组件的参数 常见属性： 属性名 说明 items List<BottomNavigationBar>底部导航栏集合 iconSize icon大小 currentIndex 默...
原生Android10底部白条,Flutter 10: 图解底部状态栏小尝试
weixin_34324618的博客
05-26 1330
小菜今天来整理一下在学习测试 Flutter 时需用到的底部导航栏 BottomNavigationBar，使用方式很简单，小菜感觉效果比原生的 Android 要好一些。何为 BottomNavigationBar ?BottomNavigationBar 为底部导航栏控件，可以包含文字标签和图标等基本信息，通常在三到五个之间；据了解，iOS 的规范底部导航栏最多可设置五个，所以大部分应用均在五...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值