Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“35e9551b1e94751283e71dca202cd48b31cfcbac”上不存在“...task-management/efficiency-resources-apply-dev-guide.md”
未验证 提交 b08f5a4a 编写于 作者: D duangavin123 提交者： Gitee
浏览文件
操作

update zh-cn/third-party-cases/pixel-format-transfer.md. 

Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
Signed-off-by: Nduangavin123 <duanxichao@huawei.com>
上级 274b3aba
隐藏空白更改
内联 并排
Showing with 96 addition and 96 deletion
zh-cn/third-party-cases/pixel-format-transfer.md
浏览文件 @ b08f5a4a
# 像素转换（ArkTs） # 像素单位转换
在日常应用页面布局设计时，开发者需要知道每个组件的样式及位置，这时就需要了解下长度单位及相互转换方法，ArkUI 开发框架提供了4种像素单位供开发者使用，分别是： px 、 vp 、 fp 和 lpx ，框架采用 vp 为基准数据单位，本篇就简单为大家介绍下像素单位的基本知识与像素单位转换API的使用。通过像素转换案例，向开发者讲解了如何使用像素单位设置组件的尺寸、字体的大小以及不同像素单位之间的转换方法。 在日常应用页面布局设计时，开发者需要知道每个组件的样式及位置，这时就需要了解下像素单位及相互转换方法，ArkUI 开发框架提供了4种像素单位供开发者使用，分别是： px 、 vp 、 fp 和 lpx ，框架采用 vp 为基准数据单位，本篇就简单为大家介绍下像素单位的基本知识与像素单位转换API的使用。通过像素转换案例，向开发者讲解了如何使用像素单位设置组件的尺寸、字体的大小以及不同像素单位之间的转换方法。
## 效果呈现 ## 效果呈现
本例最终效果如下： 本例最终效果如下：
...@@ -150,112 +150,112 @@ ...@@ -150,112 +150,112 @@
具体代码如下： 具体代码如下：
```ts ```ts
// entry/src/main/ets/pages/IntroducitonPages.ets // entry/src/main/ets/pages/IntroducitonPages.ets
import IntroductionViewModel from '../viewmodel/IntroductionViewModel'; import IntroductionViewModel from '../viewmodel/IntroductionViewModel';
interface IntroductionItem { interface IntroductionItem {
name: string; name: string;
title: Resource; title: Resource;
subTitle: Resource; subTitle: Resource;
value: string; value: string;
smallFontSize: number; smallFontSize: number;
largeFontSize: number; largeFontSize: number;
} }
@Extend(Text) function titleTextStyle() { @Extend(Text) function titleTextStyle() {
.fontColor($r('app.color.title_font')) .fontColor($r('app.color.title_font'))
.fontFamily('HarmonyHeiTi_Medium') .fontFamily('HarmonyHeiTi_Medium')
.fontWeight(500) .fontWeight(500)
} }
@Entry @Entry
@Component @Component
struct IntroductionPage { struct IntroductionPage {
build() { build() {
Column() { Column() {
Navigation() { Navigation() {
List({ space: 12 }) { List({ space: 12 }) {
//通过ForEach循环渲染Item，构建像素介绍页面 //通过ForEach循环渲染Item，构建像素介绍页面
ForEach(IntroductionViewModel.getIntroductionList(), (item: IntroductionItem) => { ForEach(IntroductionViewModel.getIntroductionList(), (item: IntroductionItem) => {
//渲染每个Item //渲染每个Item
ListItem() { ListItem() {
Column() { Column() {
Text(item.name) Text(item.name)
.titleTextStyle()
.fontSize('16fp')
Text(item.title)
.titleTextStyle()
.fontSize('14fp')
.fontFamily('HarmonyHeiTi')
.lineHeight('20fp')
.margin({ top: '8vp'})
.fontWeight(400)
// subTitle非空，添加Text组件，显示subTitle内容，同时添加样式；不存在则不显示
if (item.subTitle) {
Text(item.subTitle)
.titleTextStyle()
.opacity(0.6)
.lineHeight('16fp')
.fontSize('12fp')
.fontFamily($r('app.string.HarmonyHeiTi'))
.margin({ top: '20vp' })
.fontWeight(400)
}
// value非空，添加Text组件且通过宽度属性设置不同的像素单位
if (item.value.length > 0) {
Text(item.value)
.titleTextStyle() .titleTextStyle()
.fontColor($r('app.color.item_background'))
.fontSize('16fp') .fontSize('16fp')
.textAlign(TextAlign.Center) Text(item.title)
.backgroundColor($r('app.color.blue_background')) .titleTextStyle()
.height('28vp') .fontSize('14fp')
.width(item.value) .fontFamily('HarmonyHeiTi')
.borderRadius('4vp') .lineHeight('20fp')
.margin({ top: '12vp' }) .margin({ top: '8vp'})
// value为空，添加两个text组件，使用fp像素单位设置为Text组件的字体大小 .fontWeight(400)
} else { // subTitle非空，添加Text组件，显示subTitle内容，同时添加样式；不存在则不显示
Column() { if (item.subTitle) {
Text($r('app.string.font_desc', item.smallFontSize)) Text(item.subTitle)
.titleTextStyle() .titleTextStyle()
.fontSize(item.smallFontSize) .opacity(0.6)
Text($r('app.string.font_desc', item.largeFontSize)) .lineHeight('16fp')
.fontSize('12fp')
.fontFamily($r('app.string.HarmonyHeiTi'))
.margin({ top: '20vp' })
.fontWeight(400)
}
// value非空，添加Text组件且通过宽度属性设置不同的像素单位
if (item.value.length > 0) {
Text(item.value)
.titleTextStyle() .titleTextStyle()
.fontSize(item.largeFontSize) .fontColor($r('app.color.item_background'))
.margin({ top: '6vp' }) .fontSize('16fp')
.textAlign(TextAlign.Center)
.backgroundColor($r('app.color.blue_background'))
.height('28vp')
.width(item.value)
.borderRadius('4vp')
.margin({ top: '12vp' })
// value为空，添加两个text组件，使用fp像素单位设置为Text组件的字体大小
} else {
Column() {
Text($r('app.string.font_desc', item.smallFontSize))
.titleTextStyle()
.fontSize(item.smallFontSize)
Text($r('app.string.font_desc', item.largeFontSize))
.titleTextStyle()
.fontSize(item.largeFontSize)
.margin({ top: '6vp' })
}
.alignItems(HorizontalAlign.Start)
.backgroundColor($r('app.color.font_background'))
.width('100%')
.borderRadius('12vp')
.padding('12vp')
.margin({ top: '12vp' })
} }
.alignItems(HorizontalAlign.Start)
.backgroundColor($r('app.color.font_background'))
.width('100%')
.borderRadius('12vp')
.padding('12vp')
.margin({ top: '12vp' })
} }
.alignItems(HorizontalAlign.Start)
.width('100%')
.padding('12vp')
.borderRadius('24vp')
.backgroundColor('#FFFFFF')
} }
.alignItems(HorizontalAlign.Start) .padding({
.width('100%') left: '12vp',
.padding('12vp') right: '12vp'
.borderRadius('24vp') })
.backgroundColor('#FFFFFF')
}
.padding({
left: '12vp',
right: '12vp'
}) })
}) }
.width('100%')
.height('100%')
} }
.width('100%') .titleMode(NavigationTitleMode.Mini)
.height('100%') .title('像素介绍')
} }
.titleMode(NavigationTitleMode.Mini) .backgroundColor($r('app.color.page_background'))
.title('像素介绍') .width('100%')
.height('100%')
} }
.backgroundColor($r('app.color.page_background'))
.width('100%')
.height('100%')
} }
}
``` ```
3. 像素转换页面创建。 3. 像素转换页面创建。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或