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

NavigationRail 简介

一个 Material Design 小部件,旨在显示在应用程序的左侧或右侧,以便在少量视图(通常在三到五个视图之间)之间导航。

使用场景:

通过Row属性,左侧或右侧菜单栏按钮

属性作用
onDestinationSelected选择索引回调监听器
selectedIndex目前选定目的地的索引
destinations存放菜单按钮
backgroundColor导航栏背景色
elevation海拔高度
height导航栏高度
labelType是否展示菜单栏底部文字
shadowColor阴影颜色
animationDuration胶囊动画显示时长
indicatorShape选中菜单背景圆角或者边框样式
indicatorColor选中菜单背景色
leading顶部菜单按钮
trailing底部菜单按钮
groupAlignmenttop,center,bottom 菜单按钮的显示位置
selectedLabelTextStyle文字选择的样式
unselectedLabelTextStyle文字未选择的样式
useIndicator是否显示选中菜单背景色
minWidth最小宽度

属性 groupAlignment: top、center、bottom

top
top
center
在这里插入图片描述
bottom
在这里插入图片描述

leading: 顶部菜单按钮

在这里插入图片描述

trailing: 底部菜单按钮

在这里插入图片描述

indicatorShape: 设置按钮背景圆角样式

在这里插入图片描述

代码块

import 'package:flutter/material.dart';class NavigationRails extends StatefulWidget {const NavigationRails({super.key});State<NavigationRails> createState() => _NavigationRailsState();
}class _NavigationRailsState extends State<NavigationRails> {int _selectedIndex = 0;NavigationRailLabelType labelType = NavigationRailLabelType.all;bool showLeading = false;bool showTrailing = false;double groupAlignment = -1.0;Widget build(BuildContext context) {return Scaffold(body: Row(children: <Widget>[NavigationRail(selectedIndex: _selectedIndex,groupAlignment: groupAlignment,onDestinationSelected: (int index) {setState(() {_selectedIndex = index;});},labelType: labelType,minExtendedWidth: 150,indicatorColor: Colors.red,indicatorShape:  RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),side: BorderSide(color: Colors.yellow, width: 2.0),),leading: showLeading? FloatingActionButton(elevation: 0,onPressed: () {// Add your onPressed code here!},child: const Icon(Icons.add),): const SizedBox(),trailing: showTrailing? IconButton(onPressed: () {// Add your onPressed code here!},icon: const Icon(Icons.more_horiz_rounded),): const SizedBox(),destinations: const <NavigationRailDestination>[NavigationRailDestination(icon: Icon(Icons.favorite_border),selectedIcon: Icon(Icons.favorite),label: Text('First'),),NavigationRailDestination(icon: Icon(Icons.bookmark_border),selectedIcon: Icon(Icons.book),label: Text('Second'),),NavigationRailDestination(icon: Icon(Icons.star_border),selectedIcon: Icon(Icons.star),label: Text('Third'),),],),const VerticalDivider(thickness: 1, width: 1),// This is the main content.Expanded(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('selectedIndex: $_selectedIndex'),const SizedBox(height: 20),Text('Label type: ${labelType.name}'),const SizedBox(height: 10),OverflowBar(spacing: 10.0,children: <Widget>[ElevatedButton(onPressed: () {setState(() {labelType = NavigationRailLabelType.none;});},child: const Text('None'),),ElevatedButton(onPressed: () {setState(() {labelType = NavigationRailLabelType.selected;});},child: const Text('Selected'),),ElevatedButton(onPressed: () {setState(() {labelType = NavigationRailLabelType.all;});},child: const Text('All'),),],),const SizedBox(height: 20),Text('Group alignment: $groupAlignment'),const SizedBox(height: 10),OverflowBar(spacing: 10.0,children: <Widget>[ElevatedButton(onPressed: () {setState(() {groupAlignment = -1.0;});},child: const Text('Top'),),ElevatedButton(onPressed: () {setState(() {groupAlignment = 0.0;});},child: const Text('Center'),),ElevatedButton(onPressed: () {setState(() {groupAlignment = 1.0;});},child: const Text('Bottom'),),],),const SizedBox(height: 20),OverflowBar(spacing: 10.0,children: <Widget>[ElevatedButton(onPressed: () {setState(() {showLeading = !showLeading;});},child:Text(showLeading ? 'Hide Leading' : 'Show Leading'),),ElevatedButton(onPressed: () {setState(() {showTrailing = !showTrailing;});},child: Text(showTrailing ? 'Hide Trailing' : 'Show Trailing'),),],),],),),],),);}
}

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

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

相关文章

Halcon机器视觉-15种常用缺陷检测实例

一、Halcon 15种常用缺陷检测实例分享 缺陷检测是一种通过计算机视觉技术来检测产品制造过程中的缺陷的方法。该技术可以检测出产品表面的缺陷&#xff0c;如裂纹、凹陷、划痕、气泡等&#xff0c;并且可以实时监测和诊断制造过程中的问题。在制造业中&#xff0c;机器视觉缺陷…

GRE实验

题目参考&#xff1a; 实验步骤&#xff1a; 第一步&#xff1a;地址规划拓扑设计&#xff0c;配置IP地址 R1配置&#xff1a; <Huawei>system-view [Huawei]sy R1 [R1]int g 0/0/1 [R1-GigabitEthernet0/0/1]ip address 192.168.1.1 24 [R1-GigabitEthernet0/0/1]in…

智能电表数据采集器

智能电表数据采集器是一种用于采集智能电表数据的设备&#xff0c;它可以将智能电表的数据传输到远程服务器上&#xff0c;以便进行数据分析和监控。智能电表数据采集器的主要功能是采集智能电表的实时数据&#xff0c;并将其发送到远程服务器上&#xff0c;从而实现对智能电表…

【windows测试通过】关于Godot导入外部音频文件的问题

file.open(filepath, file.READ) var buffer file.get_buffer(file.get_len()) #put data into audiostreamsample var stream AudioStreamSample.new() stream.data buffer 代码给出&#xff0c;还没有测试过。(godot3.2测试未通过&#xff09; 在运行时轻松加载外部音频…

业务安全分析第19期 | 今年暑假,博物馆的门票为什么抢不到?

目录 “黄牛”&#xff1a;加价代预约、加价售票、兜售野导游套餐 “黄牛”倒票带来的危害 “黄牛”为什么能够抢到票 博物馆与“黄牛”的门票攻防 “黄牛”使用的作弊软件有什么特征 技术上防范“黄牛”的作弊软件抢票 遏制“黄牛”倒票给博物馆带来的收益 随着暑期参观…

[nlp] GPT

一、联合训练任务 1.1 NTP(Next Token Prediction) gpt预训练的一个目标函数有两个,第一个是基础的下一个词预测任务,选择一个K窗口,将窗口中的K个词的embedding作为条件去预测下一个词。 1.2 TC(Text Classification) 第二个是一个分类任务,一段话给一个标签,然后去预…

离线数据仓库

一、数据仓库 1.数据仓库的概念 1)数据仓库的特点: 面向主题的:对数据进行整合、分析和归类的抽象集成的:将不同数据源的数据(业务数据、外部系统数据、埋点日志)经过统一编码、规范命名、字段类型转换等操作,整合到仓库相对稳定的:根据业务场景实时更新、一般会被长…

VIM文本如何复制到系统剪切板?

今天从vim上用鼠标复制代码&#xff0c;发现把VIM当中的行号也复制进去了&#xff0c;就很麻烦&#xff0c;于是简单研究了下&#xff0c;如果vim支持clipboard的话就比较好办&#xff0c;具体支持与否&#xff0c;使用命令查看&#xff1a; vim --version | grep "clipb…

startqueue(模拟实现及底层原理)

目录 容器适配器 STL标准库中stack和queue的底层结构 ​deque deque的原理 deque的缺陷 为什么选择deque作为stack和queue的底层默认容器 stack stack的介绍 stack的函数 stack的模拟实现 queue queue的介绍 queue的函数 queue的模拟实现 priority_queue prior…

Android中线程池

一、线程池的优点 说到线程池的优点就要先说一下不用线程池的坏处 在早些年开发都是直接new Thread()直接创建线程&#xff0c;倘若有N个异步就要创建N个线程&#xff0c;这会导致线程的频繁创建和销毁线程不可控&#xff0c;每个线程都各自执行&#xff0c;内存资源竞争激烈&…

js小写金额转大写 自动转换

// 小写转为大写convertCurrency(money) {var cnNums [零, 壹, 贰, 叁, 肆, 伍, 陆, 柒, 捌, 玖]var cnIntRadice [, 拾, 佰, 仟]var cnIntUnits [, 万, 亿, 兆]var cnDecUnits [角, 分, 毫, 厘]// var cnInteger 整var cnIntLast 元var maxNum 999999999999999.9999var…

Leetcode-每日一题【19.删除链表的倒数第N个结点】

题目 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2输出&#xff1a;[1,2,3,5] 示例 2&#xff1a; 输入&#xff1a;head [1], n 1输出&#xff1a;[] 示例 3&#x…

数据结构day5(2023.7.19)

一、Xmind整理&#xff1a; 双向链表的插入与删除&#xff1a; 二、课上练习&#xff1a; 练习1&#xff1a;单链表任意元素删除 /** function: 按元素删除* param [ in] * param [out] * return 返回堆区首地址*/ Linklist delete_by_data(datatype key,Linklist L) …

Unity Obfuscator

官方仓库 学习日期&#xff1a;2023-07-13&#xff08;防止后续仓库特性或功能更新无对比时间&#xff09; 目标&#xff1a;本文介绍使用此github库&#xff0c;混淆unity项目的代码&#xff0c;在ILSpy中无法正确反编译。 一、说明 官方说明 配置界面 Features: ControlFlow…

springboot整合feign实现RPC调用,并通过Hystrix实现服务降级

目录 一、服务提供者 二、服务消费者 三、测试效果 四、开启Hystrix实现服务降级 feign/openfeign和dubbo是常用的微服务RPC框架&#xff0c;由于feigin内部已经集成ribbon&#xff0c;自带了负载均衡的功能&#xff0c;当有多个同名的服务注册到注册中心时&#xff0c;会根…

SpringBoot中集成jasypt-spring-boot实现配置文件数据加密脱敏

场景 经常会遇到这样一种情况&#xff1a;项目的配置文件中总有一些敏感信息&#xff0c;比如数据源的url、用户名、 密码....这些信息一旦被暴露那么整个数据库都将会被泄漏&#xff0c;那么如何将这些配置隐藏呢。 除了使用手动将加密之后的配置写入到配置文件中&#xff…

紧跟国家“新能源+”模式!涂鸦智慧能源方案助力夏季用电节能提效

“今天的你是几分熟&#xff1f;” 今年夏天&#xff0c;高温来得比往年更早&#xff0c;五六月份就提前开启了滚滚热浪模式&#xff0c;京津冀和山东等地最高气温也一度突破了历史极值。在提前到来的高温“烤”验下&#xff0c;全社会供电能力面临着极大挑战。 中国电力网预…

Spring

getBean()方法使用 其中&#xff0c;当参数的数据类型是字符串时&#xff0c;表示根据Bean的id从容器中获得Bean实例&#xff0c;返回是Object&#xff0c;需要强转。 当参数的数据类型是Class类型时&#xff0c;表示根据类型从容器中匹配Bean实例&#xff0c;当容器中相同类型…

手机定屏死机问题操作指南

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、定屏死机问题抓取 Log 要求二、 复现定屏死机问题后做什么三、检查adb是否可连的方法四、连接adb 抓取以下Log五、如果adb不可连&#xff0c;执行下…

reggie优化06-项目部署

1、部署架构 2、部署环境 3、部署前端 4、部署后端 修改图片位置&#xff0c;并push至仓库