@Component
標(biāo)簽修飾UI,相當(dāng)于Android的view,所有的UI組件都要使用@Component標(biāo)簽
@Entry標(biāo)簽
表明當(dāng)前是一個頁面,不是一個視圖。多個組件組合時只能有一個@Entry標(biāo)簽,被該標(biāo)簽修飾后頁面才會有生命周期
import router from '@ohos.router'
@Entry
@Component
struct Login {
@State title: string = '登錄頁面'
build() {
Row() {
Column() {
Text(this.title).fontSize(20)
.fontWeight(FontWeight.Bold)
.textAlign(TextAlign.Center)
.width('100%').margin({top:10})
Button() {
Text('返回')
.fontSize(18)
.fontWeight(FontWeight.Bold)
}.type(ButtonType.Capsule)
.padding({top:5,bottom:5,left:10,right:10})
.margin({top:20})
.onClick(()=>{
try{
router.back()
}catch (err){
console.error("錯誤="+err.code +" message="+err.message)
}
})
}
}.width('100%')
}
onPageShow(){
//頁面每次顯示時觸發(fā)
}
onPageHide(){
//頁面每次隱藏時觸發(fā)
}
onBackPress(){
//用戶點擊返回按鈕時觸發(fā)
}
aboutToAppear(){
//在執(zhí)行build函數(shù)之前執(zhí)行
}
aboutToDisappear(){
//組件即將銷毀時執(zhí)行
}
}
@Builder標(biāo)簽
使用該標(biāo)簽的方法會自動構(gòu)建一個組件
- 全局方式
@Builder function xxx{}
- 組件內(nèi)方式
@Builder xx{}
需要傳遞參數(shù)時采用引用傳遞 $$
//方法
@Builder function builderFunc($$:{showText:string}){
Text('全局 builder方法 '+$$.showText)
.fontSize(18)
.fontColor("#333333")
}
//調(diào)用
builderFunc({showText:'全局豬頭'})
@BuilderParam標(biāo)簽
對應(yīng)@Builder標(biāo)簽,類似于java的接口傳遞
/**
* 全局styles樣式
*/
@Styles function globalFancy(){
.width(100)
.height(150)
.backgroundColor(Color.Pink)
}
@Builder function builderFunc($$:{showText:string}){
Text('全局 builder方法 '+$$.showText)
.fontSize(18)
.fontColor("#333333")
}
@Component
struct testBuildParam{
@BuilderParam param:()=>void
build(){
Column(){
this.param()
}
}
}
//頁面入口
@Entry
@Component
struct StylesPage{
@State heightNum:number = 100
@Styles selfFancy(){
.width(120)
.height(this.heightNum)
.backgroundColor(Color.Yellow)
.onClick(()=>{
this.heightNum = 180
})
}
@Builder builderSelf(){
Text("組件內(nèi)方法")
.fontSize(15)
.fontColor("#999999")
.margin({top:20})
}
build(){
Column({space:10}){
Text("全局引用styles")
.globalFancy()
.fontSize(25)
Text("組件內(nèi)的style")
.selfFancy()
.fontSize(18)
this.builderSelf()
builderFunc({showText:'全局豬頭'})
testBuildParam({param:this.builderSelf})
}
}
}
審核編輯 黃宇
HTML 1800 字?jǐn)?shù) 121 段落
聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。
舉報投訴
-
鴻蒙
+關(guān)注
關(guān)注
56文章
2267瀏覽量
42486
發(fā)布評論請先 登錄
相關(guān)推薦
鴻蒙開發(fā):啟動指定頁面
當(dāng)PageAbility的啟動模式設(shè)置為單例時(具體設(shè)置方法和典型場景示例見[PageAbility的啟動模式],缺省情況下是單實例模式),若PageAbility已被拉起,再次啟動PageAbility會觸發(fā)onNewWant回調(diào)(即非首次拉起)。
鴻蒙開發(fā):【頁面棧及任務(wù)鏈】
單個UIAbility組件可以實現(xiàn)多個頁面,并在多個頁面之間跳轉(zhuǎn),這種UIAbility組件內(nèi)部的頁面跳轉(zhuǎn)關(guān)系稱為“頁面?!?,由ArkUI框架統(tǒng)一管理,如下圖中的UIAbility1
鴻蒙開發(fā)接口UI界面:【@ohos.router (頁面路由)】
本模塊首批接口從API version 8開始支持。后續(xù)版本的新增接口,采用上角標(biāo)單獨標(biāo)記接口的起始版本。
> - 頁面路由需要在頁面渲染完成之后才能調(diào)用,在onInit和onReady生命周期中頁面還處于渲染階段,禁止調(diào)用
鴻蒙OS開發(fā):典型頁面場景【一次開發(fā),多端部署】(設(shè)置應(yīng)用頁面)
本小節(jié)以“設(shè)置”應(yīng)用頁面為例,介紹如何使用自適應(yīng)布局能力和響應(yīng)式布局能力適配不同尺寸窗口。
鴻蒙OS開發(fā):典型頁面場景【一次開發(fā),多端部署】實戰(zhàn)(設(shè)置典型頁面)
本示例展示了設(shè)置應(yīng)用的典型頁面,其在小窗口和大窗口有不同的顯示效果,體現(xiàn)一次開發(fā)、多端部署的能力。
鴻蒙OS開發(fā):典型頁面場景【一次開發(fā),多端部署】實戰(zhàn)(應(yīng)用市場首頁)
本示例展示了應(yīng)用市場首頁,頁面中包括Tab欄、運營橫幅、精品應(yīng)用、精品游戲等。
鴻蒙OS開發(fā):【一次開發(fā),多端部署】( 設(shè)置app頁面)
本示例展示了設(shè)置應(yīng)用的典型頁面,其在小窗口和大窗口有不同的顯示效果,體現(xiàn)一次開發(fā)、多端部署的能力。
鴻蒙原生應(yīng)用元服務(wù)開發(fā)-Web應(yīng)用側(cè)調(diào)用前端頁面函數(shù)
應(yīng)用側(cè)可以通過runJavaScript()方法調(diào)用前端頁面的JavaScript相關(guān)函數(shù)。
在下面的示例中,點擊應(yīng)用側(cè)的“runJavaScript”按鈕時,來觸發(fā)前端頁面的htmlTest
發(fā)表于 05-11 15:31
純血鴻蒙開發(fā)教程-運行時動態(tài)加載頁面提升性能
很長時間,但這些復(fù)雜的子頁面與主頁渲染無關(guān)。 本文推薦使用動態(tài)加載解決上述問題,不在應(yīng)用程序加載時就將所有模塊都加載進(jìn)來,而是按需加載模塊,增加應(yīng)用靈活性,提升應(yīng)用性能。
場景示例
主頁
子頁面
發(fā)表于 05-10 20:52
鴻蒙原生應(yīng)用元服務(wù)開發(fā)-Web前端頁面調(diào)用應(yīng)用側(cè)函數(shù)
端頁面中, 該函數(shù)可以在前端頁面觸發(fā)運行。
javaScriptProxy()接口使用示例如下。
// xxx.ets
import web_webview from
發(fā)表于 05-07 15:03
鴻蒙OS開發(fā)實例:【頁面傳值跳轉(zhuǎn)】
本篇主要介紹如何在HarmonyOS中,在頁面跳轉(zhuǎn)之間如何傳值
HarmonyOS 的頁面指的是帶有@Entry裝飾器的文件,其不能獨自存在,必須依賴UIAbility這樣的組件容器
如下是官方關(guān)于State模型開發(fā)模式下的應(yīng)用包結(jié)構(gòu)示意圖,Page就是帶有@En
鴻蒙實戰(zhàn)項目開發(fā):【短信服務(wù)】
概述
本示例展示了電話服務(wù)中發(fā)送短信的功能。
樣例展示
涉及OpenHarmony技術(shù)特性
網(wǎng)絡(luò)通信
難度級別
中級
基礎(chǔ)信息
使用@ohos.telephony.sms接口展示了電話服務(wù)中發(fā)
發(fā)表于 03-03 21:29
Harmony 鴻蒙頁面級變量的狀態(tài)管理
頁面級變量的狀態(tài)管理 @State、@Prop、@Link、@Provide、@Consume、@ObjectLink、@Observed和@Watch用于管理頁面級變量的狀態(tài)。 @State
Harmony 鴻蒙頁面級變量的狀態(tài)管理
頁面級變量的狀態(tài)管理
@State、@Prop、@Link、@Provide、@Consume、@ObjectLink、@Observed和@Watch用于管理頁面級變量的狀態(tài)。
@State
發(fā)表于 01-24 20:04
鴻蒙原生應(yīng)用開發(fā)-關(guān)于頁面接口router返回問題與解決思路
一、模塊導(dǎo)入
import router from \'@ohos.router\'
提供通過不同的url訪問不同的頁面,包括跳轉(zhuǎn)到應(yīng)用內(nèi)的指定頁面、用應(yīng)用內(nèi)的某個頁面替換當(dāng)前頁面、返
發(fā)表于 11-15 10:11
評論