【愚公系列】2023年12月 HarmonyOS教学课程 037-ArkUI事件(焦点事件)

在这里插入图片描述

🏆 作者简介,愚公搬代码
🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,51CTO博客专家等。
🏆《近期荣誉》:2023年华为云十佳博主,2022年CSDN博客之星TOP2,2022年华为云十佳博主等。
🏆《博客内容》:.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

文章目录

  • 🚀前言
  • 🚀一、焦点事件
    • 🔎1.基本概念
    • 🔎2.走焦规则
    • 🔎3.监听组件的焦点变化
    • 🔎4.设置组件是否获焦
    • 🔎5.自定义默认焦点
    • 🔎6.自定义TAB键走焦顺序
      • 🦋6.1 groupDefaultFocus
      • 🦋6.2 focusOnTouch
      • 🦋6.3 focusControl.requestFocus
  • 🚀感谢:给读者的一封信


🚀前言

焦点事件是指程序中的重要事件或关键点。焦点事件通常是程序的核心逻辑和功能,需要引起特殊的关注和处理。

在图形用户界面(GUI)编程中,焦点事件通常与用户交互和界面输入相关。例如,当用户点击按钮、输入文本或选择菜单项时,这些操作会触发相应的焦点事件。程序需要捕获这些焦点事件并进行处理,以执行相应的操作或响应用户的请求。

另外,在事件驱动的编程模型中,焦点事件也与程序的流程控制和状态转换有关。例如,当某个关键条件满足时,程序会触发相应的焦点事件,然后根据这些事件来执行特定的操作或改变程序的状态。

🚀一、焦点事件

🔎1.基本概念

焦点事件基本概念是指在用户界面中,焦点在不同控件之间切换时,触发的相关事件。下面是一些焦点事件的基本概念:

  1. 焦点(Focus):焦点是指用户当前正在与之交互的控件或元素。例如,在一个表单中,焦点可能位于输入框、复选框或按钮等控件上。焦点通常用来表示哪个控件可以接收用户的输入。

  2. 默认焦点(Default Focus):默认焦点是指用户在进入一个界面或打开一个应用程序时,自动设置在界面中某个控件上的焦点。默认焦点通常是用来提高用户交互的效率,使用户可以直接开始输入或选择操作。

  3. 获焦(Focus Gained):获焦是指当一个控件或元素成为焦点时触发的事件。获焦事件通常可以用来执行一些初始化操作,例如设置焦点控件的样式或加载数据。

  4. 失焦(Focus Lost):失焦是指当一个控件或元素不再是焦点时触发的事件。失焦事件通常可以用来执行一些清理操作,例如保存用户输入或验证输入数据。

  5. 走焦(Traversal):走焦是指焦点在控件之间切换的过程。焦点可以通过按下Tab键或者使用方向键来在不同的控件之间移动。

  6. 焦点态(Focus State):焦点态是指控件或元素在成为焦点或失去焦点时,其外观或状态发生的变化。焦点态可以用来提高用户交互的可见性,例如高亮显示焦点控件或显示输入光标。

焦点事件基本概念涉及到焦点的获取、失去和切换,以及与焦点相关的事件和状态。

🔎2.走焦规则

走焦规则描述
线性走焦焦点按照一定的顺序在可焦点元素之间依次切换。例如,按下Tab键时,焦点会自动切换到下一个可焦点元素。
十字走焦焦点可以在四个方向上进行切换,类似于使用方向键进行导航。例如,按下方向键时,焦点会根据按键的方向进行相应的切换。
tabIndex走焦通过在元素上设置tabIndex属性来指定焦点切换的顺序。具有较小tabIndex值的元素会优先获取焦点。
区域走焦将焦点限制在某个区域内进行切换。例如,在一个表单中,焦点只能在表单内的元素之间进行切换,而不能切换到其他区域。
走焦至容器组件规则在一个容器组件中的焦点切换规则。例如,在一个可滚动的容器中,焦点可以在可见的子元素之间切换,当焦点切换到不可见的子元素时,容器会自动滚动使其可见。
焦点交互焦点获取和失去时的交互行为。例如,当焦点切换到一个输入框时,可以自动选中其中的文字,方便用户直接输入;当焦点离开输入框时,可以进行输入内容的验证。

🔎3.监听组件的焦点变化

接口定义:

onFocus(event: () => void)//获焦事件回调
onBlur(event:() => void)//失焦事件回调

案例:

// xxx.ets
@Entry
@Component
struct FocusEventExample {@State oneButtonColor: Color = Color.Gray;@State twoButtonColor: Color = Color.Gray;@State threeButtonColor: Color = Color.Gray;build() {Column({ space: 20 }) {// 通过外接键盘的上下键可以让焦点在三个按钮间移动,按钮获焦时颜色变化,失焦时变回原背景色Button('First Button').width(260).height(70).backgroundColor(this.oneButtonColor).fontColor(Color.Black)// 监听第一个组件的获焦事件,获焦后改变颜色.onFocus(() => {this.oneButtonColor = Color.Green;})// 监听第一个组件的失焦事件,失焦后改变颜色.onBlur(() => {this.oneButtonColor = Color.Gray;})Button('Second Button').width(260).height(70).backgroundColor(this.twoButtonColor).fontColor(Color.Black)// 监听第二个组件的获焦事件,获焦后改变颜色.onFocus(() => {this.twoButtonColor = Color.Green;})// 监听第二个组件的失焦事件,失焦后改变颜色.onBlur(() => {this.twoButtonColor = Color.Grey;})Button('Third Button').width(260).height(70).backgroundColor(this.threeButtonColor).fontColor(Color.Black)// 监听第三个组件的获焦事件,获焦后改变颜色.onFocus(() => {this.threeButtonColor = Color.Green;})// 监听第三个组件的失焦事件,失焦后改变颜色.onBlur(() => {this.threeButtonColor = Color.Gray ;})}.width('100%').margin({ top: 20 })}
}

在这里插入图片描述

🔎4.设置组件是否获焦

组件类型获焦能力默认焦点设定
默认可获焦组件有交互行为的组件,例如Button、Checkbox,TextInput组件,此类组件无需设置任何属性,默认即可获焦。
有获焦能力但默认不可获焦组件Text、Image组件等,缺省情况下无法获焦,可使用focusable(true)使能。
无获焦能力的组件无交互行为的展示类组件,例如Blank、Circle组件,即使使用focusable属性也无法使其可获焦。

按照组件的获焦能力分为三类的表格展示,可以根据需要选择适合的组件类型来实现焦点控制功能。

接口:

focusable(value: boolean)

案例:

// xxx.ets
@Entry
@Component
struct FocusableExample {@State textFocusable: boolean = true;@State color1: Color = Color.Yellow;@State color2: Color = Color.Yellow;build() {Column({ space: 5 }) {Text('Default Text')    // 第一个Text组件未设置focusable属性,默认不可获焦.borderColor(this.color1).borderWidth(2).width(300).height(70).onFocus(() => {this.color1 = Color.Blue;}).onBlur(() => {this.color1 = Color.Yellow;})Divider()Text('focusable: ' + this.textFocusable)    // 第二个Text设置了focusable属性,初始值为true.borderColor(this.color2).borderWidth(2).width(300).height(70).focusable(this.textFocusable).onFocus(() => {this.color2 = Color.Blue;}).onBlur(() => {this.color2 = Color.Yellow;})Divider()Row() {Button('Button1').width(140).height(70)Button('Button2').width(160).height(70)}Divider()Button('Button3').width(300).height(70)Divider()}.width('100%').justifyContent(FlexAlign.Center).onKeyEvent((e) => {    // 绑定onKeyEvent,在该Column组件获焦时,按下'F'键,可将第二个Text的focusable置反if (e.keyCode === 2022 && e.type === KeyType.Down) {this.textFocusable = !this.textFocusable;}})}
}

在这里插入图片描述

🔎5.自定义默认焦点

接口:

defaultFocus(value: boolean)

案例:

// xxx.ets
import promptAction from '@ohos.promptAction';class MyDataSource implements IDataSource {private list: number[] = [];private listener: DataChangeListener;constructor(list: number[]) {this.list = list;}totalCount(): number {return this.list.length;}getData(index: number): any {return this.list[index];}registerDataChangeListener(listener: DataChangeListener): void {this.listener = listener;}unregisterDataChangeListener() {}
}@Entry
@Component
struct SwiperExample {private swiperController: SwiperController = new SwiperController()private data: MyDataSource = new MyDataSource([])aboutToAppear(): void {let list = []for (let i = 1; i <= 4; i++) {list.push(i.toString());}this.data = new MyDataSource(list);}build() {Column({ space: 5 }) {Swiper(this.swiperController) {LazyForEach(this.data, (item: string) => {Row({ space: 20 }) {Column() {Button('1').width(200).height(200).fontSize(40).backgroundColor('#dadbd9')}Column({ space: 20 }) {Row({ space: 20 }) {Button('2').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')Button('3').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')}Row({ space: 20 }) {Button('4').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')Button('5').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')}Row({ space: 20 }) {Button('6').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')Button('7').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')}}}.width(480).height(380).justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Gray).backgroundColor(Color.White)}, item => item)}.cachedCount(2).index(0).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onChange((index: number) => {console.info(index.toString());}).margin({ left: 20, top: 20, right: 20 })Row({ space: 40 }) {Button('←').fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Black).backgroundColor(Color.Transparent).onClick(() => {this.swiperController.showPrevious();})Button('→').fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Black).backgroundColor(Color.Transparent).onClick(() => {this.swiperController.showNext();})}.width(480).height(50).justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Gray).backgroundColor('#f7f6dc')Row({ space: 40 }) {Button('Cancel').fontSize(30).fontColor('#787878').type(ButtonType.Normal).width(140).height(50).backgroundColor('#dadbd9')Button('OK').fontSize(30).fontColor('#787878').type(ButtonType.Normal).width(140).height(50).backgroundColor('#dadbd9').onClick(() => {promptAction.showToast({ message: 'Button OK on clicked' });})}.width(480).height(80).justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Gray).backgroundColor('#dff2e4').margin({ left: 20, bottom: 20, right: 20 })}.backgroundColor('#f2f2f2').margin({ left: 50, top: 50, right: 20 })}
}

在这里插入图片描述

🔎6.自定义TAB键走焦顺序

Button('1').width(200).height(200).fontSize(40).backgroundColor('#dadbd9').tabIndex(1)    // Button-1设置为第一个tabIndex节点
Button('←').fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Black).backgroundColor(Color.Transparent).onClick(() => {this.swiperController.showPrevious();}).tabIndex(2)    // Button-左箭头设置为第二个tabIndex节点
Button('OK').fontSize(30).fontColor('#787878').type(ButtonType.Normal).width(140).height(50).backgroundColor('#dadbd9').onClick(() => {promptAction.showToast({ message: 'Button OK on clicked' });}).tabIndex(3)    // Button-OK设置为第三个tabIndex节点

🦋6.1 groupDefaultFocus

我们分别将某个组件设置为tabIndex节点,设置完之后,只有当我们按下TAB/ShiftTab键在这3个组件上进行焦点切换时,才会出现快速走焦的效果。

为了解决这个问题,我们可以给每个区域的容器设置tabIndex属性。然而,这样设置存在一个问题:当首次走焦到容器上时,焦点会默认落在容器内的第一个可获焦组件上,而不是我们想要的Button1、左箭头、ButtonOK。

为了解决这个问题,我们引入了一个名为groupDefaultFocus的通用属性,该属性接受一个布尔值参数,默认值为false。使用该属性需要与tabIndex属性结合使用,首先使用tabIndex为每个区域(容器)定义焦点切换顺序,然后为Button1、左箭头、ButtonOK这些组件绑定groupDefaultFocus(true)。这样,在首次走焦到目标区域(容器)时,拥有groupDefaultFocus(true)绑定的子组件将同时获取焦点。

// xxx.ets
import promptAction from '@ohos.promptAction';class MyDataSource implements IDataSource {private list: number[] = [];private listener: DataChangeListener;constructor(list: number[]) {this.list = list;}totalCount(): number {return this.list.length;}getData(index: number): any {return this.list[index];}registerDataChangeListener(listener: DataChangeListener): void {this.listener = listener;}unregisterDataChangeListener() {}
}@Entry
@Component
struct SwiperExample {private swiperController: SwiperController = new SwiperController()private data: MyDataSource = new MyDataSource([])aboutToAppear(): void {let list = []for (let i = 1; i <= 4; i++) {list.push(i.toString());}this.data = new MyDataSource(list);}build() {Column({ space: 5 }) {Swiper(this.swiperController) {LazyForEach(this.data, (item: string) => {Row({ space: 20 }) {    // 设置该Row组件为tabIndex的第一个节点Column() {Button('1').width(200).height(200).fontSize(40).backgroundColor('#dadbd9').groupDefaultFocus(true)    // 设置Button-1为第一个tabIndex的默认焦点}Column({ space: 20 }) {Row({ space: 20 }) {Button('2').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')Button('3').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')}Row({ space: 20 }) {Button('4').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')Button('5').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')}Row({ space: 20 }) {Button('6').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')Button('7').width(100).height(100).fontSize(40).type(ButtonType.Normal).borderRadius(20).backgroundColor('#dadbd9')}}}.width(480).height(380).justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Gray).backgroundColor(Color.White).tabIndex(1)}, item => item)}.cachedCount(2).index(0).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onChange((index: number) => {console.info(index.toString());}).margin({ left: 20, top: 20, right: 20 })Row({ space: 40 }) {    // 设置该Row组件为第二个tabIndex节点Button('←').fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Black).backgroundColor(Color.Transparent).onClick(() => {this.swiperController.showPrevious();}).groupDefaultFocus(true)    // 设置Button-左箭头为第二个tabIndex节点的默认焦点Button('→').fontSize(40).fontWeight(FontWeight.Bold).fontColor(Color.Black).backgroundColor(Color.Transparent).onClick(() => {this.swiperController.showNext();})}.width(480).height(50).justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Gray).backgroundColor('#f7f6dc').tabIndex(2)Row({ space: 40 }) {    // 设置该Row组件为第三个tabIndex节点Button('Cancel').fontSize(30).fontColor('#787878').type(ButtonType.Normal).width(140).height(50).backgroundColor('#dadbd9')Button('OK').fontSize(30).fontColor('#787878').type(ButtonType.Normal).width(140).height(50).backgroundColor('#dadbd9').defaultFocus(true).onClick(() => {promptAction.showToast({ message: 'Button OK on clicked' });}).groupDefaultFocus(true)    // 设置Button-OK为第三个tabIndex节点的默认焦点}.width(480).height(80).justifyContent(FlexAlign.Center).borderWidth(2).borderColor(Color.Gray).backgroundColor('#dff2e4').margin({ left: 20, bottom: 20, right: 20 }).tabIndex(3)}.backgroundColor('#f2f2f2').margin({ left: 50, top: 50, right: 20 })}
}

🦋6.2 focusOnTouch

接口:

focusOnTouch(value: boolean)

点击是指使用触屏或鼠标左键进行单击,默认为false的组件,例如Button,不绑定该API时,点击Button不会使其获焦,当给Button绑定focusOnTouch(true)时,点击Button会使Button立即获得焦点。

案例:

// requestFocus.ets
import promptAction from '@ohos.promptAction';@Entry
@Component
struct RequestFocusExample {@State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'N']build() {Column({ space:20 }){Button("id: " + this.idList[0] + " focusOnTouch(true) + focusable(false)").width(400).height(70).fontColor(Color.White).focusOnTouch(true).focusable(false)Button("id: " + this.idList[1] + " default").width(400).height(70).fontColor(Color.White)Button("id: " + this.idList[2] + " focusOnTouch(false)").width(400).height(70).fontColor(Color.White).focusOnTouch(false)Button("id: " + this.idList[3] + " focusOnTouch(true)").width(400).height(70).fontColor(Color.White).focusOnTouch(true)}.width('100%').margin({ top:20 })}
}

🦋6.3 focusControl.requestFocus

在任意执行语句中调用该API,指定目标组件的id为方法参数,当程序执行到该语句时,会立即给指定的目标组件申请焦点。

接口:

focusControl.requestFocus(id: string)

案例:

// requestFocus.ets
import promptAction from '@ohos.promptAction';@Entry
@Component
struct RequestFocusExample {@State idList: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'N']@State requestId: number = 0build() {Column({ space:20 }){Row({space: 5}) {Button("id: " + this.idList[0] + " focusable(false)").width(200).height(70).fontColor(Color.White).id(this.idList[0]).focusable(false)Button("id: " + this.idList[1]).width(200).height(70).fontColor(Color.White).id(this.idList[1])}Row({space: 5}) {Button("id: " + this.idList[2]).width(200).height(70).fontColor(Color.White).id(this.idList[2])Button("id: " + this.idList[3]).width(200).height(70).fontColor(Color.White).id(this.idList[3])}Row({space: 5}) {Button("id: " + this.idList[4]).width(200).height(70).fontColor(Color.White).id(this.idList[4])Button("id: " + this.idList[5]).width(200).height(70).fontColor(Color.White).id(this.idList[5])}}.width('100%').margin({ top:20 }).onKeyEvent((e) => {if (e.keyCode >= 2017 && e.keyCode <= 2022) {this.requestId = e.keyCode - 2017;} else if (e.keyCode === 2030) {this.requestId = 6;} else {return;}if (e.type !== KeyType.Down) {return;}let res = focusControl.requestFocus(this.idList[this.requestId]);if (res) {promptAction.showToast({message: 'Request success'});} else {promptAction.showToast({message: 'Request failed'});}})}
}

依次按下 TAB、A、B、C、D、E、F、N
在这里插入图片描述


🚀感谢:给读者的一封信

亲爱的读者,

我在这篇文章中投入了大量的心血和时间,希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验,我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助,我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担,但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章,是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命,也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作,请扫描下面二维码,您的支持将不胜感激。同时,如果您有任何反馈或建议,也欢迎与我分享。

在这里插入图片描述

再次感谢您的阅读和支持!

最诚挚的问候, “愚公搬代码”

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

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

相关文章

Flink电商实时数仓(三)

DIM层代码流程图 维度层的重点和难点在于实时电商数仓需要的维度信息一般是动态的变化的&#xff0c;并且由于实时数仓一般需要一直运行&#xff0c;无法使用常规的配置文件重启加载方式来修改需要读取的ODS层数据&#xff0c;因此需要通过Flink-cdc实时监控MySql中的维度数据…

相互独立的Gamma分布变量之和的分布

两个变量之和的情况 设随机变量相互独立&#xff0c;并且服从参数为的分布&#xff0c;记作&#xff1b;服从参数为的分布&#xff0c;记作&#xff0c;和的概率密度分别为&#xff1a; 其中 其中 那么随机变量服从参数为的分布&#xff0c;记作。 推广到n个变量之和的情况 …

云原生消息流系统 Apache Pulsar 在腾讯云的大规模生产实践

导语 由 InfoQ 主办的 Qcon 全球软件开发者大会北京站上周已精彩落幕&#xff0c;腾讯云中间件团队的冉小龙参与了《云原生机构设计与音视频技术应用》专题&#xff0c;带来了以《云原生消息流系统 Apache Pulsar 在腾讯云的大规模生产实践》为主题的精彩演讲&#xff0c;在本…

进阶之路:高级Spring整合技术解析

Spring整合 1.1 Spring整合Mybatis思路分析1.1.1 环境准备步骤1:准备数据库表步骤2:创建项目导入jar包步骤3:根据表创建模型类步骤4:创建Dao接口步骤5:创建Service接口和实现类步骤6:添加jdbc.properties文件步骤7:添加Mybatis核心配置文件步骤8:编写应用程序步骤9:运行程序 1.…

挑选知识付费平台不再迷茫:掌握这些技巧,轻松找到适合自己的平台!

明理信息科技知识付费平台 在当今的知识付费市场中&#xff0c;用户面临的选择越来越多&#xff0c;如何从众多知识付费平台中正确选择属于自己的平台呢&#xff1f;下面&#xff0c;我们将为您介绍明理信息科技知识付费平台相比同行的优势&#xff0c;帮助您做出明智的选择。…

Dubbo面试题及答案,持续更新

在准备Dubbo相关的面试题时&#xff0c;我发现网络上的资源往往缺乏深度和全面性。为了帮助广大Java程序员更好地准备面试&#xff0c;我花费了大量时间进行研究和整理&#xff0c;形成了这套Dubbo面试题大全。 这套题库不仅包含了一系列经典的Dubbo面试题及其详尽答案&#x…

雅思考试笔试还是机试,哪个更好,为什么?

想要参加或者即将参加雅思考试的同学们&#xff0c;你们知道雅思笔试和机试的有哪些相似点和不同点吗&#xff1f;下面由E趣少儿英语&#xff08;LUEnglish&#xff09;为您具体分析。 雅思纸笔考试与雅思机考&#xff1a;两者之间的相似之处 两个版本的雅思考试&#xff08;…

concat_ws()和college_list()配合=>实现多行转一行

concat_ws()&#xff1a; concat_ws()是“with separator”的缩写&#xff0c;它是一个用于连接字符串的函数。ws代表“with separator”&#xff0c;即带有分隔符。这个函数的作用是将多个字符串连接起来&#xff0c;并在它们之间插入指定的分隔符。语法&#xff1a;concat_ws…

2023 英特尔On技术创新大会直播 | 边云协同加速 AI 解决方案商业化落地

目录 前言边云协同时代背景边缘人工智能边缘挑战英特尔边云协同的创新成果最后 前言 最近观看了英特尔On技术创新大会直播&#xff0c;学到了挺多知识&#xff0c;其中对英特尔高级首席 AI 工程张宇博士讲解的边云协同加速 AI 解决方案商业化落地特别感兴趣。张宇博士讲解了英…

开源堡垒机JumpServer结合内网穿透实现远程访问

开源堡垒机JumpServer结合内网穿透实现远程访问 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机&#xff0c;是符合 …

网络安全:网络安全的技术趋势与发展

1.背景介绍 网络安全是现代信息化时代的重要问题之一&#xff0c;它涉及到计算机网络的安全性、数据的完整性、隐私保护等方面。随着互联网的不断发展&#xff0c;网络安全问题也日益复杂化。本文将从多个方面进行探讨&#xff0c;以帮助读者更好地理解网络安全的技术趋势与发…

spring依赖注入对象类型属性----外部bean的引入(bean和bean之间的引入)

文章目录 注入普通属性的方式1、set方法注入2、构造器&#xff08;构造方法&#xff09;注入 总结&#xff1a;注入对象类型属性 注入普通属性的方式 1、set方法注入 2、构造器&#xff08;构造方法&#xff09;注入 总结&#xff1a; set方法注入和构造器方法的注入&#…

Ansible自动化工具之Playbook剧本编写

目录 Playbook的组成部分 实例模版 切换用户 指定声明用户 声明和引用变量&#xff0c;以及外部传参变量 playbook的条件判断 ​编辑 习题 ​编辑 ansible-playbook的循环 item的循环 ​编辑 list循环 ​编辑 together的循环&#xff08;列表对应的列&#xff0…

【蓝桥杯一对一保奖辅导】国奖学姐蓝桥杯经验分享

目录 写在前面有关报名费如何准备&#xff1f;看书 /练习 /分类 /总结比赛技巧与指导 写在前面 蓝桥杯对于计算机专业相关的同学来说是非常值得参加的。 蓝桥杯相对于ACM比赛而言获奖难度较小&#xff0c;只要掌握技巧&#xff0c;拿到 省一甚至国奖是比较容易的&#xff0c;但…

Qt前端技术:3.QSS字体样式

small-caps就是让这个文本中的小写字母用大写的形式写出来并且在用大写的形式表达出来后他本身的大小会变小 有绝对尺寸和相对尺寸的区别 绝对尺寸一般是cm&#xff0c;英寸之类的 相对尺寸如px之类的是由显示器的屏幕分辨率来决定的 如windows用户分辨率一般是96像素点每英…

网络安全事件频发现状

近日&#xff0c;腾讯视频、菜鸟、滴滴等App崩溃的消息登上热搜&#xff0c;引发不少网友热议。今年以来&#xff0c;已有多起App崩溃事件发生&#xff0c;甚至有企业因此业绩损失超亿元。互联网应用的系统安全和稳定性建设越来越被社会广泛关注。 12月3日晚&#xff0c;有网友…

【力扣100】543.二叉树的直径

添加链接描述 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def __init__(self):self.max 0def diamete…

uniapp整合echarts(目前性能最优、渲染最快方案)

本文echarts示例如上图,可扫码体验渲染速度及loading效果,下文附带本小程序uniapp相关代码 实现代码 <template><view class="source

【python】在线代码混淆方案及注意事项

▒ 目录 ▒ &#x1f6eb; 导读开发环境 1️⃣ 在线网站pyob混淆操作步骤编写测试代码混淆转pyc缺点中文路径问题&#xff1a;python: Cant reopen .pyc file 2️⃣ 反编译python文件格式对比uncompyle6 3️⃣ 其它方案cpythonpython-obfuscatorPyInstaller【不推荐】pyminifie…

数字人解决方案——ER-NeRF实时对话数字人模型推理部署带UI交互界面

简介 这个是一个使用ER-NeRF来实现实时对话数字人、口播数字人的整体架构&#xff0c;其中包括了大语言回答模型、语音合成、成生视频流、背景替换等功能&#xff0c;项目对显存的要求很高&#xff0c;想要达到实时推理的效果&#xff0c;建议显存在24G以上。 实时对话数字人 …