網(wǎng)站數(shù)據(jù)沒(méi)有更新,網(wǎng)站 png逐行交錯(cuò),怎么優(yōu)化關(guān)鍵詞,怎樣做網(wǎng)站文件驗(yàn)證常用組件 文本組件#xff08;Text#xff09; Text是顯示文本的基礎(chǔ)組件之一 Text定義介紹 interface TextInterface{(content?: string | Resource):TextAttributes; }content#xff1a;要顯示的文本內(nèi)容#xff0c;一個(gè)簡(jiǎn)單的例子如下#xff1a; Text(Hello#xf…常用組件文本組件TextText是顯示文本的基礎(chǔ)組件之一Text定義介紹interface TextInterface{ (content?: string | Resource):TextAttributes; }content要顯示的文本內(nèi)容一個(gè)簡(jiǎn)單的例子如下Text(HelloOpenHarmony) Text(HelloOpenHarmony) .width(100%) .textAlign(TextAlign.Start) Text(HelloOpenHarmonyHelloOpenHarmonyHelloOpenHarmonyHelloOpenHarmony) .maxLines(1) .textOverflow({overflow: TextOverflow.Ellipsis})Text屬性介紹textAlign設(shè)置文本的對(duì)其方式對(duì)齊參考系是 Text 組件本身只有 Text 組件本身的寬度大于文本內(nèi)容長(zhǎng)度 textAlign 屬性才起作用 TextAlign 定義了以下 3 種類(lèi)型Start根據(jù)文字書(shū)寫(xiě)相同的方向?qū)R比如中文從左往右排版那么文本則靠左對(duì)齊。Center默認(rèn)值文本居中對(duì)齊。End根據(jù)文字書(shū)寫(xiě)相反的方向?qū)R比如中文從左往右排版那么文本則靠右對(duì)齊。簡(jiǎn)單樣例如下所示Text(Hello, OpenHarmony) .backgroundColor(#aabbcc) .textAlign(TextAlign.Center) // 寬度等于文本內(nèi)容長(zhǎng)度textAlign不起作用 Text(Hello, OpenHarmony) .backgroundColor(#ccaabb) .margin({top: 2}) .width(200) // 寬度大于文本內(nèi)容長(zhǎng)度textAlign起作用 .textAlign(TextAlign.End) Text(Hello, OpenHarmony) .backgroundColor(#bbccaa) .margin({top: 2}) .width(100%) // 寬度大于文本內(nèi)容長(zhǎng)度textAlign起作用 .textAlign(TextAlign.Center)樣例運(yùn)行結(jié)果如下圖所示maxLines、textOverflow設(shè)置文本顯示的最大行數(shù)和截取方式默認(rèn)折行顯示不截取如果設(shè)置了此參數(shù)則文本最多顯示到指定的行如果有多余的文本可以通過(guò) textOverflow 來(lái)指定截取方式本樣例的截?cái)喾绞绞?Ellipsis 它將截?cái)嗪蟮奈谋居?“…” 表示。Text(Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony) Text(Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony, Hello, OpenHarmony) .margin({top: 5}) .maxLines(1) .textOverflow({overflow: TextOverflow.Ellipsis})樣例運(yùn)行結(jié)果如下圖所示fontSize、fontColor、fontStyle、 fontWeight分別表示設(shè)置文字的大小顏色樣式以及粗細(xì)我們可以組合起來(lái)設(shè)置文本的富樣式先看一個(gè)樣例Text(Hello, OpenHarmony) Text(Hello, OpenHarmony) .fontSize(20) .fontColor(#ff0000) .fontWeight(FontWeight.Bold) .fontStyle(FontStyle.Italic) .decoration({type: TextDecorationType.Underline, color: Color.Black}) // 文本裝飾線樣例運(yùn)行結(jié)果如下圖所示官方更多全面的案例如下案例1textAligntextOverflowmaxLineslineHeight使用示例。https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text#示例2設(shè)置文本樣式案例2decorationbaselineOffsetletterSpacingtextCase使用示例https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text#示例2設(shè)置文本樣式按鈕組件ButtonButton 組件也是基礎(chǔ)組件之一和其它基礎(chǔ)組件不同的是 Button 組件允許添加一個(gè)子組件來(lái)實(shí)現(xiàn)不同的展示樣式。Button(test) Button(test) .backgroundColor(Color.Pink)樣例運(yùn)行結(jié)果如下圖所示type設(shè)置 Button 按鈕的顯示樣式 ButtonType 定義了以下3種樣式Capsule默認(rèn)值膠囊類(lèi)型圓角值為 Button 高度的一半并且不允許修改此時(shí)通過(guò)設(shè)置 borderRadius() 的方式設(shè)置圓角則無(wú)效。簡(jiǎn)單樣例如下所示Button(test) .height(40) .width(90) .backgroundColor(#aabbcc) Button(test, {type: ButtonType.Capsule}) .height(40) .width(90) .borderRadius(20) // 設(shè)置圓角但是沒(méi)有效果 .borderWidth(3) // 設(shè)置邊框?qū)挾?.borderColor(Color.Red) // 設(shè)置邊框顏色 .backgroundColor(#bbaacc)// 設(shè)置背景色樣例運(yùn)行結(jié)果如下圖所示Normal矩形按鈕無(wú)圓角可以通過(guò) borderRadius() 設(shè)置圓角大小不支持通過(guò) border() 的方式設(shè)置圓角簡(jiǎn)單樣例如下所示Button(Login) // 默認(rèn)膠囊類(lèi)型 .height(40) .width(90) .backgroundColor(#aabbcc) Button(Login, {type: ButtonType.Normal}) // 沒(méi)有圓角 .height(40) .width(90) .backgroundColor(#aabbcc) Button(Login, {type: ButtonType.Normal}) // 設(shè)置圓角 .height(40) .width(90) .backgroundColor(#aabbcc) .borderRadius(8)樣例運(yùn)行結(jié)果如下圖所示Circle圓形按鈕設(shè)置該樣式時(shí)簡(jiǎn)單樣例如下所示Button(Login) .height(40) .width(90) .backgroundColor(#aabbcc) Button(Harmony) .type(ButtonType.Circle) .backgroundColor(#aabbcc) Button(OpenHarmony, {type: ButtonType.Circle}) .height(50) .width(90) .backgroundColor(#aabbcc)樣例運(yùn)行結(jié)果如下圖所示stateEffect設(shè)置是否開(kāi)啟點(diǎn)擊效果默認(rèn)開(kāi)啟簡(jiǎn)單樣例如下所示Button(effect: on) .fontSize(20) Button(effect: off, {stateEffect: false}) .fontSize(20)Button自定義樣式包含 Text 組件Column(){ Button({type:ButtonType.Normal}){ Text(Login) .fontSize(20) .fontColor(Color.Red) .padding({left:20, right:20}) } .borderRadius(8) .backgroundColor(#aabbcc) Button({type:ButtonType.Circle}){ Text(Login) .fontColor(Color.Red) .fontSize(20) } .width(80) .height(80) .backgroundColor(#aabbcc) }樣例運(yùn)行結(jié)果如下圖所示樣例給 Button 添加了一個(gè) Text 子組件通過(guò)設(shè)置 Text 的文本樣式達(dá)到修改 Button 文字的效果。包含Image組件Button({type: ButtonType.Circle}) { Image($r(app.media.more)) .width(30) .height(30) } .width(70) .height(70) Button({type: ButtonType.Circle}) { Image($r(app.media.delete)) .width(40) .height(40) } .width(70) .height(70) .backgroundColor(#ff0000)樣例運(yùn)行結(jié)果如下圖所示樣例中使用了 Image 組件該組件是后續(xù)章節(jié)要講解的基礎(chǔ)組件包含復(fù)雜組件Button({type: ButtonType.Normal}) { Row() { Image($r(app.media.loading)) .width(30) .height(30) .margin({left: 12}) Text(loading) .fontSize(20) .fontColor(#ffffff) .margin({left: 5, right: 12}) } } .borderRadius(8) .backgroundColor(0x317aff)樣例運(yùn)行結(jié)果如下圖所示樣例中使用 Row 作為子組件 Row 組件屬于線性容器組件它可以添加多個(gè)子組件案例Column() { Text(${this.count}) .fontSize(30) .onClick(() { this.count }) if (this.count 0) { Button(count是負(fù)數(shù)).fontSize(30).height(50) } else if (this.count % 2 0) { Button(count是偶數(shù)).fontSize(30).height(50) } else { Button(count是奇數(shù)).fontSize(30).height(50) } }.height(100%).width(100%).justifyContent(FlexAlign.Center)有動(dòng)態(tài)的按鈕會(huì)變化圖片組件ImageImage為圖片組件常用于在應(yīng)用中顯示圖片。Image支持加載string、PixeMap和Resoure類(lèi)型的數(shù)據(jù)源支持png、jpg、bmp、svg和gif類(lèi)型的圖片格式declare class ImageAttribute extends CommonMethodImageAttribute { alt(value: string | Resource): ImageAttribute; matchTextDirection(value: boolean): ImageAttribute; fitOriginalSize(value: boolean): ImageAttribute; fillColor(value: ResourceColor): ImageAttribute; objectFit(value: ImageFit): ImageAttribute; objectRepeat(value: ImageRepeat): ImageAttribute; autoResize(value: boolean): ImageAttribute; renderMode(value: ImageRenderMode): ImageAttribute; interpolation(value: ImageInterpolation): ImageAttribute; sourceSize(value: { width: number; height: number }): ImageAttribute; syncLoad(value: boolean): ImageAttribute; onComplete( callback: (event?: { width: number; height: number; componentWidth: number; componentHeight: number; loadingStatus: number; }) void, ): ImageAttribute; onError(callback: (event?: { componentWidth: number; componentHeight: number }) void): ImageAttribute; onFinish(event: () void): ImageAttribute; }Image加載方式從本地加載拷貝 test.png 圖片到工程的 resources/main/base/media 目錄下加載圖片直接使用系統(tǒng)提供的資源訪問(wèn)符 $() 或者本地文件加載加載網(wǎng)絡(luò)圖片加載網(wǎng)絡(luò)圖片時(shí)默認(rèn)網(wǎng)絡(luò)超時(shí)是5分鐘建議使用alt配置加載時(shí)的占位圖。如果需要更靈活的網(wǎng)絡(luò)配置可以使用SDKHTTP工具包發(fā)送網(wǎng)絡(luò)請(qǐng)求接著將返回的數(shù)據(jù)解碼為Image組件中的PixelMap需要權(quán)限使用網(wǎng)絡(luò)圖片時(shí)需要申請(qǐng)權(quán)限ohos.permission.INTERNET。具體申請(qǐng)方式請(qǐng)參考權(quán)限申請(qǐng)聲明。https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/accesstoken-guidelines-0000001493744016-V2#ZH-CN_TOPIC_0000001574088333__場(chǎng)景介紹使用Stage模型的應(yīng)用需要在module.json5配置文件中聲明權(quán)限。requestPermissions:[ { name : ohos.permission.INTERNET,//必填 reason: $string:reason, usedScene: { abilities: [ FormAbility ], when:inuse } } ]網(wǎng)絡(luò)圖片獲取代碼Image(https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rikC0D21hJDYvXoswriuhttp%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpgehknetN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3drislpidImgRawr0)// 直接加載網(wǎng)絡(luò)地址請(qǐng)?zhí)顚?xiě)一個(gè)具體的網(wǎng)絡(luò)圖片地址 .alt($r(app.media.icon))// 使用alt在網(wǎng)絡(luò)圖片加載成功前使用占位圖 .width(100%) .height(100)alt設(shè)置占位圖圖片顯示之前先顯示占位圖比如在加載網(wǎng)絡(luò)圖片或者圖片加載失敗時(shí)的場(chǎng)景。objectFit設(shè)置圖片的縮放類(lèi)型當(dāng)Image組件大小和圖片大小不同時(shí)指定圖片的縮放類(lèi)型ImageFit提供了以下5種匹配模式Cover默認(rèn)值保持圖片寬高比進(jìn)行縮放顯示使得圖片完全顯示在顯示邊界外。Contain保持圖片寬高比進(jìn)行縮放顯示使得圖片完全顯示在顯示邊界內(nèi)。Fill不保持圖片寬高比顯示使得圖片完全覆蓋顯示邊界。None不進(jìn)行縮放保持圖片原始大小通常配合objectFit屬性一起使用。ScaleDown保持圖片寬高比進(jìn)行縮放顯示使得圖片完全顯示在顯示邊界內(nèi)如果圖片本身大小小于顯示邊界則保持圖片原始大小。Auto根據(jù)圖片的寬高比和顯示邊界自動(dòng)選擇合適的縮放類(lèi)型。(自動(dòng))以上6種匹配模式運(yùn)行結(jié)果如下圖所示Entry Component struct MyComponent { build() { Column({space: 40}) { Row({space: 10}) { Image($r(app.media.image_icon)) .width(100) .height(50) .border({ width: 1 }) // 保持寬高比進(jìn)行縮小或者放大使得圖片完全顯示在顯示邊界內(nèi)。 .objectFit(ImageFit.Contain) //文字 .overlay(Contain, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r(app.media.image_icon)) .width(100) .height(50) .border({ width: 1 }) // 保持寬高比進(jìn)行縮小或者放大使得圖片兩邊都大于或等于顯示邊界。 .objectFit(ImageFit.Cover) .overlay(Cover, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r(app.media.image_icon)) .width(100) .height(50) .border({ width: 1 }) // 自適應(yīng)顯示。 .objectFit(ImageFit.Auto) .overlay(Auto, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } Row({space: 20}) { Image($r(app.media.image_icon)) .width(100) .height(50) .border({ width: 1 }) // 不保持寬高比進(jìn)行放大縮小使得圖片充滿(mǎn)顯示邊界。 .objectFit(ImageFit.Fill) .overlay(Fill, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r(app.media.image_icon)) .width(100) .height(50) .border({ width: 1 }) // 保持寬高比顯示圖片縮小或者保持不變。 .objectFit(ImageFit.ScaleDown) .overlay(ScaleDown, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r(app.media.image_icon)) .width(100) .height(50) .border({ width: 1 }) // 保持原有尺寸顯示。 .objectFit(ImageFit.None) .overlay(None, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) } } //內(nèi)邊距 .padding({ top: 30 }) } }圖片插值當(dāng)原圖分辨率較低并且放大顯示時(shí)圖片會(huì)模糊出現(xiàn)鋸齒這時(shí)可以使用interpolation屬性對(duì)圖片進(jìn)行插值使圖片顯示得更清晰。Entry Component struct ImageTest { build() { Column() { Row() { Image($r(app.media.flowers_icon)) .width(40%) .interpolation(ImageInterpolation.None) .borderWidth(1) .overlay(Interpolation.None, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .margin(10) Image($r(app.media.flowers_icon)) .width(40%) .interpolation(ImageInterpolation.Low) .borderWidth(1) .overlay(Interpolation.Low, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .margin(10) }.width(100%) .justifyContent(FlexAlign.Center) Row() { Image($r(app.media.flowers_icon)) .width(40%) .interpolation(ImageInterpolation.Medium) .borderWidth(1) .overlay(Interpolation.Medium, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .margin(10) Image($r(app.media.flowers_icon)) .width(40%) .interpolation(ImageInterpolation.High) .borderWidth(1) .overlay(Interpolation.High, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .margin(10) }.width(100%) .justifyContent(FlexAlign.Center) } .height(100%) } }設(shè)置圖片重復(fù)樣式通過(guò)objectRepeat屬性設(shè)置圖片的重復(fù)樣式方式重復(fù)樣式請(qǐng)參考ImageRepeat枚舉說(shuō)明。Entry Component struct ImageTest { build() { Column({ space: 30 }) { Image($r(app.media.heart_icon)) .width(110) .height(115) .border({ width: 1 }) // 在水平軸和豎直軸上同時(shí)重復(fù)繪制圖片 .objectRepeat(ImageRepeat.XY) // 保持寬高比顯示圖片縮小或者保持不變。 .objectFit(ImageFit.ScaleDown) .overlay(ImageRepeat.XY, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r(app.media.heart_icon)) .width(110) .height(115) .border({ width: 1 }) .objectRepeat(ImageRepeat.Y) .objectFit(ImageFit.ScaleDown) // 只在豎直軸上重復(fù)繪制圖片 .overlay(ImageRepeat.Y, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) Image($r(app.media.heart_icon)) .width(110) .height(115) .border({ width: 1 }) .objectRepeat(ImageRepeat.X) .objectFit(ImageFit.ScaleDown) // 只在水平軸上重復(fù)繪制圖片 .overlay(ImageRepeat.X, { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) }.height(150).width(100%).padding(30) } }renderMode設(shè)置圖片的渲染模式 ImageRenderMode 定義了以下2種渲染模式Original默認(rèn)值按照原圖進(jìn)行渲染Template將圖像渲染為模板圖像忽略圖片的顏色信息。Image($r(app.media.xiaoxi)) .width(90) .height(90) .renderMode(ImageRenderMode.Original) // 原圖渲染 Image($r(app.media.xiaoxi)) .width(90) .height(90) .renderMode(ImageRenderMode.Template) // 模板渲染效果圖如下sourceSize對(duì)原始圖片做部分解碼樣例如下Image($r(app.media.xiaoxi)) .width(90) .height(90) .sourceSize({width: 10, height: 10}) // 設(shè)置解碼的寬高Image事件介紹declare class ImageAttribute extends CommonMethodImageAttribute { onComplete( callback: (event?: { width: number; height: number; componentWidth: number; componentHeight: number; loadingStatus: number; }) void, ): ImageAttribute; onError(callback: (event?: { componentWidth: number; componentHeight: number }) void): ImageAttribute; onFinish(event: () void): ImageAttribute; }onComplete圖片成功加載時(shí)觸發(fā)該回調(diào)返回圖片原始尺寸信息。onError圖片加載出現(xiàn)異常時(shí)觸發(fā)該回調(diào)。onFinish當(dāng)加載的源文件為帶動(dòng)效的 svg 圖片時(shí)當(dāng) svg 動(dòng)效播放完成時(shí)會(huì)觸發(fā)這個(gè)回調(diào)如果動(dòng)效為無(wú)限循環(huán)動(dòng)效則不會(huì)觸發(fā)這個(gè)回調(diào)。通過(guò)在Image組件上綁定onComplete事件圖片加載成功后可以獲取圖片的必要信息。如果圖片加載失敗也可以通過(guò)綁定onError回調(diào)來(lái)獲得結(jié)果。Entry Component struct ImageTest { //圖片原本的寬高 State widthValue: number 0 State heightValue: number 0 //組件的寬高 State componentWidth: number 0 State componentHeight: number 0 build() { Column() { Row() { Image($r(app.media.image_icon)) .width(200) .height(150) .margin(15) .onComplete(msg { if(msg){ this.widthValue msg.width this.heightValue msg.height this.componentWidth msg.componentWidth this.componentHeight msg.componentHeight } }) // 圖片獲取失敗打印結(jié)果 .onError(() { console.info(load image fail) }) //成功打印 .overlay(width: this.widthValue , height: this.heightValue componentWidth: this.componentWidth componentHeight: this.componentHeight, { align: Alignment.Bottom, offset: { x: 0, y: 60 } }) } } } }文本輸入TextInput/TextAreaTextInput/TextArea是輸入框組件通常用于響應(yīng)用戶(hù)的輸入操作比如評(píng)論區(qū)的輸入、聊天框的輸入、表格的輸入等也可以結(jié)合其他組件構(gòu)建功能頁(yè)面例如登錄注冊(cè)頁(yè)面。具體用法參考TextInputhttps://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-basic-components-textinput-0000001427584864-V2TextArea:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-basic-components-textarea-0000001427902464-V2創(chuàng)建輸入框TextInput為單行輸入框、TextArea為多行輸入框。通過(guò)以下接口來(lái)創(chuàng)建TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController}) TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})單行輸入框TextInput()多行輸入框TextArea()多行輸入框文字超出一行時(shí)會(huì)自動(dòng)折行。TextArea({text:我是TextArea我是TextArea我是TextArea我是TextArea}) .width(300)設(shè)置輸入框類(lèi)型TextInput有5種可選擇類(lèi)型分別為Normal基本輸入模式、Password密碼輸入模式、Number純數(shù)字輸入模式、Email郵箱地址輸入模式、PhoneNumber電話(huà)號(hào)碼輸入模式。通過(guò)type屬性進(jìn)行設(shè)置基本輸入模式默認(rèn)類(lèi)型TextInput().type(InputType.Normal)密碼輸入模式TextInput().type(InputType.Password)自定義樣式設(shè)置無(wú)輸入時(shí)的提示文本。TextInput({placeholder:我是提示文本})添加backgroundColor改變輸入框的背景顏色。添加事件文本框主要用于獲取用戶(hù)輸入的信息把信息處理成數(shù)據(jù)進(jìn)行上傳綁定onChange事件可以獲取輸入框內(nèi)改變的內(nèi)容。用戶(hù)也可以使用通用事件來(lái)進(jìn)行相應(yīng)的交互操作。TextInput() .onChange((value: string) { console.info(value); }) //獲取焦點(diǎn) .onFocus(() { console.info(獲取焦點(diǎn)); })場(chǎng)景示例用于表單的提交在用戶(hù)登錄/注冊(cè)頁(yè)面用戶(hù)的登錄或注冊(cè)的輸入操作。Entry Component struct TextInputSample { build() { Column() { TextInput({ placeholder: input your username }).margin({ top: 20 }) .onSubmit((EnterKeyType){ console.info(EnterKeyType輸入法回車(chē)鍵的類(lèi)型值) }) TextInput({ placeholder: input your password }).type(InputType.Password).margin({ top: 20 }) .onSubmit((E nterKeyType){ console.info(EnterKeyType輸入法回車(chē)鍵的類(lèi)型值) }) Button(Sign in).width(150).margin({ top: 20 }) }.padding(20) } }鍵盤(pán)避讓鍵盤(pán)避讓鍵盤(pán)抬起后具有滾動(dòng)能力的容器組件在橫豎屏切換時(shí)才會(huì)生效鍵盤(pán)避讓若希望無(wú)滾動(dòng)能力的容器組件也生效鍵盤(pán)避讓建議在組件外嵌套一層具有滾動(dòng)能力的容器組件比如Scroll、List、Grid。Entry Component struct Index { placeHolderArr: string[] [1, 2, 3, 4, 5, 6, 7] build() { Scroll() { Column() { ForEach(this.placeHolderArr, (placeholder: string) { TextInput({ placeholder: TextInput placeholder }) .margin(30) }) } } .height(100%) .width(100%) } }search組件提供搜索框組件用于提供用戶(hù)搜索內(nèi)容的輸入?yún)^(qū)域Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController })SearchControllerSearch組件的控制器目前通過(guò)它可控制Search組件的光標(biāo)位置。事件Entry Component struct SearchPage { State changeValue: string State submitValue: string //控制器設(shè)置光標(biāo)位置 controller: SearchController new SearchController() build() { Column() { Text(onSubmit: this.submitValue) .fontSize(18) .margin(15) Text(onChange: this.changeValue) .fontSize(18) .margin(15) //搜索組件 Search({ value: this.changeValue, placeholder: Type to search..., controller: this.controller }) //搜索按鈕 .searchButton(SEARCH) .width(95%) .height(40) .backgroundColor(#F5F5F5) //提示文本顏色 .placeholderColor(Color.Grey) //提示文本大小 .placeholderFont({ size: 14, weight: 400 }) //輸入的文本大小 .textFont({ size: 14, weight: 400 }) //提交點(diǎn)擊搜索按鈕 .onSubmit((value: string) { this.submitValue value }) //文本改變觸發(fā) .onChange((value: string) { this.changeValue value }) .margin(20) Button(Set caretPosition 1) .onClick(() { // 設(shè)置光標(biāo)位置到輸入的第一個(gè)字符后 this.controller.caretPosition(1) }) }.width(100%) } }切換按鈕ToggleToggle組件提供狀態(tài)按鈕樣式勾選框樣式及開(kāi)關(guān)樣式一般用于兩種狀態(tài)之間的切換。接口調(diào)用形式:Toggle(options: { type: ToggleType, isOn?: boolean })用于創(chuàng)建切換按鈕其中ToggleType為開(kāi)關(guān)類(lèi)型包括Button、Checkbox和SwitchisOn為切換按鈕的狀態(tài)接口調(diào)用有以下兩種形式創(chuàng)建不包含子組件的Toggle。當(dāng)ToggleType為Checkbox或者Switch時(shí)用于創(chuàng)建不包含子組件的ToggleToggle({ type: ToggleType.Checkbox, isOn: false }) Toggle({ type: ToggleType.Checkbox, isOn: true })Toggle({ type: ToggleType.Switch, isOn: false }) Toggle({ type: ToggleType.Switch, isOn: true })創(chuàng)建包含子組件的Toggle。當(dāng)ToggleType為Button時(shí)只能包含一個(gè)子組件如果子組件有文本設(shè)置則相應(yīng)的文本內(nèi)容會(huì)顯示在按鈕內(nèi)部。Toggle({ type: ToggleType.Button, isOn: false }) { Text(status button) .fontColor(#182431) .fontSize(12) } .width(100) Toggle({ type: ToggleType.Button, isOn: true }) { Text(status button) .fontColor(#182431) .fontSize(12) } .width(100)自定義樣式通過(guò)selectedColor屬性設(shè)置Toggle打開(kāi)選中后的背景顏色。Toggle( { type: ToggleType.Button, isOn: true } ) { Text(status button) .fontColor(#182431) .fontSize(12) } .width(100) .selectedColor(Color.Pink) Toggle({ type: ToggleType.Checkbox, isOn: true }) .selectedColor(Color.Pink) Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor(Color.Pink)通過(guò)switchPointColor屬性設(shè)置Switch類(lèi)型的圓形滑塊顏色僅對(duì)type為T(mén)oggleType.Switch生效。Toggle({ type: ToggleType.Switch, isOn: false }) .switchPointColor(Color.Pink) Toggle({ type: ToggleType.Switch, isOn: true }) .switchPointColor(Color.Pink)添加事件除支持通用事件外Toggle通常用于選中和取消選中后觸發(fā)某些操作可以綁定onChange事件來(lái)響應(yīng)操作后的自定義行為。Toggle({ type: ToggleType.Switch, isOn: false }) .onChange((isOn: boolean) { if(isOn) { // 需要執(zhí)行的操作 } })案例import promptAction from ohos.promptAction; Entry Component struct ToggleExample { build() { Column() { Row() { Text(Bluetooth Mode) .height(50) .fontSize(16) } Row() { Text(Bluetooth) .height(50) .padding({left: 10}) .fontSize(16) .textAlign(TextAlign.Start) .backgroundColor(0xFFFFFF) //自動(dòng)充滿(mǎn) Blank() Toggle({ type: ToggleType.Switch }) .margin({ right: 10}) //設(shè)置點(diǎn)擊事件 .onChange((isOn: boolean) { if(isOn) { promptAction.showToast({ message: Bluetooth is on. }) } else { promptAction.showToast({ message: Bluetooth is off. }) } }) } .width(100%) .backgroundColor(0xFFFFFF) } .padding(10) .backgroundColor(0xDCDCDC) .width(100%) .height(100%) } }Progress進(jìn)度條Progress是進(jìn)度條顯示組件顯示內(nèi)容通常為某次目標(biāo)操作的當(dāng)前進(jìn)度。Progress(options: {value: number, total?: number, type?: ProgressType})參數(shù)參數(shù)名參數(shù)類(lèi)型必填參數(shù)描述valuenumber是指定當(dāng)前進(jìn)度值。設(shè)置小于0的數(shù)值時(shí)置為0設(shè)置大于total的數(shù)值時(shí)置為total。從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。totalnumber否指定進(jìn)度總長(zhǎng)。默認(rèn)值100從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。typeProgressType否指定進(jìn)度條類(lèi)型。默認(rèn)值ProgressType.Linear從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。styledeprecatedProgressStyle否指定進(jìn)度條樣式。該參數(shù)從API version8開(kāi)始廢棄建議使用type替代。默認(rèn)值ProgressStyle.LinearProgressType枚舉說(shuō)明從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。枚舉值枚舉說(shuō)明Linear線性樣式。從API version9開(kāi)始高度大于寬度的時(shí)候自適應(yīng)垂直顯示。Ring8環(huán)形無(wú)刻度樣式環(huán)形圓環(huán)逐漸顯示至完全填充效果。Eclipse8圓形樣式顯示類(lèi)似月圓月缺的進(jìn)度展示效果從月牙逐漸變化至滿(mǎn)月。ScaleRing8環(huán)形有刻度樣式,顯示類(lèi)似時(shí)鐘刻度形式的進(jìn)度展示效果。從API version9開(kāi)始刻度外圈出現(xiàn)重疊的時(shí)候自動(dòng)轉(zhuǎn)換為環(huán)形無(wú)刻度進(jìn)度條。Capsule8膠囊樣式,頭尾兩端圓弧處的進(jìn)度展示效果與Eclipse相同中段處的進(jìn)度展示效果與Linear相同。高度大于寬度的時(shí)候自適應(yīng)垂直顯示。ProgressStyle枚舉說(shuō)明從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。枚舉值枚舉說(shuō)明Linear線性樣式。Ring環(huán)形無(wú)刻度樣式,環(huán)形圓環(huán)逐漸顯示至完全填充效果。Eclipse圓形樣式顯示類(lèi)似月圓月缺的進(jìn)度展示效果從月牙逐漸變化至滿(mǎn)月。ScaleRing環(huán)形有刻度樣式顯示類(lèi)似時(shí)鐘刻度形式的進(jìn)度展示效果。Capsule膠囊樣式頭尾兩端圓弧處的進(jìn)度展示效果與Eclipse相同中段處的進(jìn)度展示效果與Linear相同。高度大于寬度的時(shí)候自適應(yīng)垂直顯示。屬性名稱(chēng)參數(shù)類(lèi)型描述valuenumber設(shè)置當(dāng)前進(jìn)度值。設(shè)置小于0的數(shù)值時(shí)置為0設(shè)置大于total的數(shù)值時(shí)置為total。非法數(shù)值不生效。從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。colorResourceColor設(shè)置進(jìn)度條前景色。默認(rèn)值#ff007dff’從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。backgroundColorResourceColor設(shè)置進(jìn)度條底色。默認(rèn)值#19182431’從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。style8{strokeWidth?: Length,scaleCount?: number,scaleWidth?: Length}定義組件的樣式。- strokeWidth: 設(shè)置進(jìn)度條寬度不支持百分比設(shè)置。從API version9開(kāi)始環(huán)形進(jìn)度條設(shè)置寬度大于等于半徑時(shí)默認(rèn)修改寬度至半徑值的二分之一。默認(rèn)值4.0Vp- scaleCount: 設(shè)置環(huán)形進(jìn)度條總刻度數(shù)。默認(rèn)值120- scaleWidth: 設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)不支持百分比設(shè)置刻度粗細(xì)大于進(jìn)度條寬度時(shí)為系統(tǒng)默認(rèn)粗細(xì)。默認(rèn)值2.0Vp從API version 9開(kāi)始該接口支持在ArkTS卡片中使用。Entry Component struct ProgressExample { build() { Column({ space: 15 }) { //線性進(jìn)度條 Text(Linear Progress) .fontSize(20) .width(90%) //type設(shè)置類(lèi)型value默認(rèn)值 Progress({ value: 10, type: ProgressType.Linear }) .width(200) Progress({ value: 30, total: 150, type: ProgressType.Linear }) .color(Color.Grey)//進(jìn)度條顏色 .value(50)//設(shè)置進(jìn)度條進(jìn)度 .width(200) //月牙到滿(mǎn)月 Text(Eclipse Progress) .fontSize(20) .width(90%) Row({ space: 40 }) { Progress({ value: 10, type: ProgressType.Eclipse }) .width(100) Progress({ value: 20, total: 150, type: ProgressType.Eclipse }) .color(Color.Grey) .value(50) .width(100) } //刻度樣式 Text(ScaleRing Progress) .fontSize(20) .width(90%) Row({ space: 40 }) { Progress({ value: 10, type: ProgressType.ScaleRing }) .width(100) Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) .color(Color.Grey) .value(50) .width(100) //strokeWidth進(jìn)度條寬度scaleCount進(jìn)度條總刻度scaleWidth進(jìn)度條粗細(xì) .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) } // scaleCount和scaleWidth效果對(duì)比 Row({ space: 40 }) { Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) .color(Color.Grey).value(50).width(100) .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) .color(Color.Grey).value(50).width(100) .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) } //環(huán)形無(wú)刻度樣式環(huán)形圓環(huán)逐漸顯示至完全填充效果 Text(Ring Progress) .fontSize(20) .width(90%) Row({ space: 40 }) { Progress({ value: 10, type: ProgressType.Ring }) .width(100) Progress({ value: 20, total: 150, type: ProgressType.Ring }) .color(Color.Grey) .value(50) .width(100) //strokeWidth進(jìn)度條寬度scaleCount進(jìn)度條總刻度scaleWidth進(jìn)度條粗細(xì) .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 }) } //膠囊型 Text(Capsule Progress) .fontSize(20) .width(90%) Row({ space: 40 }) { Progress({ value: 10, type: ProgressType.Capsule }) .width(100) .height(50) Progress({ value: 20, total: 150, type: ProgressType.Capsule }) .color(Color.Grey) .value(50) .width(100) .height(50) .backgroundColor(Color.Pink) } } .width(100%) .margin({ top: 30 }) } }案例Entry Component struct ForEachPage { State progressValue: number 0 // 設(shè)置進(jìn)度條初始值為0 build() { Column() { Column() { Progress({value:0, total:100, type:ProgressType.Capsule}) .width(200) .height(50) .style({strokeWidth:50}) .value(this.progressValue) Button(進(jìn)度條5) .margin({top: 30}) .onClick((){ this.progressValue 5 if (this.progressValue 100){ this.progressValue 0 } }) } }.width(100%).height(100%) } }Entry Component struct ProgressPage { State value: number 0; State private intervalID: number -1; build() { Column({space: 10}) { Progress({ value: this.value, // 設(shè)置當(dāng)前進(jìn)度 total: 100, // 設(shè)置進(jìn)度總量 type: ProgressType.Linear }) .style({strokeWidth: 10}) // 設(shè)置進(jìn)度條線寬 .size({width: 90%, height: 40}) Text(進(jìn)度 ${this.value}/100) .fontSize(30) .fontWeight(FontWeight.Bold) Progress({ value: this.value, // 設(shè)置當(dāng)前進(jìn)度 total: 100, // 設(shè)置進(jìn)度總量 type: ProgressType.Ring }) .style({strokeWidth: 10}) .color(Color.Pink) .size({width: 80, height: 80}) Text(進(jìn)度 ${this.value}/100) .fontSize(30) .fontWeight(FontWeight.Bold) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) } //組件生命周期aboutToAppear組件即將出現(xiàn)時(shí)回調(diào)該接口具體時(shí)機(jī)為在創(chuàng)建自定義組件的新實(shí)例后在執(zhí)行其build()函數(shù)之前執(zhí)行 aboutToAppear() { //設(shè)置時(shí)間間隔 this.intervalID setInterval(() { this.value if (this.value 100) { clearInterval(this.intervalID) } },100) } }LoadingProgressLoadingProgress 和 Progress 的區(qū)別是不能精確指定進(jìn)度條的進(jìn)度它是一個(gè)一直加載的動(dòng)畫(huà)主要是向用戶(hù)提示任務(wù)正在運(yùn)行中。沒(méi)有任何參數(shù)interface LoadingProgressInterface { (): LoadingProgressAttribute; }簡(jiǎn)單使用LoadingProgress() .width(120) .height(40)屬性介紹declare class LoadingProgressAttribute extends CommonMethodLoadingProgressAttribute { color(value: ResourceColor): LoadingProgressAttribute; }color設(shè)置進(jìn)度條的前景色。輪播圖SwiperSwiper是什么Swiper是一個(gè)容器類(lèi)組件它提供了切換頁(yè)面顯示的能力Swiper內(nèi)部包含的每一個(gè)子組件都表示一個(gè)頁(yè)面簡(jiǎn)單來(lái)說(shuō)就是如果Swiper中包含了3個(gè)子組件那么Swiper中就有3個(gè)頁(yè)面。布局與約束Swiper作為一個(gè)容器組件在自身尺寸屬性未被設(shè)置時(shí)會(huì)自動(dòng)根據(jù)子組件的大小設(shè)置自身的尺寸。如果開(kāi)發(fā)者對(duì)Swiper組件設(shè)置了固定的尺寸則在輪播顯示過(guò)程中均以該尺寸生效否則在輪播過(guò)程中會(huì)根據(jù)子組件的大小自動(dòng)調(diào)整自身的尺寸。Swiper組件的常用屬性index默認(rèn)顯示顯示第幾頁(yè)默認(rèn)值為 0。autoPlay是否自動(dòng)播放默認(rèn)值為 falseinterval設(shè)置自動(dòng)播放時(shí)播放的時(shí)間間隔單位毫秒默認(rèn)是 3000。indicator是否顯示導(dǎo)航點(diǎn)指示器默認(rèn)顯示。loop是否開(kāi)啟循環(huán)顯示也就是說(shuō)當(dāng)翻頁(yè)到最后一頁(yè)再往下翻頁(yè)是否會(huì)回到第一頁(yè)默認(rèn)開(kāi)啟。然后再來(lái)說(shuō)一下SwiperControllerSwiperController是Swiper的頁(yè)面控制器Swiper組件可以綁定一個(gè)SwiperController通過(guò)它來(lái)實(shí)現(xiàn)控制翻頁(yè)并且提供了兩個(gè)方法showNext顯示下一頁(yè)。showPrevious顯示上一頁(yè)。關(guān)于Swiper組件的更多介紹及API的使用歡迎參考官方文檔文檔中心【Swiper】接下來(lái)我們就通過(guò)代碼來(lái)快速實(shí)現(xiàn)一個(gè)自動(dòng)輪播圖我們先通過(guò)Swiper來(lái)實(shí)現(xiàn)直接調(diào)用系統(tǒng)提供的API簡(jiǎn)單快捷。Swiper(){ Image($r(app.media.icon_swiper_one)) Image($r(app.media.icon_swiper_two)) }循環(huán)播放通過(guò)loop屬性控制是否循環(huán)播放該屬性默認(rèn)值為true。當(dāng)loop為true時(shí)在顯示第一頁(yè)或最后一頁(yè)時(shí)可以繼續(xù)往前切換到前一頁(yè)或者往后切換到后一頁(yè)。如果loop為false則在第一頁(yè)或最后一頁(yè)時(shí)無(wú)法繼續(xù)向前或者向后切換頁(yè)面。loop為trueSwiper() { Text(0) .width(90%) .height(100%) .backgroundColor(Color.Gray) .textAlign(TextAlign.Center) .fontSize(30) Text(1) .width(90%) .height(100%) .backgroundColor(Color.Green) .textAlign(TextAlign.Center) .fontSize(30) Text(2) .width(90%) .height(100%) .backgroundColor(Color.Pink) .textAlign(TextAlign.Center) .fontSize(30) } .loop(true)loop為falseSwiper() { // ...} .loop(false)自動(dòng)輪播Swiper通過(guò)設(shè)置autoPlay屬性控制是否自動(dòng)輪播子組件。該屬性默認(rèn)值為false。autoPlay為true時(shí)會(huì)自動(dòng)切換播放子組件子組件與子組件之間的播放間隔通過(guò)interval屬性設(shè)置。interval屬性默認(rèn)值為3000單位毫秒。Swiper() { // ...} .loop(true) .autoPlay(true) .interval(1000)導(dǎo)航點(diǎn)樣式Swiper提供了默認(rèn)的導(dǎo)航點(diǎn)樣式和導(dǎo)航點(diǎn)箭頭樣式導(dǎo)航點(diǎn)默認(rèn)顯示在Swiper下方居中位置開(kāi)發(fā)者也可以通過(guò)indicator屬性自定義導(dǎo)航點(diǎn)的位置和樣式導(dǎo)航點(diǎn)箭頭默認(rèn)不顯示。通過(guò)indicator屬性開(kāi)發(fā)者可以設(shè)置導(dǎo)航點(diǎn)相對(duì)于Swiper組件上下左右四個(gè)方位的位置同時(shí)也可以設(shè)置每個(gè)導(dǎo)航點(diǎn)的尺寸、顏色、蒙層和被選中導(dǎo)航點(diǎn)的顏色。導(dǎo)航點(diǎn)使用默認(rèn)樣式導(dǎo)航點(diǎn)直徑設(shè)為30vp左邊距為0導(dǎo)航點(diǎn)顏色設(shè)為紅色。Swiper() { // ... } .indicator( Indicator.dot() .left(0) .itemWidth(15) .itemHeight(15) .selectedItemWidth(30) .selectedItemHeight(15) .color(Color.Red) .selectedColor(Color.Blue) )Indicator.dot()導(dǎo)航點(diǎn)樣式為圓形默認(rèn)樣式。Indicator.digit()導(dǎo)航點(diǎn)樣式為數(shù)字從1開(kāi)始計(jì)數(shù)。Swiper通過(guò)設(shè)置displayArrow屬性可以控制導(dǎo)航點(diǎn)箭頭的大小、位置、顏色底板的大小及顏色以及鼠標(biāo)懸停時(shí)是否顯示箭頭。箭頭使用默認(rèn)樣式Swiper() { // ...} .displayArrow(true, false) /*showBackground: 是否顯示背景默認(rèn)為 true。 isSidebarMiddle: 箭頭是否居中顯示默認(rèn)為 true。 backgroundSize: 背景的大小默認(rèn)為 24。 backgroundColor: 背景顏色默認(rèn)為 Color.White。 arrowSize: 箭頭的大小默認(rèn)為 18。 arrowColor: 箭頭的顏色默認(rèn)為 Color.Blue*/頁(yè)面切換方式Swiper支持手指滑動(dòng)、點(diǎn)擊導(dǎo)航點(diǎn)和通過(guò)控制器三種方式切換頁(yè)面以下示例展示通過(guò)控制器切換頁(yè)面的方法。Entry Component struct TestPage { private swiperController:SwiperController new SwiperController() build() { Column({space:10}) { Swiper(this.swiperController) { Text(0) .backgroundColor(Color.Gray) .width(250) .height(250) .textAlign(TextAlign.Center) .fontSize(20) Text(1) .backgroundColor(Color.Pink) .width(250) .height(250) .textAlign(TextAlign.Center) .fontSize(20) Text(2) .backgroundColor(Color.Red) .width(250) .height(250) .textAlign(TextAlign.Center) .fontSize(20) } .indicator(true) Row({space:12}){ Button(showNext).onClick((event: ClickEvent) { this.swiperController.showNext()// 通過(guò)controller切換到下一頁(yè) }) Button(showPrevious).onClick((event: ClickEvent) { this.swiperController.showPrevious()// 通過(guò)controller切換到上一頁(yè) }) } }.height(100%).width(100%) } }輪播方向Swiper支持水平和垂直方向上進(jìn)行輪播主要通過(guò)vertical屬性控制。當(dāng)vertical為ture時(shí)表示在垂直方向上進(jìn)行輪播為false時(shí)表示在水平方向上進(jìn)行輪播。vertical默認(rèn)值為false設(shè)置水平方向上輪播Swiper(){// ...} .vertical(false) .indicator(true)設(shè)置垂直方向輪播。Swiper() { // ...} .indicator(true) .vertical(true)每頁(yè)顯示多個(gè)子頁(yè)面Swiper支持在一個(gè)頁(yè)面內(nèi)同時(shí)顯示多個(gè)子組件通過(guò)displayCount屬性設(shè)置。Swiper(){ ForEach(this.data, (item:ResourceColor, index:number) { Column(){ Text(${index}) .fontSize(20fp) .fontColor(FontWeight.Bold) .fontColor(Color.Black) } .width(100%) .height(200vp) .backgroundColor(item) .alignItems(HorizontalAlign.Center) .justifyContent(FlexAlign.Center) }) } .displayCount(2)