1 卡片介紹
基于像素單位,展示了像素單位的基本知識(shí)與像素轉(zhuǎn)換API的使用。
2 標(biāo)題
像素轉(zhuǎn)換(ArkTS)
3 介紹
本篇Codelab介紹像素單位的基本知識(shí)與像素單位轉(zhuǎn)換API的使用。通過(guò)像素轉(zhuǎn)換案例,向開(kāi)發(fā)者講解了如何使用像素單位設(shè)置組件的尺寸、字體的大小以及不同像素單位之間的轉(zhuǎn)換方法。主要功能包括:
- 展示了不同像素單位的使用。
- 展示了像素單位轉(zhuǎn)換相關(guān)API的使用。
相關(guān)概念
- [像素單位]:為開(kāi)發(fā)者提供4種像素單位,框架采用vp為基準(zhǔn)數(shù)據(jù)單位。
- [List]:列表包含一系列相同寬度的列表項(xiàng)。適合連續(xù)、多行呈現(xiàn)同類數(shù)據(jù),例如圖片和文本。
- [Column]:沿垂直方向布局的容器。
- [Text]:顯示一段文本的組件。
4 環(huán)境搭建
鴻蒙開(kāi)發(fā)指導(dǎo)文檔:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
軟件要求
- [DevEco Studio]版本:DevEco Studio 3.1 Release。
- OpenHarmony SDK版本:API version 9。
硬件要求
- 開(kāi)發(fā)板類型:[潤(rùn)和RK3568開(kāi)發(fā)板]。
- OpenHarmony系統(tǒng):3.2 Release。
環(huán)境搭建
完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建,本示例以RK3568開(kāi)發(fā)板為例,參照以下步驟進(jìn)行:
- [獲取OpenHarmony系統(tǒng)版本]:標(biāo)準(zhǔn)系統(tǒng)解決方案(二進(jìn)制)。以3.2 Release版本為例:
- 搭建燒錄環(huán)境。
- [完成DevEco Device Tool的安裝]
- [完成RK3568開(kāi)發(fā)板的燒錄](méi)
- 搭建開(kāi)發(fā)環(huán)境。
- 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備],完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
- 開(kāi)發(fā)環(huán)境配置完成后,請(qǐng)參考[使用工程向?qū)創(chuàng)建工程(模板選擇“Empty Ability”)。
- 工程創(chuàng)建完成后,選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
5 代碼結(jié)構(gòu)解讀
本篇Codelab只對(duì)核心代碼進(jìn)行講解,對(duì)于完整代碼,我們會(huì)在gitee中提供。
├──entry/src/main/ets // 代碼區(qū)
│ ├──common
│ │ ├──constants
│ │ │ └──Constants.ets // 常量類
│ │ └──utils
│ │ └──Logger.ets // 日志打印工具類
│ ├──entryability
│ │ └──EntryAbility.ts // 程序入口類
│ ├──pages
│ │ ├──ConversionPage.ets // 像素轉(zhuǎn)換頁(yè)面
│ │ ├──IndexPage.ets // 應(yīng)用主頁(yè)面
│ │ └──IntroductionPage.ets // 像素介紹頁(yè)面
│ ├──view
│ │ ├──ConversionItemComponment.ets // 像素轉(zhuǎn)換Item
│ │ └──IntroductionItemComponment.ets // 像素介紹Item
│ └──viewmodel
│ ├──ConversionItem.ets // 像素轉(zhuǎn)換信息類
│ ├──ConversionViewModel.ets // 像素轉(zhuǎn)換ViewModel
│ ├──IntroductionItem.ets // 像素介紹信息類
│ └──IntroductionViewModel.ets // 像素介紹ViewModel
└──entry/src/main/resources // 資源文件
`HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿`
6 像素單位介紹頁(yè)面
在像素單位介紹頁(yè)面,介紹了系統(tǒng)像素單位的概念,并在頁(yè)面中為Text組件的寬度屬性設(shè)置不同的像素單位,fp像素單位則設(shè)置為Text組件的字體大小。
// IntroductionPage.ets
// 設(shè)置Text組件的寬度為200px
Text('200px')
.textAlign(TextAlign.Center)
.backgroundColor($r('app.color.blue_background'))
.height($r('app.float.value_height'))
.width('200px')
...
// 設(shè)置Text組件的寬度為200vp
Text('200vp')
.textAlign(TextAlign.Center)
.backgroundColor($r('app.color.blue_background'))
.height($r('app.float.value_height'))
.width('200vp')
...
// 設(shè)置Text組件的寬度為200lpx
Text('200lpx')
.textAlign(TextAlign.Center)
.backgroundColor($r('app.color.blue_background'))
.height($r('app.float.value_height'))
.width('200lpx')
...
// 分別設(shè)置Text的字體大小為14fp, 24fp
Column() {
Text('這是一段為14fp的文字')
.fontSize('14fp')
...
Text('這是一段為24fp的文字')
.fontSize('24fp')
...
}
// ...
說(shuō)明:
- 為組件設(shè)置具體的寬高時(shí),可以不加“vp”(系統(tǒng)默認(rèn)單位為vp)。
- 為文字設(shè)置字體大小時(shí)可以不加“fp”(系統(tǒng)默認(rèn)為fp)。
7 像素轉(zhuǎn)換頁(yè)面
在像素轉(zhuǎn)換頁(yè)面,通過(guò)使用像素轉(zhuǎn)換API,實(shí)現(xiàn)不同像素單位之間的相互轉(zhuǎn)換功能。
// ConversionPage.ets
// vp轉(zhuǎn)換為px
Row()
.blueStyle()
.width(vp2px(60))
// px轉(zhuǎn)換為vp
Row()
.blueStyle()
.width(px2vp(60))
// fp轉(zhuǎn)換為px
Row()
.blueStyle()
.width(fp2px(60))
// px轉(zhuǎn)換為fp
Row()
.blueStyle()
.width(px2fp(60))
// lpx轉(zhuǎn)換為px
Row()
.blueStyle()
.width(lpx2px(60))
// px轉(zhuǎn)換為lpx
Row()
.blueStyle()
.width(px2lpx(60))
審核編輯 黃宇
-
鴻蒙
+關(guān)注
關(guān)注
57文章
2342瀏覽量
42818 -
HarmonyOS
+關(guān)注
關(guān)注
79文章
1974瀏覽量
30146
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論