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)換方法。主要功能包括：

1. 展示了不同像素單位的使用。
2. 展示了像素單位轉(zhuǎn)換相關(guān)API的使用。
   

相關(guān)概念

• [像素單位]：為開(kāi)發(fā)者提供4種像素單位，框架采用vp為基準(zhǔn)數(shù)據(jù)單位。
• [List]：列表包含一系列相同寬度的列表項(xiàng)。適合連續(xù)、多行呈現(xiàn)同類(lèi)數(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ā)板類(lèi)型：[潤(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)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
3. 搭建開(kāi)發(fā)環(huán)境。
   1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
   2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(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               // 常量類(lèi)
│  │  └──utils
│  │     └──Logger.ets                  // 日志打印工具類(lèi)
│  ├──entryability
│  │  └──EntryAbility.ts                // 程序入口類(lèi)
│  ├──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)換信息類(lèi)
│     ├──ConversionViewModel.ets        // 像素轉(zhuǎn)換ViewModel
│     ├──IntroductionItem.ets           // 像素介紹信息類(lèi)
│     └──IntroductionViewModel.ets      // 像素介紹ViewModel
└──entry/src/main/resources             // 資源文件

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

6 像素單位介紹頁(yè)面

在像素單位介紹頁(yè)面，介紹了系統(tǒng)像素單位的概念，并在頁(yè)面中為T(mén)ext組件的寬度屬性設(shè)置不同的像素單位，fp像素單位則設(shè)置為T(mén)ext組件的字體大小。

// 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))

審核編輯 黃宇