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

HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现

HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现

最近在学习鸿蒙开发过程中,阅读了官方文档,在之前做flutter时候,经常使用overlay,使用OverlayEntry加入到overlayState来做添加悬浮按钮、提示弹窗、加载中指示器、加载失败的toast等功能。那在HarmonyOS鸿蒙开发中也可能有类似的功能需求。

HarmonyOS鸿蒙开发的使用弹窗文档中已经非常详细了
地址:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-use-dialog-V5

一、子窗口window

在弹出的loading指示器中,我们可以使用创建子window的方式,调用window的loadContentByName方法来实现。
实现步骤

效果预览

在这里插入图片描述

  • 1、实现加载中的loading组件,这里定义名字为LoadingHud

在LoadingHud中有LoadingProgress、Text提示文本,Text显示的信息由LocalStorage进行传递
需要传递的数据message,在aboutToAppear进行赋值

@Local message: string = '';aboutToAppear(): void {this.message = LocalStorage.getShared().get("message") ?? "";}

当然在调用window的loadContentByName时候,需要确定加载的主角的routeName,这就需要在LoadingHud组件中使用装饰器来设置

/// 通用的hud,弹出框,或者loading框
@Entry({ routeName: "hudLoading", storage: LocalStorage.getShared() })
@ComponentV2
export struct LoadingHud {... 其他代码
}

LoadingHud的完整代码如下:

/// 通用的hud,弹出框,或者loading框
@Entry({ routeName: "hudLoading", storage: LocalStorage.getShared() })
@ComponentV2
export struct LoadingHud {@Local message: string = '';aboutToAppear(): void {this.message = LocalStorage.getShared().get("message") ?? "";}build() {Column() {Column(){Row() {// 从左往右,1号环形进度条,默认前景色为蓝色渐变,默认strokeWidth进度条宽度为2.0vpLoadingProgress().color($r('app.color.success')).width(40).height(40)// messageText(this.message).fontSize(14).fontColor($r('app.color.dataset_empty_message')).margin({left: 10})}.padding({top: 15,bottom: 15,left: 15,right: 20}).justifyContent(FlexAlign.Center)Button("点击消失").width(100).height(40).fontSize(12).backgroundColor('#ef04792c').margin({top: 10}).onClick(()=> {LoadingHudUtil.dismissLoading();})}.justifyContent(FlexAlign.Center).constraintSize({minWidth: 200,minHeight: 150,}).backgroundColor($r('app.color.white')).borderRadius(10)}.justifyContent(FlexAlign.Center).width('100%').height('100%').backgroundColor('#00000000').hitTestBehavior(HitTestMode.Transparent)}
}
  • 2、创建子Window并显示

在创建LoadingHud后,我们需要创建创建子Window并显示window,显示我们的loadingHUD
创建window的createWindow,这里使用的windowType是window.WindowType.TYPE_DIALOG,也可以换成其他的试试看。

let windowName = "loading";// 创建窗口let subWindow = await window.createWindow({name: windowName,windowType: window.WindowType.TYPE_DIALOG,ctx: ctx,});

设置LocalStorage数据,存储message

//创建存储let storage = new LocalStorage();//存储数据storage.setOrCreate('message',  tip);

调用window的loadContentByName,设置Window的大小及背景颜色,显示Window

await subWindow.loadContentByName('hudLoading', storage);let dp = display.getDefaultDisplaySync();await subWindow.resize(dp.width, dp.height);subWindow.setWindowBackgroundColor('#30000000');await subWindow.showWindow();

显示后Window,在需要消失的时候调用destroyWindow

static async dismissLoading(): Promise<void> {if (LoadingHudUtil.cacheWindow) {await LoadingHudUtil.cacheWindow.destroyWindow();}}

完整的LoadingHudUtil的代码如下

import { display, window } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';
import('../components/hud/LoadingHud'); // 引入命名路由页面// 自定义弹出窗口
export class LoadingHudUtil {private static cacheWindow: window.Window;static async showLoading(tip: string): Promise<void> {let ctx = getContext() as common.UIAbilityContext;try {let windowName = "loading";// 创建窗口let subWindow = await window.createWindow({name: windowName,windowType: window.WindowType.TYPE_DIALOG,ctx: ctx,});LoadingHudUtil.cacheWindow = subWindow;//创建存储let storage = new LocalStorage();//存储数据storage.setOrCreate('message',  tip);console.log("LoadingHudUtil loadContentByName" + tip);// subWindow.setGestureBackEnabled(false);// subWindow.setDialogBackGestureEnabled(false);// subWindow.setWindowTouchable(true);await subWindow.loadContentByName('hudLoading', storage);let dp = display.getDefaultDisplaySync();await subWindow.resize(dp.width, dp.height);subWindow.setWindowBackgroundColor('#30000000');await subWindow.showWindow();} catch (e) {console.log("LoadingHudUtil showLoading e:" + JSON.stringify(e));}}static async dismissLoading(): Promise<void> {if (LoadingHudUtil.cacheWindow) {await LoadingHudUtil.cacheWindow.destroyWindow();}}
}

二、自定义Dialog

在HarmonyOS鸿蒙开发中,可以使用CustomDialogController来实现自定义的弹窗。

效果预览
在这里插入图片描述

  • 1.自定义弹窗组件CustomAlertDialog

在CustomAlertDialog中实现一个消息提示,并且点击按钮可以关闭dialog
代码如下:

@CustomDialog
export struct CustomAlertDialog {controller?: CustomDialogControllertitle?: stringbuild() {Column() {Column() {// messageText(this.title).fontSize(14).fontColor($r('app.color.dataset_empty_message')).margin({left: 10})Button("点击消失").width(100).height(40).fontSize(12).backgroundColor('#ef04792c').margin({top: 10}).onClick(() => {this.controller?.close();})}.justifyContent(FlexAlign.Center).constraintSize({minWidth: 200,minHeight: 100,}).backgroundColor($r('app.color.white')).borderRadius(10)}.justifyContent(FlexAlign.Center).width('100%').height('100%').backgroundColor(Color.Transparent).hitTestBehavior(HitTestMode.Transparent)}
}
  • 2.使用CustomDialogController来展示弹窗

定义CustomDialogController

// 自定义CustomDialogcustomDialogController: CustomDialogController | null = new CustomDialogController({builder: CustomAlertDialog({title: "温馨提示"}),alignment: DialogAlignment.Center,onWillDismiss: (dismissDialogAction: DismissDialogAction) => {console.info("reason=" + JSON.stringify(dismissDialogAction.reason))console.log("dialog onWillDismiss")if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {dismissDialogAction.dismiss()}if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {dismissDialogAction.dismiss()}},autoCancel: true,customStyle: true,});

在需要展示弹窗的时候调用customDialogController的open方法。

 if (this.customDialogController != null) {this.customDialogController.open()}

当然如果页面消失,尽量在aboutToDisappear中将customDialogController置空

  // 在自定义组件即将销毁时将dialogController置空aboutToDisappear() {this.customDialogController = null // 将dialogController置空}

三、Overlay浮层

在官方文档中有一段描述
浮层(OverlayManager) 用于将自定义的UI内容展示在页面(Page)之上,在Dialog、Popup、Menu、BindSheet、BindContentCover和Toast等组件之下,展示的范围为当前窗口安全区内。可适用于常驻悬浮等场景。

使用OverlayManager来添加、删除、隐藏、显示节点Component

效果预览
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 1.定义CustomOverlayView组件界面

在CustomOverlayView中,我们定义了加载中,加载失败,加载成功的几种类型,用于展示不同的样式
定义OverlayConfig类为展示的界面配置、OverlayScaleImage缩放的icon

export enum OverlayType {loading,success,fail
}export class OverlayConfig {message: string = ""offset: Position = { x: 0, y: -50 }index: number = 0autoDismiss: boolean = true;duration: number = 3000 // 持续时间onCallback?: (index: number) => voidtype: OverlayType = OverlayType.loadingconstructor(message: string) {this.message = message}
}@Builder
export function builderCustomOverlayView(overlayConfig: OverlayConfig) {CustomOverlayView({olConfig: overlayConfig})
}@ComponentV2
struct OverlayScaleImage {@Param @Require src: PixelMap | ResourceStr | DrawableDescriptor;@Param imgWidth: number = 40;@Local imgScale: number = 0.0;build() {Image(this.src).width(this.imgWidth).aspectRatio(1).scale({ x: this.imgScale, y: this.imgScale }).animation({duration: 300, // 时长iterations: 1, // 设置-1表示动画无限循环}).onAppear(() => {// 组件挂载完毕,修改数值触发动画效果this.imgScale = 1.0})}
}@ComponentV2
export struct CustomOverlayView {@Param olConfig: OverlayConfig = new OverlayConfig("");aboutToAppear(): void {setTimeout(() => {console.log("CustomOverlayView aboutToAppear");if (this.olConfig.onCallback != null) {this.olConfig.onCallback(this.olConfig.index);}}, this.olConfig.duration);}build() {Column() {if (OverlayType.loading == this.olConfig.type) {// messageLoadingProgress().color($r('app.color.success')).width(40).height(40)} else if (OverlayType.success == this.olConfig.type) {// messageOverlayScaleImage({src: $r('app.media.ic_hud_success'),imgWidth: 40})} else if (OverlayType.fail == this.olConfig.type) {// messageOverlayScaleImage({src: $r('app.media.ic_hud_fail'),imgWidth: 30})}Text(this.olConfig.message).fontSize(14).fontColor($r('app.color.white')).margin({top: 10,})}.padding({top: 20,bottom: 20,left: 15,right: 15}).justifyContent(FlexAlign.Center).constraintSize({minWidth: 180,minHeight: 80,}).backgroundColor($r('app.color.overlay_bg_color')).borderRadius(10).offset(this.olConfig.offset)}
}
  • 2.CustomOverlayStorage

由于在OverlayManager来添加、删除、隐藏、显示节点过程中,需要使用index索引参数。这里使用一个类,类中有一个数组记录一下展示的节点Component

@ObservedV2
export class CustomOverlayStorage {@Trace contentArray: ComponentContent<OverlayConfig>[] = []
}
  • 3.自定义MyOverlayManager进行封装OverlayManager

首先确定属性uiContext,创建ComponentContent需要该参数,这个我在index.ets中进行初始化传入。
CustomOverlayStorage存储ComponentContent的数组,确定index
overlayManager用来来添加、删除、隐藏、显示节点

MyOverlayManager代码如下

/// 用于管理Overlay
/// 浮层(OverlayManager) 用于将自定义的UI内容展示在页面(Page)之上,
/// 在Dialog、Popup、Menu、BindSheet、BindContentCover和Toast等组件之下,
/// 展示的范围为当前窗口安全区内。可适用于常驻悬浮等场景。
/// 与OverlayManager相关的属性推荐采用AppStorage来进行应用全局存储,以免切换页面后属性值发生变化从而导致业务错误。
import { AppStorageV2, ComponentContent, OverlayManager, router } from '@kit.ArkUI';
import {builderCustomOverlayView,CustomOverlayStorage,OverlayConfig
} from '../common/components/hud/CustomOverlayView';export class MyOverlayManager {private static currentIndex: number = 0;private uiContext?: UIContextprivate overlayManager?: OverlayManagerprivate overlayStorage: CustomOverlayStorage =AppStorageV2.connect(CustomOverlayStorage, 'overlayStorage', () => new CustomOverlayStorage())!;private static instance: MyOverlayManager;public static getInstance(): MyOverlayManager {if (MyOverlayManager.instance == null) {MyOverlayManager.instance = new MyOverlayManager();}return MyOverlayManager.instance;}initOverlayNode(uiContext: UIContext): void {this.uiContext = uiContext;this.overlayManager = uiContext.getOverlayManager();}addOverlayView(overlayConfig: OverlayConfig): void {if (this.uiContext != null && this.uiContext != undefined) {// 设置索引下标let index = MyOverlayManager.currentIndex++;overlayConfig.index = index;// 创建componentContentlet componentContent = new ComponentContent(this.uiContext!, wrapBuilder<[OverlayConfig]>(builderCustomOverlayView),overlayConfig)this.overlayStorage.contentArray.push(componentContent);if (this.overlayManager != null && this.overlayManager != undefined) {this.overlayManager.addComponentContent(componentContent, index)}}}hideOverlayView(index: number) {if (this.overlayManager != null && this.overlayManager != undefined) {if (index < this.overlayStorage.contentArray.length) {this.overlayManager.hideComponentContent(this.overlayStorage.contentArray[index])}}}showOverlayView(index: number) {if (this.overlayManager != null && this.overlayManager != undefined) {if (index < this.overlayStorage.contentArray.length) {this.overlayManager.showComponentContent(this.overlayStorage.contentArray[index])}}}removeOverlayView(index: number) {if (this.overlayManager != null && this.overlayManager != undefined) {if (index < this.overlayStorage.contentArray.length) {this.overlayManager.removeComponentContent(this.overlayStorage.contentArray[index])}}}removeAllOverlayView() {if (this.overlayManager != null && this.overlayManager != undefined) {this.overlayManager.hideAllComponentContents();for (let index: number = 0; index < this.overlayStorage.contentArray.length; index++) {this.overlayManager.removeComponentContent(this.overlayStorage.contentArray[index])}}}
}
  • 4.index.ets传入uiContext

初始化配置uiContext

aboutToAppear(): void {console.log("aboutToAppear");MyOverlayManager.getInstance().initOverlayNode(this.getUIContext());}
  • 5.调用OverlayManager进行显示加载中、加载成功、加载失败提示

定义type及message

let config = new OverlayConfig(message);config.type = OverlayType.loading;config.onCallback = (index: number)=>{MyOverlayManager.getInstance().removeOverlayView(index)}MyOverlayManager.getInstance().addOverlayView(config);

加载中、加载成功、加载失败的Util

import { MyOverlayManager } from "../../manager/MyOverlayManager";
import { OverlayConfig, OverlayType } from "../components/hud/CustomOverlayView";export class EasyLoadingHud {static showLoading(message: string) {let config = new OverlayConfig(message);config.type = OverlayType.loading;config.onCallback = (index: number)=>{MyOverlayManager.getInstance().removeOverlayView(index)}MyOverlayManager.getInstance().addOverlayView(config);}static showSuccess(message: string) {let config = new OverlayConfig(message);config.type = OverlayType.success;config.onCallback = (index: number)=>{MyOverlayManager.getInstance().removeOverlayView(index)}MyOverlayManager.getInstance().addOverlayView(config);}static showFail(message: string) {let config = new OverlayConfig(message);config.type = OverlayType.fail;config.onCallback = (index: number)=>{MyOverlayManager.getInstance().removeOverlayView(index)}MyOverlayManager.getInstance().addOverlayView(config);}
}
  • 6.页面调用EasyLoadingHud进行显示

可以在页面需要的地方调用EasyLoadingHud进行显示

代码如下

// 加载中
EasyLoadingHud.showLoading("加载中...")
// 加载成功
EasyLoadingHud.showSuccess("加载成功")
// 加载失败
EasyLoadingHud.showFail("加载失败")

四、小结

在开发过程中会遇到提示弹窗、加载中指示器、加载失败的toast等功能,这里是学习HarmonyOS鸿蒙开发的学习记录,如果对你有用,你可以点个赞哦~~。详细的文档还是以官方文档为主。

相关文章:

HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现

HarmonyOS鸿蒙开发 弹窗及加载中指示器HUD功能实现 最近在学习鸿蒙开发过程中&#xff0c;阅读了官方文档&#xff0c;在之前做flutter时候&#xff0c;经常使用overlay&#xff0c;使用OverlayEntry加入到overlayState来做添加悬浮按钮、提示弹窗、加载中指示器、加载失败的t…...

【Ubuntu与Linux操作系统:一、Ubuntu安装与基本使用】

第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核&#xff0c;拥有高稳定性和强大的网络功能。由于其开源性和灵活性&#xff0c;Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版&#xf…...

React 元素渲染

React 元素渲染 React 是一个用于构建用户界面的 JavaScript 库&#xff0c;它允许开发人员创建大型应用程序&#xff0c;这些应用程序可以随着时间的推移而高效地更新和渲染。React 的核心概念之一是元素渲染&#xff0c;它描述了如何将 JavaScript 对象转换为 DOM&#xff0…...

【2024年华为OD机试】 (C卷,100分)- 括号匹配(Java JS PythonC/C++)

一、问题描述 题目描述 给定一个字符串&#xff0c;里边可能包含“()”、“[]”、“{}”三种括号&#xff0c;请编写程序检查该字符串中的括号是否成对出现&#xff0c;且嵌套关系正确。 若括号成对出现且嵌套关系正确&#xff0c;或该字符串中无括号字符&#xff0c;输出&am…...

解锁企业数字化转型新力量:OpenCoze(开源扣子)

在当今数字化浪潮席卷之下&#xff0c;企业对于高效管理和协同运作的需求愈发迫切&#xff0c;而开源技术正逐渐成为众多企业破局的关键利器。今天&#xff0c;想给大家介绍一款极具潜力的开源项目 ——OpenCoze&#xff0c;中文名称 “开源扣子”。 一、OpenCoze 是什么&…...

【网络云SRE运维开发】2025第2周-每日【2025/01/12】小测-【第12章 rip路由协议】理论和实操考试题解析

文章目录 选择题答案及解析理论题答案及解析实操题答案及解析下一步进阶 选择题答案及解析 RIP路由协议是基于哪种算法的动态路由协议&#xff1f; 答案&#xff1a;B. 距离矢量算法解析&#xff1a;链路状态算法用于OSPF等协议&#xff1b;最小生成树算法主要用于生成树协议&…...

【微服务】8、分布式事务 ( XA 和 AT )

文章目录 利用Seata解决分布式事务问题&#xff08;XA模式&#xff09;AT模式1. AT模式原理引入2. AT模式执行流程与XA模式对比3. AT模式性能优势及潜在问题4. AT模式数据一致性解决方案5. AT模式一阶段操作总结6. AT模式二阶段操作分析7. AT模式整体特点8. AT模式与XA模式对比…...

CVE-2025-22777 (CVSS 9.8):WordPress | GiveWP 插件的严重漏洞

漏洞描述 GiveWP 插件中发现了一个严重漏洞&#xff0c;该插件是 WordPress 最广泛使用的在线捐赠和筹款工具之一。该漏洞的编号为 CVE-2025-22777&#xff0c;CVSS 评分为 9.8&#xff0c;表明其严重性。 GiveWP 插件拥有超过 100,000 个活跃安装&#xff0c;为全球无数捐赠平…...

TypeScript Jest 单元测试 搭建

NPM TypeScript 项目搭建 创建目录 mkdir mockprojectcd mockproject初始化NPM项目 npm init -y安装TypeScript npm i -D typescript使用VSCode 打开项目 创建TS配置文件tsconfig.json {"compilerOptions": {"target": "es5","module&…...

基于 SSH 的任务调度系统

文末附有完整项目代码 在当今科技飞速发展的时代&#xff0c;任务调度系统的重要性日益凸显。本文将详细介绍一个基于 SSH&#xff08;SpringStruts2Hibernate&#xff09;的任务调度系统的设计与实现。 一、系统概述 本系统旨在改变传统人工任务调度方式&#xff0c;通过计算…...

filestream安装使用全套+filebeat的模块用法

1 filestream介绍 官方宣布&#xff1a;输入类型为log在filebeat7.16版本已经弃用了 Filestream 是 Filebeat 中的一种 输入类型&#xff08;Input&#xff09;&#xff0c;用于处理日志文件的读取。它是为了取代 Filebeat 中传统的 log 输入&#xff08;Input&#xff09;设…...

java项目之房屋租赁系统源码(springboot+mysql+vue)

项目简介 房屋租赁系统实现了以下功能&#xff1a; 房屋租赁系统的主要使用者分为&#xff1a; 系统管理&#xff1a;个人中心、房屋信息管理、预约看房管理、合同信息管理、房屋报修管理、维修处理管理、房屋评价管理等模块的查看及相应操作&#xff1b; 房屋信息管理&#…...

sap mm学习笔记

1. 业务流程 2. 组织架构 3. 物料主数据 4.采购主数据 5. 采购管理 6. 库存管理 7.物料主数据 8. 采购申请 ME51N...

代码随想录_链表

代码随想录02 链表 203.移除链表元素 力扣题目链接(opens new window) 题意&#xff1a;删除链表中等于给定值 val 的所有节点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; 输入&#xff1a;he…...

EF Code 并发控制

【悲观控制】 不推荐用&#xff0c;EF Core 没有封装悲观并发控制的使用&#xff0c;需要使用原生Sql来使用悲观并发控制 一般使用行锁、表锁等排他锁对资源进行锁定&#xff0c;同时只有一个使用者操作被锁定的资源 拿sql server举例&#xff0c;可以使用表所、或者行所解决…...

ceph fs status 输出详解

ceph fs status 命令用于显示 Ceph 文件系统的状态信息&#xff0c;其中各列的含义如下&#xff1a; RANK&#xff1a;元数据服务器&#xff08;MDS&#xff09;的等级或标识符。 STATE&#xff1a;MDS 的当前状态&#xff0c;例如 active&#xff08;活跃&#xff09;、stan…...

FFmpeg Muxer HLS

使用FFmpeg命令来研究它对HLS协议的支持程度是最好的方法&#xff1a; ffmpeg -h muxerhls Muxer HLS Muxer hls [Apple HTTP Live Streaming]:Common extensions: m3u8.Default video codec: h264.Default audio codec: aac.Default subtitle codec: webvtt. 这里面告诉我…...

如何用SQL语句来查询表或索引的行存/列存存储方式|OceanBase 用户问题集锦

一、问题背景 自OceanBase 4.3.0版本起&#xff0c;支持了列存引擎&#xff0c;允许表和索引以行存、纯列存或行列冗余的形式创建&#xff0c;且这些存储方式可以自由组合。除了使用 show create table命令来查看表和索引的存储类型外&#xff0c;也有用户询问如何通过SQL语句…...

回归预测 | MATLAB实GRU多输入单输出回归预测

回归预测 | MATLAB实GRU多输入单输出回归预测 目录 回归预测 | MATLAB实GRU多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 回归预测 | MATLAB实GRU多输入单输出回归预测。使用GRU作为RNN的一种变体来处理时间序列数据。GRU相比传统的RNN有较好的记…...

【OpenGL/Assimp】渲染模型、半透明材质与封装光源

文章目录 渲染成果Assimp库准备&#xff1a;Mesh类修改&#xff1a;透明贴图使用&#xff1a;光源封装&#xff1a;使用方式在如下测试环境中&#xff1a; 渲染成果 Assimp库准备&#xff1a; 从GitHub拉取源码&#xff0c;根据网络教程&#xff0c;借助CMake生成VS工程项目&a…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

【技巧】dify前端源代码修改第一弹-增加tab页

回到目录 【技巧】dify前端源代码修改第一弹-增加tab页 尝试修改dify的前端源代码&#xff0c;在知识库增加一个tab页"HELLO WORLD"&#xff0c;完成后的效果如下 [gif01] 1. 前端代码进入调试模式 参考 【部署】win10的wsl环境下启动dify的web前端服务 启动调试…...

ffmpeg(三):处理原始数据命令

FFmpeg 可以直接处理原始音频和视频数据&#xff08;Raw PCM、YUV 等&#xff09;&#xff0c;常见场景包括&#xff1a; 将原始 YUV 图像编码为 H.264 视频将 PCM 音频编码为 AAC 或 MP3对原始音视频数据进行封装&#xff08;如封装为 MP4、TS&#xff09; 处理原始 YUV 视频…...

【Pandas】pandas DataFrame dropna

Pandas2.2 DataFrame Missing data handling 方法描述DataFrame.fillna([value, method, axis, …])用于填充 DataFrame 中的缺失值&#xff08;NaN&#xff09;DataFrame.backfill(*[, axis, inplace, …])用于**使用后向填充&#xff08;即“下一个有效观测值”&#xff09…...

[C++错误经验]case语句跳过变量初始化

标题&#xff1a;[C错误经验]case语句跳过变量初始化 水墨不写bug 文章目录 一、错误信息复现二、错误分析三、解决方法 一、错误信息复现 write.cc:80:14: error: jump to case label80 | case 2:| ^ write.cc:76:20: note: crosses initialization…...

电脑定时关机工具推荐

软件介绍 本文介绍一款轻量级的电脑自动关机工具&#xff0c;无需安装&#xff0c;使用简单&#xff0c;可满足定时关机需求。 工具简介 这款关机助手是一款无需安装的小型软件&#xff0c;文件体积仅60KB&#xff0c;下载后可直接运行&#xff0c;无需复杂配置。 使用…...

智能照明系统:具备认知能力的“光神经网络”

智能照明系统是物联网技术与传统照明深度融合的产物&#xff0c;其本质是通过感知环境、解析需求、自主决策的闭环控制&#xff0c;重构光与人、空间、环境的关系。这一系统由智能光源、多维传感器、边缘计算单元及云端管理平台构成&#xff0c;形成具备认知能力的“光神经网络…...