当前位置：首页 > news >正文

组件导航 (Navigation)+flutter项目搭建-混合开发+分栏

news 来源：原创 2025/6/20 2:04:14

组件导航 (Navigation)+flutter项目搭建

接上一章flutter项目的环境变量配置并运行flutter

上一章面熟了搭建flutter并用编辑器运行了ohos项目，这章主要是对项目的工程化改造

先创建flutter项目，再配置Navigation

1.在开发视图的resources/base/profile下面定义配置文件，文件名可以自定义，例如：router_map.json。

{"routerMap": [{"name": "PageFlutter","pageSourceFile": "src/main/ets/pages/home/PageFlutter.ets","buildFunction": "PageFlutterBuilder","data": {"description": "this is PageOne"}},{"name": "PageTwo","pageSourceFile": "src/main/ets/pages/home/PageTwo.ets","buildFunction": "PageTwoBuilder","data": {"description": "this is PageTwo"}},{"name": "PageThree","pageSourceFile": "src/main/ets/pages/home/PageThree.ets","buildFunction": "PageThreeBuilder","data": {"description": "this is PageThree"}}]
}

2.在module.json5配置的module下面配置

{"module": {..."routerMap": "$profile:router_map",}
}

项目文件如下
在这里插入图片描述

在入口 "pages/Index"文件配置

需要注意的是flutter只会一次，把栈移到顶部，不能一直push
Index.ets

import { PageFlutterBuilder } from "./home/PageFlutter";
import { PageThreeBuilder } from "./home/PageThree";
import { PageTwoBuilder } from "./home/PageTwo";let storage = LocalStorage.getShared()@Entry(storage)
@Component
struct Index {@Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()private arr: string[] = ['PageFlutter', 'PageTwo', 'PageThree'];build() {Column() {Navigation(this.pageInfos) {List({ space: 12 }) {ForEach(this.arr, (item: string) => {ListItem() {Text("Page" + item).width("100%").height(72).backgroundColor('#FFFFFF').borderRadius(24).fontSize(16).fontWeight(500).textAlign(TextAlign.Center).onClick(() => {if(item==='PageFlutter'&&this.pageInfos.getAllPathName().includes('PageFlutter')){// flutter只会一次，把栈移到顶部this.pageInfos.moveToTop(item)}else {this.pageInfos.pushPath({ name: item});}})}}, (item: number) => item.toString())}.width("90%").margin({ top: 12 })}.mode(NavigationMode.Auto).hideTitleBar(true)}.height('100%').width('100%').backgroundColor('#F1F3F5')}
}

PageFlutter.ets

import { FlutterPage } from "@ohos/flutter_ohos";
import { common } from "@kit.AbilityKit";// 跳转页面入口函数
@Builder
export function PageFlutterBuilder() {PageFlutter();
}
const EVENT_BACK_PRESS = 'EVENT_BACK_PRESS'@Component
struct PageFlutter {pathStack: NavPathStack = new NavPathStack();@LocalStorageLink('viewId') viewId: string = "";private context = getContext(this) as common.UIAbilityContextbuild() {NavDestination() {Text('hellppp')if(this.viewId){FlutterPage({ viewId: this.viewId })}}.onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack;}).onBackPressed(() => {this.context.eventHub.emit(EVENT_BACK_PRESS)return true;}).hideTitleBar(true)}
}

其他PageThree.ets，PageTwo.ets随便写

效果如下
在这里插入图片描述

组件导航 (Navigation)+flutter项目搭建-混合开发+分栏

组件导航 (Navigation)flutter项目搭建接上一章flutter项目的环境变量配置并运行flutter 上一章面熟了搭建flutter并用编辑器运行了ohos项目，这章主要是对项目的工程化改造先创建flutter项目，再配置Navigation 1.在开发视图的resources/base/profi…...

编程日记 2025/6/20 2:04:14

物联网中的WiFi模式解析：AP、STA与混合模式

物联网现在还是比较火的，各种设备都要联网，那么WiFi已成为设备联网的“标配”。但你是否想过，为什么有的设备能自己创建WiFi热点，有的只能连接路由器？为什么有些网关既能收数据又能传数据？ 主要还是因为Wi…...

编程日记 2025/5/28 14:35:02

spring cloud gateway 源码解析

参考：Spring Cloud Gateway SpringCloud gateway源码走读（顺带聊聊响应式） - 掘金 1，原理图还是从starter 开始看要实现网关的核心概念，肯定是需要接受请求的server ,从上面的截图看 starter-gateway 只负责了包的依赖，并没有定义自动配置，他依赖了starter-webf…...

编程日记 2025/5/27 20:24:01

游戏引擎学习第286天:开始解耦实体行为

回顾并为今天的内容定下基调我们目前正在进入实体系统的一个新阶段，之前我们已经让实体的移动系统变得更加灵活，现在我们想把这个思路继续延伸到实体系统的更深层次。今天的重点，是重新审视我们处理实体类型（entity type&#x…...

编程日记 2025/5/23 16:17:46

【论文阅读】KIMI K1.5: SCALING REINFORCEMENT LEARNING WITH LLMS

KIMI K1.5: SCALING REINFORCEMENT LEARNING WITH LLMS Scaling的解释： 通过系统性的方法扩展强化学习算法的能力，使其能够处理更复杂的问题、更大的状态/动作空间、更长的训练周期或更高效的资源利用原文摘要： 研究背景与问题定位传统预训…...

编程日记 2025/5/27 5:03:57

大语言模型与多模态模型比较

一、核心差异：输入数据类型与模态融合输入数据类型 LLM：仅处理文本数据，例如文本分类、机器翻译、问答等任务，通过大规模语料库学习语言规律。 LMM：支持文本、图像、音频、视频等多种模态输入，例如根据图…...

编程日记 2025/5/22 19:14:52

vscode debug node + 前端

方法 2：调试全栈（Node 前端） 如果需同时调试后端和前端： 分别启动两个调试会话一个配置调试 Node.js 后端（server.js）。另一个配置调试浏览器前端（如上）。 {// Use IntelliS…...

编程日记 2025/5/25 9:17:41

RK3568-鸿蒙5.1与原生固件-扇区对比分析

编译生成的固件目录地址 ../openharmony/out/rk3568/packages/phone/images鸿蒙OS RK3568固件分析通过查看提供的信息，分析RK3568开发板固件的各个组件及其用途： 主要固件组件根据终端输出的文件列表，RK3568固件包含以下关键组件&#x…...

编程日记 2025/5/25 13:18:13

Java线程池（Thread Pool）性能优化解析

在高性能、高并发的Java应用开发中，线程池（Thread Pool）是不可或缺的组件。它通过复用线程，避免了线程频繁创建和销毁带来的资源开销，提高了系统的响应速度和稳定性。然而，不合理的线程池配置和使用方式也可能成为系统性能瓶颈的根源。本文旨在深入解析Java线程池的性能…...

编程日记 2025/5/25 14:01:12

AI重塑未来学者：研究生教育的“进化论”与“数字化生存指南

目录：一、引言：AI浪潮下的“象牙塔”新挑战与新机遇二、AI的“双刃剑”：深度剖析对研究生教育的颠覆性影响 1. 研究范式的革新：从“人工”到“智能” 2. 知识获取与传授方式的重塑 3. 创新能力与批判性思维的再定义 4. 伦理困境与学术诚信的新考验三、他山之石：发达国家…...

编程日记 2025/5/25 11:33:44

IHttpHandler和Tcp Listener的web服务器接收上传文件有什么区别

IHttpHandler和Tcp Listener的web服务器接收上传文件有什么区别 IHttpHandler 与 TCP Listener 处理文件上传的核心区别 IHttpHandler 和 TcpListener 是ASP.NET中处理 HTTP 请求的两种不同抽象层级，它们在文件上传处理上存在以下关键区别： 1. 抽象层…...

编程日记 2025/5/31 5:57:31

C++ --- new与delete

new与delete 一、回顾1.malloc2.calloc3.realloc4.free 二、new与delete的特殊之处（1）（2） 三、new与delete的底层原理四、总结一、回顾在C语言阶段我们学习了动态内存管理：malloc,calloc,realloc,free。 1.malloc …...

编程日记 2025/5/26 5:50:31

Guided Filtering相关记录

一、背景介绍以前折腾保边滤波时候，刷了一些Guided Filtering相关资料。这里主要是对它们做个算法效果复现和资料简单整理。二、Guided Filtering 1、基本原理原版Guided Filtering的提出，主要是为了改善双边滤波做保边平滑滤波器时候的梯度翻转伪影…...

编程日记 2025/5/25 12:38:17

Rust 学习笔记：关于 String 的练习题

Rust 学习笔记：关于 String 的练习题 Rust 学习笔记：关于 String 的练习题选出描述正确的那一个。该程序最多可能发生多少次堆的内存分配？哪种说法最能解释为什么 Rust 不允许字符串索引？哪种说法最能描述字符串切片 &str 和字…...

编程日记 2025/5/27 4:51:50

AG-UI 协议：重构多模态交互，开启智能应用新纪元

一、协议诞生的时代背景：填补 AI 生态最后一块拼图在人工智能技术飞速发展的今天，AI 代理（Agent）作为能够主动执行复杂任务的智能实体，正从实验室走向生产环境，重塑各个行业的工作流程。然而，…...

编程日记 2025/5/30 15:42:41

网络世界的“百变身份“：动态IP让连接更自由

深夜的程序调试凌晨两点，我盯着电脑屏幕上的报错信息："Connection timed out"。这是本周第三次测试服务器响应时被拒绝访问了——只因为之前同一个IP地址尝试登录太过频繁。正在改代码的朋友小王凑过来看了眼："老兄&…...

编程日记 2025/5/31 14:50:22

【学习笔记】因果推理导论第1课

因果推理导论第1课为何要做因果推理一、辛普森悖论一个例子二、相关不代表因果性三、什么揭示因果四、观测研究五、结论本节课通过一、辛普森悖论一个例子书中举了一个疫情两种治疗方法A,B,分析哪一个治疗方法更好的例子. 首先已知B治疗方法更稀缺,因此观测数据样本上…...

编程日记 2025/5/28 15:34:33

Android 中权限分类及申请方式

在 Android 中，权限被分为几个不同的类别，每个类别有不同的申请和管理方式。一、普通权限（Normal Permissions）普通权限通常不会对用户隐私或设备安全造成太大风险。这些权限在应用安装时自动授予，无需用户在运行时手动授权。 android.permission.INTERNETandroid.pe…...

编程日记 2025/5/29 9:17:27

深度学习算法介绍

深度学习算法是一种基于人工神经网络结构的机器学习方法，其核心理念是通过多层次的神经元组成的神经网络来模拟人类大脑的工作原理。以下是几种常见的深度学习算法及其简要介绍： 多层感知器（Multilayer Perceptron, MLP）&#xff…...

编程日记 2025/5/19 22:56:12

Java【13_1】final、初始化块、继承(测试题)

测试题 1、简述final修饰符的功能 ① 修饰类该类不能被继承 ② 修饰变量该变量就是常量(一旦被初始化，就不可以修改) ③ 修饰方法该方法不能被重写 2、写出程序结果 (仔细认真) public class MyClass { static int x,y; static{ …...

编程日记 2025/5/29 17:58:59

小结：JavaScript 模块化工具链

JavaScript 模块化工具链是现代前端开发中用于组织、管理和优化模块化代码的核心工具集合。以下是关于 JS 模块化工具链的概述，包括关键工具、作用和常见工作流程：** **1. **模块化的背景 JavaScript 模块化是为了解决代码组织、依赖管理和作用域隔离…...

编程日记 2025/6/4 15:39:21

RabbitMQ ④-持久化 || 死信队列 || 延迟队列 || 事务

消息确认机制简单介绍 RabbitMQ Broker 发送消息给消费者后，消费者处理该消息时可能会发生异常，导致消费失败。如果 Broker 在发送消息后就直接删了，就会导致消息的丢失。为了保证消息可靠到达消费者并且成功处理了该消息，…...

编程日记 2025/5/31 7:14:04

十一、Hive JOIN 连接查询

作者：IvanCodes 日期：2025年5月16日专栏：Hive教程在数据分析的江湖中，数据往往分散在不同的“门派”（表）之中。要洞察数据间的深层联系，就需要JOIN这把利器，将相关联的数据串联起来…...

编程日记 2025/5/28 13:51:47

启用rvzi可视化自己的机器人发现joint state publisher gui没有滑块

启用rvzi可视化自己的机器人发现joint state publisher gui没有滑块？ 解决方法： 一：查看urdf中joint type定义是不是revolute。二：查看urdf关节限制是不是正确，如果是0到0则不正确。 <joint name"joint_…...

编程日记 2025/5/29 10:35:16

Gitee DevOps：中国企业数字化转型的“本土化加速器“

在数字化浪潮席卷全球的当下，DevOps已经从技术热词转变为企业的核心生产力工具。根据IDC最新报告，到2025年中国DevOps市场规模将达到15亿美元，年复合增长率高达25%。在这一快速增长的市场中，一个显著趋势正在显现：越来…...

编程日记 2025/5/29 11:12:34

RKNN开发环境搭建（ubuntu22.04）

以下情况在RV1106G3的平台上验证正常。 1、conda安装 1）conda --version//确认是否安装 2）创建一个安装目录，进行下一步 3）wget https://mirrors.tuna.tsinghua.edu.cn/anaconda/miniconda/Miniconda3-4.6.14-Linux-x…...

编程日记 2025/5/29 17:10:57

2025年上软考考试时间+准考证打印全攻略

各位同学好呀！我是你们的老朋友大老李~之前咱们聊过软考报名和机考模拟系统的使用技巧。今天要和大家分享一下，最近好多同学私信的问题："老李！准考证到底哪天能打印？""考试时间会不会有变动&#xff1f…...

编程日记 2025/5/31 11:31:10

vllm量化05—FP8 W8A8

本系列基于Qwen2.5-7B，学习如何使用vllm量化，并使用benchmark_serving.py、lm_eval 测试模型性能和评估模型准确度。测试环境为： OS: centos 7 GPU: nvidia l40 driver: 550.54.15 CUDA: 12.3本文是该系列第5篇——FP8 W8A8 一、量化 fro…...

编程日记 2025/5/27 6:13:35

OpenCV 图像透视变换详解

在计算机视觉领域，图像的视角问题常常会影响后续的分析与处理。例如，从倾斜角度拍摄的文档、带有畸变的场景图像等，都需要通过特定的方法进行矫正。OpenCV 作为计算机视觉领域的重要库，提供了强大的图像透视变换功能，能…...

编程日记 2025/5/26 8:04:53

定义主题变量 // styles/themes.scss :root {--primary-color: #314099;--secondary-color: #1E3968;--text-color: #2c44ce; }[data-theme"红系主题"] {--primary-color: #d74146;--secondary-color: #c20707;--text-color: #db3b3b; }在组件中使用变量 <templ…...

编程日记 2025/5/29 11:53:09

MySQL 高可用

目录一、概述MySQL高可用 1. 什么是高可用性（High Availability, HA）？ 2. MySQL 高可用常见方案 3. 高可用核心机制 4. 选型建议注意事项二、案例环境组成 MySQL 主主复制 keepalived HAProxy 的高可用负载均衡架构三、案例架构…...

编程日记 2025/5/29 9:34:28

C#学习教程（附电子书资料）

概述 C#（读作"C Sharp"）是一种由微软开发的现代编程语言，结合了C的高效性和Java的简洁性，专为.NET框架设计。以下是其核心特性和应用领域的详细介绍电子书资料：https://pan.quark.cn/s/6fe772420f95 一、语…...

编程日记 2025/5/25 10:35:55

MySQL性能优化

目录一、索引优化 1、慢查询日志分析 2、EXPLAIN 执行计划分析 3、索引类型选择 4、索引使用原则 5、常见索引失效场景二、SQL语句优化 1、避免低效操作符 2、减少数据扫描量 3、子查询优化 4、其他高频优化技巧三、表设计优化 1、数据类型优化四、架构设计优…...

编程日记 2025/5/27 7:49:42

Mendix 中的XPath 令牌（XPath Tokens）详解

在 Mendix 中，XPath 令牌（XPath Tokens） 是一种特殊的动态参数化查询技术，允许你在 XPath 表达式中使用变量或上下文相关的值，从而实现更灵活的查询逻辑。 1. 什么是 XPath 令牌？ XPath 令牌是 Mendix 提…...

编程日记 2025/5/26 10:51:32

Feign异步模式丢失上下文问题

Feign异步模式丢失上下文问题问题描述当我们使用异步对我们代码进行操作优化时，代码中使用了RequestContextHolder去获取上下文的数据，当我们执行原来可以执行的业务时发现报了空指针异常或数据为空，这是为什么呢？ 原理解释 …...

编程日记 2025/5/26 9:12:45

保姆教程-----安装MySQL全过程

1.电脑从未安装过mysql的，先找到mysql官网：MySQL :: Download MySQL Community Server 然后下载完成后，找到文件，然后双击打开 2. 选择安装的产品和功能依次点开“MySQL Servers”、“MySQL Servers”、“MySQL Servers 5.7”、…...

编程日记 2025/5/26 6:16:21

BUFDS_GTE2，IBUFDS，BUFG缓冲的区别

1、IBUFDS_GTE2 这是 Xilinx FPGA 中专门为高速收发器（SerDes/GTX/GTH/GTY）参考时钟设计的差分输入缓冲器。主要功能是将外部的差分时钟信号（如LVDS、LVPECL等）转换为FPGA内部的单端时钟信号，并保证信号的完整性和高…...

编程日记 2025/5/28 1:51:49

FPGA： XILINX Kintex 7系列器件的架构

本文将详细介绍Kintex-7系列FPGA器件的架构。以下内容将涵盖Kintex-7的核心架构特性、主要组成部分以及关键技术，尽量全面且结构化，同时用简洁的语言确保清晰易懂。 Kintex-7系列FPGA架构概述 Kintex-7是Xilinx 7系列FPGA中的中高端产品线，基…...

编程日记 2025/6/3 18:18:40

c/c++的opencv的图像预处理讲解

OpenCV 图像预处理核心技术详解 (C/C) 图像预处理是计算机视觉任务中至关重要的一步。原始图像往往受到噪声、光照不均、尺寸不一等多种因素的影响，直接用于后续分析（如特征提取、目标检测、机器学习模型训练等）可能会导致性能下降或结果不准…...

编程日记 2025/5/30 18:37:02

索恩格汽车SEG Automotive EDI 需求分析

SEG Automotive（索恩格汽车）是一家全球领先的汽车电气化系统供应商，专注于为传统内燃机和新能源车辆提供高效、可持续的动力解决方案。 EDI 在汽车行业的重要性在汽车制造行业，高效的供应链是精益生产的核心。精益生产强调“按…...

编程日记 2025/6/1 10:22:44

【简单模拟实现list】

在C标准模板库（STL）中，list是一个非常强大的容器，它基于双向链表实现，支持高效的插入和删除操作。虽然我们可以直接使用STL中的list，但通过自己模拟实现一个list，可以更好地理解其背后的原理和数…...

编程日记 2025/6/1 15:50:03

深入解析ZAB协议：ZooKeeper的分布式一致性核心

引言在分布式系统中，如何高效、可靠地实现多节点间的数据一致性是核心挑战之一。ZAB协议（ZooKeeper Atomic Broadcast）作为 ZooKeeper的核心算法，被广泛应用于分布式协调服务（如Kafka、HBase、Dubbo等）。…...

编程日记 2025/5/29 11:43:56

交叉熵损失函数，KL散度， Focal loss

交叉熵损失函数（Cross-Entropy Loss） 交叉熵损失函数，涉及两个概念，一个是损失函数，一个是交叉熵。首先，对于损失函数。在机器学习中，损失函数就是用来衡量我们模型的预测结果与真实结果之间…...

编程日记 2025/5/27 7:50:35

k8s部署实战-springboot应用部署

在 Kubernetes 上部署 SpringBoot 应用实战指南前言本文将详细介绍如何将一个 SpringBoot 应用部署到 Kubernetes 集群中，包括制作镜像、编写部署文件、创建服务等完整步骤。准备工作 1. 示例 SpringBoot 应用假设我们有一个简单的 SpringBoot 应用，提供 REST API 服…...

编程日记 2025/5/27 8:30:38

快速选择算法：优化大数据中的 Top-K 问题

在处理海量数据时，经常会遇到这样的需求：找出数据中最大的前 K 个数，而不必对整个数据集进行排序。这种场景下，快速选择算法（Quickselect）就成了一个非常高效的解决方案。本文将通过一个 C 实现的快速选择算…...

编程日记 2025/5/29 15:24:43

uniapp-商城-60-后台新增商品（属性的选中和页面显示）

前面添加了属性，添加属性的子级项目。也分析了如何回显，但是在添加新的商品的时，我们也同样需要进行选择，还要能正常的显示在界面上。下面对页面的显示进行分析。 1、界面情况回顾属性显示其实是个一嵌套的数据显示。 2、选中的…...

编程日记 2025/5/28 21:26:09

利用 Amazon Bedrock Data Automation（BDA）对视频数据进行自动化处理与检索

当前点播视频平台搜索功能主要是基于视频标题的关键字检索。对于点播平台而言，我们希望可以通过优化视频搜索体验满足用户通过模糊描述查找视频的需求，从而提高用户的搜索体验。借助 Amazon Bedrock Data Automation（BDA）技术&…...

编程日记 2025/5/26 6:28:16

项目QT+ffmpeg+rtsp（一）——Qt的安装和rtsp的测试

文章目录一、Qt安装二、插件配置tool与卸载三、下载ffmpeg四、查看能否使用（视频）五、代码复现5.1 rtsp申请5.2 rtsp在线测试5.3代码修改六、结果一、Qt安装对于QT中5.12版本之后，都是使用在线版本，如果你想安装某一个的历史在线版本，一定要点击archive，不然显示不出来…...

编程日记 2025/5/22 9:56:44

高速光耦在通信行业的应用（五） | 5Mbps通信光耦的特性

针对5MBd速率光耦市场，晶台推出KL2200、KL2201和KL2202系列光耦 ,对标大部分国外品牌产品的应用；它分别由一个红外发射二极管和一个高速集成光电检测器逻辑门组成。它采用 8 引脚 DIP 封装，并提供 SMD 选项。KL2200 的检测器具有一个三态输出…...

编程日记 2025/5/23 16:10:51

#跟着若城学鸿蒙# web篇-运动和方向传感器监测

前言有些前端业务场景需要用到一些传感器，比如运动传感器和方向传感器来实现摇一摇功能。这就需要前端能够直接获取到相关数据，而不是通过 js 调用客户端代码来实现。权限还是需要在模块的module.json5文件中添加相关权限 {"name" : &qu…...

编程日记 2025/6/1 23:49:58

组件导航 (Navigation)+flutter项目搭建

1.在开发视图的resources/base/profile下面定义配置文件，文件名可以自定义，例如：router_map.json。

2.在module.json5配置的module下面配置

在入口 "pages/Index"文件配置

相关文章：