当前位置: 首页 > 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…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...