【HarmonyOS4.0】第八篇-ArkUI系统组件(三)

2024-02-04 07:10

本文主要是介绍【HarmonyOS4.0】第八篇-ArkUI系统组件(三),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

【HarmonyOS4.0】第七篇-ArkUI系统组件(三)

七、二维码组件

二维码的使用场景,比如扫码添加好友,扫码骑车,扫码支付等等,ArkUI开发框架提供了 RQCode 组件生成一个二维码。

接口:

QRCode(value: string)

参数:

参数名参数类型必填参数描述
valuestring二维码内容字符串。最大支持256个字符,若超出,则截取前256个字符。说明:该字符串内容确保有效,不支持null、undefined以及空内容。

属性

除支持通用属性外,还支持以下属性。

名称参数类型描述
colorResourceColor设置二维码颜色。默认值:Color.Black从API version 9开始,该接口支持在ArkTS卡片中使用。
backgroundColorResourceColor设置二维码背景颜色。默认值:Color.White从API version 9开始,该接口支持在ArkTS卡片中使用。

案例如下:

@Entry
@Component
struct QRCodePage {@State value: string = "念去去,千里烟波暮霭程程楚天阔";build() {Column({space:5}){Text("不带颜色").fontSize(25).width("90%").fontColor("#696969").fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)QRCode(this.value).width(200).height(200)Text("设置二维码颜色").fontSize(25).width("90%").fontColor("#696969").fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)QRCode(this.value).width(200).height(200).color("#F08080")Text("设置二维码颜色和背景颜色").fontSize(25).width("90%").fontColor("#696969").fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)QRCode(this.value).width(200).height(200).color("#F08080").backgroundColor("#D3D3D3")}.width("100%").margin({top:10})}
}

设置后如下:

img

八、开关组件

ArkUI开发框架 Toggle组件提供勾选框样式、状态按钮样式及开关样式。

子组件:仅当ToggleType为Button时可包含子组件。

8.1.Toggle定义

接口

Toggle(options: { type: ToggleType, isOn?: boolean })

参数:

参数名参数类型必填参数描述
typeToggleType开关的样式。
isOnboolean开关是否打开,true:打开,false:关闭。默认值:false

ToggleType枚举说明,从API version 9开始,该接口支持在ArkTS卡片中使用。

名称描述
Checkbox提供单选框样式。说明:通用属性margin的默认值为:{top: 12 vp,right: 12 vp,bottom: 12 vp,left: 12 vp}
Button提供状态按钮样式,如果子组件有文本设置,则相应的文本内容会显示在按钮内部。
Switch提供开关样式。说明:通用属性margin的默认值为:{top: 14 vp,right: 6 vp,bottom: 6 vp,left: 14 vp}

按钮样式案例如下:

@Entry
@Component
struct TogglePage {build() {Column({space:20}){Row(){Text("开关样式:").fontWeight(FontWeight.Bold).fontSize(25)Toggle({type:ToggleType.Switch}).width(30)}.width("100%").justifyContent(FlexAlign.Center)Row(){Text("单选框样式:").fontWeight(FontWeight.Bold).fontSize(25)Toggle({type:ToggleType.Checkbox}).width(30)}.width("100%").justifyContent(FlexAlign.Center)//按钮样式Row(){Toggle({type:ToggleType.Button}){Text("注册").fontSize(30)}.width("80%").height(50)}.width("100%").justifyContent(FlexAlign.Center)}.width("100%").padding({top:20})}
}

执行后如下:

img

8.2.Toggle属性介绍

除支持通用属性外,还支持以下属性:

名称参数参数描述
selectedColorResourceColor设置组件打开状态的背景颜色。从API version 9开始,该接口支持在ArkTS卡片中使用。
switchPointColorResourceColor设置Switch类型的圆形滑块颜色。说明:仅对type为ToggleType.Switch生效。从API version 9开始,该接口支持在ArkTS卡片中使用。

修改之前的代码,设置按钮的颜色如下:

@Entry
@Component
struct TogglePage {build() {Column({space:20}){Row(){Text("开关样式:").fontWeight(FontWeight.Bold).fontSize(25)Toggle({type:ToggleType.Switch}).selectedColor("#6495ED") //设置组件打开状态的背景颜色为蓝色.switchPointColor("#A9A9A9") //设置type是Switch的圆形滑块颜色为灰色}.width("100%").justifyContent(FlexAlign.Center)Row(){Text("单选框样式:").fontWeight(FontWeight.Bold).fontSize(25)Toggle({type:ToggleType.Checkbox}).width(30).selectedColor("#6495ED") //设置组件打开状态的背景颜色为蓝色.switchPointColor("#A9A9A9") //设置type是Switch的圆形滑块颜色为灰色}.width("100%").justifyContent(FlexAlign.Center)//按钮样式Row(){Toggle({type:ToggleType.Button}){Text("注册").fontSize(30)}.width("80%").height(50).selectedColor("#6495ED") //设置组件打开状态的背景颜色为蓝色.switchPointColor("#A9A9A9") //设置type是Switch的圆形滑块颜色为灰色}.width("100%").justifyContent(FlexAlign.Center)}.width("100%").padding({top:20})}
}

执行后如下:

img

8.3.Toggle事件介绍

除支持通用事件外,还支持以下事件:

名称功能描述
onChange(callback: (isOn: boolean) => void)开关状态切换时触发该事件。从API version 9开始,该接口支持在ArkTS卡片中使用。说明:isOn为true时,代表状态从关切换为开。isOn为false时,代表状态从开切换为关。

案例如下:

@Entry
@Component
struct TogglePage {build() {Column({space: 20}) {Row(){Toggle({type: ToggleType.Switch}).size({width: 40, height:40})Toggle({type:ToggleType.Switch}).selectedColor('#007DFF').switchPointColor('#FFFFFF').onChange((isOn:boolean)=>{//修改开关状态console.log(`开关状态为:${isOn}`)}).size({width: 40, height:40})}.width("100%").padding({top:20}).justifyContent(FlexAlign.Center)Row(){Toggle({type: ToggleType.Checkbox}).size({width: 40, height:40})Toggle({type:ToggleType.Checkbox}).selectedColor('#007DFF').switchPointColor('#FFFFFF').onChange((isOn:boolean)=>{//修改开关状态console.log(`开关状态为:${isOn}`)}).size({width: 40, height:40})}.width("100%").padding({top:20}).justifyContent(FlexAlign.Center)Row(){Toggle({type: ToggleType.Button}){Text("按钮样式").fontSize(20)}.size({width: 140, height: 40})Toggle({type: ToggleType.Button}){Text("按钮样式").fontSize(20)}.size({width: 140, height: 40}).selectedColor('#007DFF').switchPointColor('#FFFFFF').onChange((isOn:boolean)=>{//修改开关状态console.log(`开关状态为:${isOn}`)})}.width("100%").padding(20).justifyContent(FlexAlign.Center)}.width("100%").padding({ top: 20 })}
}

预览后效果如下:

img

九、提示框组件

ArkUI开发框架提供了@ohos.promptAction (弹窗),可以创建并显示文本提示框、对话框和操作菜单。

9.1.@ohos.promptAction (弹窗)定义

①.导入模块:

import promptAction from '@ohos.promptAction'

②.promptAction.showToast,接口说明:

showToast(options: ShowToastOptions): void

③.参数:

参数名类型必填说明
optionsShowToastOptions文本弹窗选项。

ShowToastOptions选项说明

名称类型必填说明
messagestring| Resource9+显示的文本信息。默认字体为’Harmony Sans’,不支持设置其他字体。
durationnumber默认值1500ms,取值区间:1500ms-10000ms。若小于1500ms则取默认值,若大于10000ms则取上限值10000ms。
bottomstring| number设置弹窗边框距离屏幕底部的位置。

④.错误码:以下错误码的详细介绍请参见ohos.promptAction(弹窗)错误码。

错误码ID错误信息
100001if UI execution context not found.

简答案例如下:

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct PromptActionPage01 {build() {Column() {Button("点击出现弹窗").size({width:150, height:50}).type(ButtonType.Normal).borderRadius(12).onClick(()=>{try {promptAction.showToast({message: '注册成功', //显示的文本信息。默认字体为'Harmony Sans',不支持设置其他字体。duration: 2000,    //弹出显示时间,默认值1500ms。});} catch (error) {console.error(`showToast args error code is ${error.code}, message is ${error.message}`);};})}.width("100%").margin({top:40})}
}

预览显示如下:

img

9.2.promptAction.showDialog

①.创建并显示对话框,对话框响应结果异步返回。接口如下:

showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void

②.参数:

参数名类型必填说明
optionsShowDialogOptions页面显示对话框信息描述。
callbackAsyncCallback对话框响应结果回调。

ShowDialogOptions对话框的选项说明

名称类型必填说明
titlestring| Resource9+标题文本。
messagestring| Resource9+内容文本。
buttons[Button,Button?,Button?]对话框中按钮的数组,结构为:{text:‘button’, color: ‘#666666’},支持1-3个按钮。其中第一个为positiveButton;第二个为negativeButton;第三个为neutralButton。

③.ShowDialogSuccessResponse对话框的响应结果。

名称类型必填说明
indexnumber选中按钮在buttons数组中的索引。

案例如下:

import promptAction from '@ohos.promptAction'; // 导入弹窗组件@Entry // 入口标记
@Component // 组件标记
struct ShowDialogPage { // 定义名为 ShowDialogPage 的组件build() { // 构建方法Column() { // 列布局Button("点击出现弹窗") // 按钮文本.size({width:150, height:50}) // 按钮尺寸.type(ButtonType.Normal) // 按钮类型为普通.borderRadius(12) // 按钮边框圆角半径.onClick(()=>{ // 点击事件处理函数try { // 尝试执行以下代码promptAction.showDialog({ // 调用弹窗组件的showDialog方法title: "是否现在开始答题?", // 弹窗标题文本message: "答题时间100分钟,一旦开始不能关闭", // 弹窗内容文本buttons: [ // 弹窗中的按钮数组{text: "同意", color:"#000000"}, // 同意按钮,文本为“同意”,颜色为黑色{text: "不同意", color:"#000000"} // 不同意按钮,文本为“不同意”,颜色为黑色],}).then(data=>{ // showDialog方法返回Promise对象,处理成功时执行的回调函数//输出点击的按钮索引,从0开始console.info(`showDialog success, click button: ${data.index}`) // 打印弹窗点击按钮的索引}).catch(err=>{ // 处理失败时执行的回调函数console.info(`showDialog error: ${err}`) // 打印错误信息})} catch (error) { // 捕获try代码块中的错误console.error(`showDialog args error code is ${error.code}, message is ${error.message}`); // 打印错误信息};})}.width("100%") // 设置列布局宽度为100%.margin({top:40}) // 设置列布局上边距为40}
}

预览后效果如下:

img

9.3.promptAction.showActionMenu

①.创建并显示操作菜单,菜单响应结果异步返回。接口:

showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenuSuccessResponse>):void

②.参数:

参数名类型必填说明
optionsActionMenuOptions操作菜单选项。
callbackAsyncCallback菜单响应结果回调。

options操作菜单的选项:

名称类型必填说明
titlestring| Resource9+标题文本。
buttons[Button,Button?,Button?,Button?,Button?,Button?]菜单中菜单项按钮的数组,结构为:{text:‘button’, color: ‘#666666’},支持1-6个按钮。大于6个按钮时弹窗不显示。

上面Button:菜单中的菜单项按钮的构成:

名称类型必填说明
textstring| Resource9+按钮文本内容。
colorstring| Resource9+按钮文本颜色。

③.返回值:

ActionMenuSuccessResponse类型,操作菜单的响应结果。

名称类型必填说明
indexnumber选中按钮在buttons数组中的索引,从0开始。

案例如下:

import promptAction from '@ohos.promptAction'
@Entry
@Component
struct ShowActionMenuPage {build() {Column() { // 列布局Button("点击出现弹窗") // 按钮文本.size({width:150, height:50}) // 按钮尺寸.type(ButtonType.Normal) // 按钮类型为普通.borderRadius(12) // 按钮边框圆角半径.onClick(()=>{ // 点击事件处理函数try { // 尝试执行以下代码promptAction.showActionMenu({ // 调用弹窗组件的showDialog方法title: "退休年份", // 弹窗标题文本buttons: [ // 弹窗中的按钮数组,每一个是一个选项{text: "2050", color:"#000000"},{text: "2060", color:"#000000"},{text: "2070", color:"#000000"}],}).then(data=>{ // showDialog方法返回Promise对象,处理成功时执行的回调函数//输出点击的按钮索引,从0开始console.info(`showActionMenu success, click button: ${data.index}`) // 打印弹窗点击按钮的索引}).catch(err=>{ // 处理失败时执行的回调函数console.info(`showActionMenu error: ${err}`) // 打印错误信息})} catch (error) { // 捕获try代码块中的错误console.error(`showActionMenu args error code is ${error.code}, message is ${error.message}`); // 打印错误信息};})}.width("100%") // 设置列布局宽度为100%.margin({top:40}) // 设置列布局上边距为40}
}

执行后效果如下:

img

选择菜单后,上面的代码会打印出,选择的索引ID,如下:

img

十、滑动条组件

项目开发中可能会有设置设备音量大小,调节屏幕亮度等需求,实现类似需求一般都会使用到滑动条,ArkUI开发框架提供了滑动组件 Slider 来实现这些功能。

10.1.Slider定义介绍

接口:

Slider(options?:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

参数:

参数名参数类型必填参数描述
valuenumber当前进度值。默认值:0
minnumber设置最小值。默认值:0
maxnumber设置最大值。默认值:100
stepnumber设置滑动条滑动步长。默认值:1
styleSliderStyle设置滑动条的滑块样式。默认值:SliderStyle.OutSet
direction8+Axis设置滑动条滑动方向为水平或竖直方向。默认值:Axis.Horizontal
reverse8+boolean设置滑动条取值范围是否反向。说明:设置为false时,水平方向滑动条为从左向右滑动,竖直方向滑动条从上向下滑动,设置为true时,水平方向滑动条为从右向左滑动,竖直方向滑动条从下向上滑动。默认值:false

style滑块样式SliderStyle枚举说明

名称描述
OutSet滑块在滑轨上。
InSet滑块在滑轨内。

案例演示如下:

@Entry
@Component
struct SliderPage {build() {Column({space:10}){Slider({value: 20,                             //当前的进度值min:0,                                 //设置最小值max:100,                               //设置最大值step:1,                                //设置滑动条滑动步长style: SliderStyle.InSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内direction: Axis.Horizontal,            //设置滑动条为水平方法reverse:false                          //设置滑动条取值范围是否反向,false正向滑动}).width(260).height(60).backgroundColor("#F5F5DC")Slider({value: 20,                             //当前的进度值min:0,                                 //设置最小值max:100,                               //设置最大值step:1,                                //设置滑动条滑动步长style: SliderStyle.OutSet,             //设置滑动条的滑动样式 OutSet滑块在滑轨外direction: Axis.Horizontal,            //设置滑动条为水平方法reverse:false                          //设置滑动条取值范围是否反向,false正向滑动}).width(260).height(60).backgroundColor("#F5F5DC")}.width("100%").height("100%").margin({top:20})}
}

预览效果如下:

img

10.2.属性

滑动场景属性如下:

名称参数类型描述
blockColorResourceColor设置滑块的颜色。
trackColorResourceColor设置滑轨的背景颜色。
selectedColorResourceColor设置滑轨的已滑动颜色。
showStepsboolean设置当前是否显示步长刻度值。默认值:false
showTipsboolean设置滑动时是否显示气泡提示百分比。默认值:false
trackThicknessLength设置滑轨的粗细。
maxLabel(已废弃)string设置最大标签。
minLabel(已废弃)string设置最小标签。

案例1:设置滑块的颜色、设置滑轨的背景颜色、设置滑轨的已滑动颜色。

@Entry
@Component
struct SliderPage {build() {Column({space:10}){Slider({value: 20,                             //当前的进度值min:0,                                 //设置最小值max:100,                               //设置最大值step:1,                                //设置滑动条滑动步长style: SliderStyle.InSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内direction: Axis.Horizontal,            //设置滑动条为水平方法reverse:false                          //设置滑动条取值范围是否反向,false正向滑动}).width(260).height(60).backgroundColor("#F5F5DC")Slider({value: 20,                             //当前的进度值min:0,                                 //设置最小值max:100,                               //设置最大值step:1,                                //设置滑动条滑动步长style: SliderStyle.OutSet,             //设置滑动条的滑动样式 OutSet滑块在滑轨外direction: Axis.Horizontal,            //设置滑动条为水平方法reverse:false                          //设置滑动条取值范围是否反向,false正向滑动}).width(260).height(60).backgroundColor("#F5F5DC").blockColor(Color.Red)         //设置滑动颜色.trackColor(Color.Pink)        //设置滑轨颜色.selectedColor(Color.Green)      //设置滑动的已滑动颜色}.width("100%").height("100%").margin({top:20})}
}

预览效果如下:

img

案例2::设置当前显示步长刻度值、设置滑动时是否显示气泡提示百分比、设置滑动条粗细。

@Entry
@Component
struct SliderPage {build() {Column({space:10}){Slider({value: 20,                             //当前的进度值min:0,                                 //设置最小值max:100,                               //设置最大值step:1,                                //设置滑动条滑动步长style: SliderStyle.InSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内direction: Axis.Horizontal,            //设置滑动条为水平方法reverse:false                          //设置滑动条取值范围是否反向,false正向滑动}).width(260).height(60).backgroundColor("#F5F5DC")Slider({value: 20,                             //当前的进度值min:0,                                 //设置最小值max:100,                               //设置最大值step:10,                                //设置滑动条滑动步长style: SliderStyle.OutSet,             //设置滑动条的滑动样式 OutSet滑块在滑轨外direction: Axis.Horizontal,            //设置滑动条为水平方法reverse:false                          //设置滑动条取值范围是否反向,false正向滑动}).width(260).height(60).backgroundColor("#F5F5DC").blockColor(Color.Red)         //设置滑动颜色.trackColor(Color.Pink)        //设置滑轨颜色.selectedColor(Color.Green)    //设置滑动的已滑动颜色.showSteps(true)               //设置显示步长 可以修改上面的步长后在看效果.showTips(true)                //设置显示进度.trackThickness(8)             //设置滚动条的宽度}.width("100%").height("100%").margin({top:20})}
}

预览效果如下:设置了步长为10,显示步长

img

10.3.事件

通用事件仅支持:OnAppear,OnDisAppear。

名称功能描述
onChange(callback: (value: number, mode: SliderChangeMode) => void)Slider滑动时触发事件回调。value:当前进度值。mode:拖动状态。

SliderChangeMode枚举值为:

名称描述
Begin0用户开始拖动滑块。
Moving1用户拖动滑块中。
End2用户结束拖动滑块。
Click3用户点击滑动条使滑块位置移动。

案例演示随着滚动条的拖动,修改图片显示的宽度,如下:

@Entry
@Component
struct SliderPage {@State imageWidth:number = 100build() {Column({space:10}){Row(){Image($r('app.media.Snip')).width(this.imageWidth)}.height(300)Row(){Slider({value: 100,                             //当前的进度值min:100,                                 //设置最小值max:300,                               //设置最大值step:1,                                //设置滑动条滑动步长style: SliderStyle.OutSet,              //设置滑动条的滑动样式  InSet滑块在滑轨内direction: Axis.Horizontal,            //设置滑动条为水平方法reverse:false                          //设置滑动条取值范围是否反向,false正向滑动}).height(60).showSteps(true)      //显示步长.showTips(true)       //显示进度.trackThickness(5)    //设置滚动条宽度.backgroundColor("#A9A9A9").onChange((value:number)=>{this.imageWidth = value})}}.width("100%").height("100%").margin({top:20})}
}

执行后如下:

img

十一、评分条组件

项目开发中可能会有设置评分的需求,比如给用户一个弹窗,让用户给当前 APP 设置评分等场景,ArkUI开发框架提供了评分条组件 Rating 来实现这个功能。

11.1.Rating定义

提供在给定范围内选择评分的组件。接口如下:

Rating(options?: { rating: number, indicator?: boolean })

参数:

参数名参数类型必填参数描述
ratingnumber设置并接收评分值。默认值:0取值范围: [0, stars]小于0取0,大于stars取最大值stars。
indicatorboolean设置评分组件作为指示器使用,不可改变评分。默认值:false, 可进行评分说明:indicator=true时,默认组件高度height=12.0vp,组件width=height * stars。indicator=false时,默认组件高度height=28.0vp,组件width=height * stars。

案例如下:

@Entry
@Component
struct RatingPage {build() {Column(){Rating({rating:0, indicator: true}  //设置不可操作,默认值为0).width(200).height(60)Rating({rating:0, indicator: false}  //设置可操作,默认值为0).width(200).height(60)}.width("100%").height("100%").padding(10)}
}

预览效果如下:

img

11.2.属性

名称参数类型描述
starsnumber设置评分总数。默认值:5从API version 9开始,该接口支持在ArkTS卡片中使用。说明:设置为小于0的值时,按默认值显示。
stepSizenumber操作评级的步长。默认值:0.5从API version 9开始,该接口支持在ArkTS卡片中使用。说明:设置为小于0.1的值时,按默认值显示。取值范围为[0.1, stars]。
starStyle{backgroundUri: string,foregroundUri: string,secondaryUri?: string}backgroundUri:未选中的星级的图片链接,可由用户自定义或使用系统默认图片。foregroundUri:选中的星级的图片路径,可由用户自定义或使用系统默认图片。secondaryUri:部分选中的星级的图片路径,可由用户自定义或使用系统默认图片。从API version 9开始,该接口支持在ArkTS卡片中使用。说明:startStyle属性所支持的图片类型能力参考Image组件。支持加载本地图片和网络图片,暂不支持PixelMap类型和Resource资源。默认图片加载方式为异步,暂不支持同步加载。设置值为undefined或者空字符串时,rating会选择加载系统默认星型图源。

说明

  • rating宽高为[width, height]时,单个图片的绘制区域为[width / stars, height]。
  • 为了指定绘制区域为方形,建议自定义宽高时采取[height * stars, height], width = height * stars的方式。

案例如下:

@Entry
@Component
struct RatingPage {build() {Column(){Rating({rating:2, indicator: true}  //设置不可操作,设置默认值为2,打开就有两个星星).width(200).height(60)Rating({rating:0, indicator: false}  //设置可操作,默认值为0).width(200).height(60).stars(8)              //设置总共有10颗星星.stepSize(0.5)          //设置步长为0.5}.width("100%").height("100%").padding(10)}
}

预览效果如下:

img

11.3.Rating事件介绍

事件说明:

名称功能描述
onChange(callback:(value: number) => void)操作评分条的评星发生改变时触发该回调。从API version 9开始,该接口支持在ArkTS卡片中使用。

案例说明如下:

@Entry
@Component
struct RatingPage {@State rating:number = 1build() {Column(){Rating({rating:this.rating, //设置默认值indicator: false    //设置可以操作打分}).width(220).height(50).stars(10)          //10颗星星.stepSize(0.5)      //设置步长0.5.onChange((value:number)=>{//修改总分数this.rating = value})Text(`评分数:${this.rating}`).fontSize(25).width("90%").textAlign(TextAlign.Center)}.width("100%").height("100%").padding(10)}
}

预览效果如下:

img

这篇关于【HarmonyOS4.0】第八篇-ArkUI系统组件(三)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/676703

相关文章

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Linux系统之主机网络配置方式

《Linux系统之主机网络配置方式》:本文主要介绍Linux系统之主机网络配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、查看主机的网络参数1、查看主机名2、查看IP地址3、查看网关4、查看DNS二、配置网卡1、修改网卡配置文件2、nmcli工具【通用

Linux系统之dns域名解析全过程

《Linux系统之dns域名解析全过程》:本文主要介绍Linux系统之dns域名解析全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、dns域名解析介绍1、DNS核心概念1.1 区域 zone1.2 记录 record二、DNS服务的配置1、正向解析的配置

Linux系统中配置静态IP地址的详细步骤

《Linux系统中配置静态IP地址的详细步骤》本文详细介绍了在Linux系统中配置静态IP地址的五个步骤,包括打开终端、编辑网络配置文件、配置IP地址、保存并重启网络服务,这对于系统管理员和新手都极具... 目录步骤一:打开终端步骤二:编辑网络配置文件步骤三:配置静态IP地址步骤四:保存并关闭文件步骤五:重

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

Windows系统下如何查找JDK的安装路径

《Windows系统下如何查找JDK的安装路径》:本文主要介绍Windows系统下如何查找JDK的安装路径,文中介绍了三种方法,分别是通过命令行检查、使用verbose选项查找jre目录、以及查看... 目录一、确认是否安装了JDK二、查找路径三、另外一种方式如果很久之前安装了JDK,或者在别人的电脑上,想

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

Linux系统之authconfig命令的使用解读

《Linux系统之authconfig命令的使用解读》authconfig是一个用于配置Linux系统身份验证和账户管理设置的命令行工具,主要用于RedHat系列的Linux发行版,它提供了一系列选项... 目录linux authconfig命令的使用基本语法常用选项示例总结Linux authconfi