Flutter——最详细(NavigationBar)使用教程

NavigationBar简介

Material 3 导航栏组件! 导航栏提供了一种持久且便捷的方式来在应用程序的主要目的地之间进行切换。

使用场景:

底部菜单栏模块

属性作用
onDestinationSelected选择索引回调监听器
selectedIndex目前选定目的地的索引
destinations存放菜单按钮
backgroundColor导航栏背景色
elevation海拔高度
height导航栏高度
labelBehavior是否展示菜单栏底部文字
shadowColor阴影颜色
animationDuration胶囊动画显示时长
indicatorShape选中菜单背景圆角或者边框样式
indicatorColor选中菜单背景色

alwaysShow:图标与文本同时显示;

在这里插入图片描述

alwaysHide:文本同时隐藏;

在这里插入图片描述

onlyShowSelected:选中当前索引的菜单文本同时显示;

在这里插入图片描述

backgroundColor : 导航栏背景色 绿色

在这里插入图片描述

indicatorShape: 按钮背景样式

在这里插入图片描述

代码块:自行运行查看

import 'package:flutter/material.dart';class NavigationBars extends StatefulWidget {const NavigationBars({super.key});@overrideState<NavigationBars> createState() => _NavigationBarsState();
}class _NavigationBarsState extends State<NavigationBars> {int currentPageIndex = 0;NavigationDestinationLabelBehavior labelBehavior =NavigationDestinationLabelBehavior.alwaysShow;@overrideWidget build(BuildContext context) {return Scaffold(bottomNavigationBar: NavigationBar(labelBehavior: labelBehavior,selectedIndex: currentPageIndex,backgroundColor: Colors.green,indicatorColor: Colors.red,indicatorShape:  RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: BorderSide(color: Colors.yellow, width: 2.0),),surfaceTintColor: Colors.yellow,// animationDuration: Duration(milliseconds: 2000),// shadowColor: Colors.black,height: 70,elevation: 1,onDestinationSelected: (int index) {setState(() {currentPageIndex = index;});},destinations: const <Widget>[NavigationDestination(tooltip: "",icon: Icon(Icons.explore),label: 'Explore',),NavigationDestination(icon: Icon(Icons.commute),label: 'Commute',),NavigationDestination(selectedIcon: Icon(Icons.bookmark),icon: Icon(Icons.bookmark_border),label: 'Saved',),],),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Label behavior: ${labelBehavior.name}'),const SizedBox(height: 10),OverflowBar(spacing: 10.0,children: <Widget>[ElevatedButton(onPressed: () {setState(() {labelBehavior =NavigationDestinationLabelBehavior.alwaysShow;});},child: const Text('alwaysShow'),),ElevatedButton(onPressed: () {setState(() {labelBehavior =NavigationDestinationLabelBehavior.onlyShowSelected;});},child: const Text('onlyShowSelected'),),ElevatedButton(onPressed: () {setState(() {labelBehavior =NavigationDestinationLabelBehavior.alwaysHide;});},child: const Text('alwaysHide'),),],),],),),);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/167.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序:调用手机的相册

1、需求 点击按钮&#xff0c;调用手机相册选择图片上传 2、解决方案 Button 上加 openType"chooseAvatar"&#xff1b;onChooseAvatar 写方法&#xff0c;必须用button 按钮&#xff0c;更改下样式看不出来就行。 3、代码 //解决方案 // 1、Button 上加 openTy…

3.安装和配置 IntelliJ IDEA

安装和配置 IntelliJ IDEA 本文将详细介绍如何安装和配置 IntelliJ IDEA&#xff0c;这是一款流行的Java集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供强大的开发工具和功能&#xff0c;帮助您高效地编写和调试Java应用程序。 步骤 1&#xff1a;下载 IntelliJ I…

七大排序算法——冒泡排序,通俗易懂的思路讲解与图解(完整Java代码)

文章目录 一、排序的概念排序的概念排序的稳定性七大排序算法 二、冒泡排序核心思想代码实现 三、性能分析四、七大排序算法 一、排序的概念 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或…

C++之工厂模式

目录 一、为什么要使用工厂模式 优点 缺点 二、简单工厂&#xff08;Simple Factory&#xff09; 好处&#xff1a; 不足&#xff1a; 三、工厂方法&#xff1a; 好处&#xff1a; 不足&#xff1a; 四、抽象工厂&#xff08;Abstract Factory&#xff09; 一、为什…

最长公共子序列

题目 给定两个长度分别为 N 和 M 的字符串 A 和 B&#xff0c;求既是 A 的子序列又是 B 的子序列的字符串长度最长是多少。 输入格式 第一行包含两个整数 N 和 M。 第二行包含一个长度为 N 的字符串&#xff0c;表示字符串 A。 第三行包含一个长度为 M 的字符串&#xff0…

【HCIA】10.VLAN间通信

VLAN间通信的解决方法 使用路由器的物理接口 路由器三层接口作为网关&#xff0c;转发本网段前往其它网段的流量。路由器三层接口无法处理携带VLAN Tag的数据帧&#xff0c;因此交换机上联路由器的接口需配置为Access。路由器的一个物理接口作为一个VLAN的网关&#xff0c;因此…

Django_re_path_使用正则匹配url

与path定义的路由相比&#xff0c;re_path 定义的路由可以使用正则表达式匹配url。 需要注意的是&#xff1a; 如果未定义匹配结果的变量名&#xff0c;匹配的结果默认传入视图的第2个形参。如果定义了匹配结果的变量名&#xff0c;匹配的结果会传给视图的同名字段&#xff0…

【GitOps系列】从零上手GitOps

文章目录 GitOps 介绍如何将业务代码构建为容器镜像&#xff1f;如何将容器镜像部署到K8s&#xff1f;K8s如何实现自动扩容和自愈&#xff1f;1.传统的扩容和自愈2.k8s自愈机制3.k8s弹性扩容 如何借助GitOps实现应用秒级自动发布和回滚&#xff1f;1.传统 K8s 应用发布流程2.从…

【Arduino小车实践】陀螺仪的使用

一、MPU6050简介 MPU6050是一款陀螺仪模块&#xff0c;可以测量X、Y、Z三轴的角速度和加速度&#xff0c;还带有温度传感器和数字运动处理器(DMP)。 二、学习步骤 1. I2C协议 MPU6050是通过I2C协议进行驱动的&#xff0c;配置寄存器和获取数据都需要通过I2C协议去实现开发板与…

三、用 ChatGPT 写 PPT

目录 一、实验介绍 二、背景 三、如何让 ChatGPT 写 PPT 3.1 ChatGPT 能直接生成 PPT 文件吗?

CentOS环境下的Nginx安装

Nginx 安装 下载 nginx 下载地址&#xff1a;http://nginx.org/en/download.html 将下载好的压缩包拷贝到根目录下 通过xshell如果出现 bash: rz: 未找到命令 &#xff0c;需要先运行下面的命令 yum -y install lrzsz安装 解压到当前目录 tar -zxvf nginx-1.22.1.tar.gz安…

Hive SQL 迁移 Flink SQL 在快手的实践

摘要&#xff1a;本文整理自快手数据架构工程师张芒&#xff0c;阿里云工程师刘大龙&#xff0c;在 Flink Forward Asia 2022 生产实践专场的分享。本篇内容主要分为四个部分&#xff1a; Flink 流批一体引擎 Flink Batch 生产实践 核心优化解读 未来规划 点击查看原文视频…

走进人工智能| Computer Vision 数字化时代的视觉启示录

前言&#xff1a; 计算机视觉是通过模仿人类视觉系统的工作原理&#xff0c;使计算机能够感知、理解和解释图像和视频的能力。 文章目录 序言背景适用领域技术支持应用领域程序员如何学总结 序言 计算机视觉是人工智能领域的一个重要分支&#xff0c;它涉及使计算机能够“看”…

靶场的安装

sqli-lab 1.将安装包解压放到WWW目录下 2.修改 db-creds.inc文件里面的数据库的用户名密码为自己的用户名密码 路径&#xff1a;D:\phpStudy_64\phpstudy_pro\WWW\sqli-labs-master\sql-connections\db-creds.inc 3. 更改php版本位5.9版本&#xff0c;不然会报错 4.安装数…

【Sa-Token】SpringBoot 整合 Sa-Token 快速实现 API 接口签名安全校验

在涉及跨系统接口调用时&#xff0c;我们容易碰到以下安全问题&#xff1a; 请求身份被伪造请求参数被篡改请求被抓包&#xff0c;然后重放攻击 sa-token api-sign 模块将帮你轻松解决以上难题。&#xff08;此插件是内嵌到 sa-token-core 核心包中的模块&#xff0c;开发者无…

MFC学习之2048小游戏程序源码

2048游戏的开发原理相对简单&#xff0c;它基于一个4x4的方格&#xff0c;通过控制数字方块的移动来合成相同的数字方块&#xff0c;并生成新的数字方块。 具体实现过程如下&#xff1a; 确定需求&#xff1a;首先需要明确游戏的功能需求&#xff0c;如产生随机数字方块、控制…

MYSQL执行一条SELECT语句的具体流程

昨天CSDN突然抽风 我一个ctrlz把整篇文章给撤掉了还不能复原 直接心态崩了不想写了 不过这部分果然还是很重要,还是写出来吧 流程图 这里面总共有两层结构Server层 储存引擎 Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现&#xff0c;主要包…

WebSocket理解

WebSocket理解 WebSocket定义与HTTP关系相同点:不同点&#xff1a;联系总体过程 HTTP问题长轮询Ajax轮询 WebSocket特点 WebSocket 定义 本质上是TCP的协议 持久化的协议 实现了浏览器和服务器的全双工通信&#xff0c;能更好的节省服务器资源和带宽 与HTTP关系 相同点: 基于…

接口测试 react+unittest+flask 接口自动化测试平台

目录 1 前言 2 框架 2-1 框架简介 2-2 框架介绍 2-3 框架结构 3 平台 3-1 平台组件图 1 新建用例 2 生成测试任务 3 执行并查看测试报告 3-2 用例管理 3-2-1 用例设计 3-3 任务管理 3-3-1 创建任务 3-3-2 执行任务 3-3-3 测试报告 3-3-4 邮件通知 1 前言 构建…

【力扣算法12】之 11. 盛最多水的容器 python

文章目录 问题描述示例1示例2提示 思路分析代码分析完整代码详细分析运行效果截图调用示例运行结果完结 问题描述 给定一个长度为 n 的整数数组 height 。有n条垂线&#xff0c;第i条线的两个端点是(i, 0)和(i, height[i])。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构…