ntColor(Color.Blue).fontSize(40).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)使用资源文件

Text($r(app.string.EntryAbility_label))Image

资源图片

Image($r(app.media.image2)).objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(100)Contain保持宽高比进行缩小或者放大使得图片完全显示在显示边界内。

Cover默认值保持宽高比进行缩小或者放大使得图片两边都大于或等于显示边界。

网络图片

Image(https://www.example.com/xxx.png)

为了成功加载网络图片您需要在module.json5文件中申明网络访问权限。

{module

}).caretColor(Color.Blue).onChange((value:

string)

{this.num1})Text(this.num.toString())}}

}type用于定义按钮样式三种Capsule,Normal,Circle

stateEffect用于设置按钮按下时是否开启切换效果当状态置为false时点击效果关闭默认值为true。

图标按钮

Image($r(app.media.startIcon))//

.width(30)//

.height(30)SymbolGlyph($r(sys.symbol.ohos_folder_badge_plus)).fontSize(45)}.width(55).height(55).backgroundColor(0x00FF00)}}

}LoadingProgress

LoadingProgress().color(Color.Blue).height(60).width(60)Foreach

接口如下

{ForEach(this.results,(item:number){ListItem(){Text(item.toString()).fontSize(30).width(100%).height(30%).borderWidth(1).borderColor(0x000000)}})}}

}弹窗

$r(app.string.prompt_text),duration:

1000});this.clickBackTimeRecord

new

文章简介内容;this.articleList.push(new

Article(id,

item.id)}.padding(20).scrollBar(BarState.Off)}.width(100%).height(100%).backgroundColor(0xF1F3F5)}

}Component

{Image($r(app.media.startIcon)).width(80).height(80).margin({

right:

{Text(this.article.title).fontSize(20).margin({

bottom:

})Text(this.article.brief).fontSize(16).fontColor(Color.Gray).margin({

bottom:

})}.alignItems(HorizontalAlign.Start).width(80%).height(100%)}.padding(20).borderRadius(12).backgroundColor(#FFECECEC).height(120).width(100%).justifyContent(FlexAlign.SpaceBetween)}

}布局

Page).align(Alignment.Center).margin({

top:

{this.pageInfos.pushPathByName(DetailPage,)});}.title(Main

Page).navDestination(this.PageMap);}}BuilderPageMap(name:

string)

{Text(this.param).fontSize(30).margin({

top:

onPageShow页面每次显示时触发一次包括路由过程、应用进入前台等场景

onPageHide页面每次隐藏时触发一次包括路由过程、应用进入前后台等场景

组件生命周期

aboutToAppear组件即将出现时回调该接口具体时机为在创建自定义组件的新实例后在执行其build()函数之前执行。

aboutToDisappear在自定义组件即将析构销毁时执行。

onAppear是每个组件的属性方法在该组件显示时触发此回调。

设备信息

display.getDefaultDisplaySync()//

}在使用previewer获取到的信息都是0,所以在开发的时候先设定定值

private

display.getDefaultDisplaySync().width;

private

display.getDefaultDisplaySync().height;private

deviceWidth:number

ohos.permission.GET_NETWORK_INFO//

获取网络信息权限}],

connection.getDefaultNetSync()//

获取网络连接信息const

connection.getConnectionPropertiesSync(netHandle)//

提取链路信息const

connectionProperties.linkAddresses?.[0]if

(linkAddress)

{this.getConnectionNetBearType()}

}//

connection.getDefaultNetSync()//

获取网络能力信息const

connection.getNetCapabilitiesSync(defaultNet)//

判断网络类型if

(netCapabilities.bearerTypes.includes(connection.NetBearType.BEARER_ETHERNET))

{this.netBearType

(netCapabilities.bearerTypes.includes(connection.NetBearType.BEARER_WIFI))

{this.netBearType

(netCapabilities.bearerTypes.includes(connection.NetBearType.BEARER_CELLULAR))

{this.netBearType