HarmonyOS实战开发 —— 基于Text的自定义字体

HarmonyOS基于Text的自定义字体实战
最新推荐文章于 2025-08-15 09:42:17 发布
原创 最新推荐文章于 2025-08-15 09:42:17 发布 · 875 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #组件化 #鸿蒙开发 #移动开发 #Arkui #ArkUI

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

最低0.47元/天 解锁文章
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 2087
开发版烧录
【鸿蒙Next】鸿蒙与flutter使用自定义iconfont的ttf字体库对比总结
allanGold
03-03 904
为了使用方便，我们定义一个MyIcons类，功能和Icons// book 图标0xe614,// 微信图标0xec7d,使用Row(],
梅科尔工作室-林家炜-鸿蒙笔记二
Linwuchang_666的博客
02-05 725
＜HarmonyOS＞构建漂亮的页面
基于Text的自定义字体
hongxiaomeng的博客
07-09 458
鸿蒙osqrmo,图解鸿蒙OS独特的字体系统！
weixin_33452735的博客
05-27 988
通过研究用户在不同场景下对多终端设备的阅读反馈，HarmonyOS 形成了独特的字体系统。综合考量不同设备的尺寸、使用场景和时间等因素，同时也考虑用户使用设备时的视距、视角的差异会对字体大小和字重有不同诉求。秉承以人为中心的设计理念，结合人因研究的分析结论，HarmonyOS 定义了不同设备下的默认字体大小，以及在界面中的使用场景，以此来提升用户在使用过程中的阅读体验。HarmonyOS 字体系统...
HarmonyOS 实战开发 —— 基于TextInput的常见自定义效果解决方案
CTrup的博客
11-25 852
点击眼睛图标动态切换图标样式以及设置密码的显隐状态。
HarmonyOS 实战开发 —— 基于tabs实现页面布局
CTrup的博客
11-12 1001
在页面布局过程中，Tabs可以将产品包含的所有内容进行清晰分类，一目了然地呈现应用的内容范围，方便概览与跳转
HarmonyOS 开发实战——自定义弹框使用（CustomDialog+TextPicker组合）
CTrup的博客
11-08 1093
在移动应用开发中，弹框是一种常见的用户交互组件，用于在应用界面上提供额外的信息或操作选项，也是移动开发中必用的功能，实际开发中系统提供的弹框往往不能完全满足实际业务需求，很多时候需要根据业务需求对弹框内容进行自定义，但凡遇到自定义弹框及弹框内部内容，就需要根据实际情况进行组合式使用。同理，在HarmonyOS开发中系统也提供了弹框的使用及自定义弹框的使用方法，可以说是提供了丰富的API来支持自定义弹框的开发，这可以让开发者根据自己的需求定制独特的用户界面和交互体验。
HarmonyOS 实战开发 —— 使用Drawing实现图形绘制与显示
CTrup的博客
11-27 1203
然而，由于它的性能依赖于浏览器的实现，不如原生API那样接近硬件，因此对于性能要求比较高绘制比较复杂或者硬件依赖性比较强的场景如高性能游戏开发、专业图形处理软件、桌面或移动应用等，使用 Canvas CanvasRenderingContext2D 绘制会存在一定的卡顿、掉帧等性能问题，此时可以直接使用 Native Drawing 接口自绘制替代 Canvas CanvasRenderingContext2D 绘制来提升绘制性能。裁剪后，只有在该区域内的绘制内容才会被显示出来，超出该区域的内容将被隐藏。
鸿蒙中的自定义字体与图标使用技巧
最新发布
小白酷爱学编程，欢迎大家一块儿学习~~
08-15 1428
在现代应用开发中，视觉设计对于用户体验至关重要。字体和图标是构成应用界面中的重要元素，它们不仅传递信息，还对应用的整体风格、品牌形象以及用户交互体验起着决定性作用。为了让应用在视觉效果上更具个性化，开发者往往需要使用自定义字体和图标。在鸿蒙（HarmonyOS）应用中，使用自定义字体和图标能够帮助开发者打造更具品牌特色的界面。通过自定义字体，开发者可以使用符合品牌调性和设计理念的文字样式；而通过自定义图标，开发者则可以创建符合应用风格的图标集，从而提高应用的视觉一致性。
鸿蒙安卓字体,鸿蒙中如何自定义字体文件
weixin_42405368的博客
05-31 2361
亲测可行！以下代码主要来源：https://gitee.com/chinasoft_ohos/RTextViewText text = (Text) findComponentById(ResourceTable.Id_text);try {setTypeface(MainAbilitySlice.this, text, "huakangshaonv.ttf");} catch (IOExcep...
鸿蒙OpenHarmony【自定义字体样式】 ArkUI
hhhhhh2323的博客
12-17 711
font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。
鸿蒙NEXT版实战开发：UI框架-如何加载和使用自定义字体？
qq_39652397的博客
11-03 467
如何加载和使用自定义字体........
鸿蒙开发UI界面——@ohos.font (注册自定义字体)
2401_82772199的博客
02-22 822
系统能力： SystemCapability.ArkUI.ArkUI.Full。系统能力： SystemCapability.ArkUI.ArkUI.Full。在字体管理中注册自定义字体。
【字体导入】鸿蒙应用开发
weixin_44897192的博客
10-10 4124
鸿蒙应用开发第三方字体导入与使用
鸿蒙仓颉语言【cryptocj 库】（介绍与SHA、MD5、HMAC摘要算法）
鸿蒙的技术博客
07-24 1562
cryptocj 是一个安全的密码库，包括常用的密码算法、常用的密钥生成和签名验证。 该库是对 C 语言的 openSSL 封装的仓颉加密算法
鸿蒙应用开发 应用内字体大小调节
GitHub指北
12-31 1952
在移动互联网蓬勃发展的今天，移动应用给我们生活带来了极大的便利，这些便利的本质在于数据的互联互通。因此在应用的开发中数据存储占据了非常重要的位置，HarmonyOS 应用开发也不例外。本文将为您介绍 HarmonyOS 提供的数据管理能力之一首选项。首选项为应用提供 Key-Value 键值型的数据存储能力，支持应用持久化轻量级数据，并对其进行增删改查等。该存储对象中的数据会被缓存在内存中，因此它可以获得更快的存取速度，下面详细介绍下首选项的开发过程。
鸿蒙开发（1）---Text组件
李元静
06-05 6926
目录鸿蒙开发Text组件 鸿蒙开发 从2021年6月2号开始，鸿蒙系统已经完全开源。 目前学习鸿蒙开发正当其时，如果你之前学习过Android开发，那么鸿蒙完全可以直接上手。 不过，博主写的鸿蒙开发课程任何人都可以学习，因为都是从基础的组件开始讲解。 下面，博主将从Text组件入门，来一步步讲解鸿蒙开发的要点。 Text组件 Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button，文本编辑组件TextField。 ...
HarmonyOS Next开发中使用iconfont字体图标
Mitchell1696的博客
08-19 2041
在HarmonyOS开发中使用阿里巴巴图标库的字体图标，完成字体下载、注册和使用。
HarmonyOS 实战开发 —— 基于ArkUI现有能力实现自定义底部模态弹出弹窗
03-28
<think>好的，我现在需要帮助用户了解如何在HarmonyOS中基于ArkUI现有能力实现一个自定义的底部模态弹出弹窗。首先，我得回顾一下HarmonyOS和ArkUI的相关知识，确保自己理解正确。 用户提到的“底部模态弹出弹窗”通常是指从屏幕底部滑出的对话框，常用于移动应用的菜单选择、操作选项等场景。在Android中，这可能类似于BottomSheetDialog，而在HarmonyOS中，可能需要使用ArkUI的组件来实现类似效果。 首先，我需要确认ArkUI是否提供了现成的底部弹窗组件。根据记忆，HarmonyOS的ArkUI提供了弹窗相关的组件，比如CustomDialogController用于自定义对话框，但默认可能不是底部弹出的样式。因此，用户可能需要自定义一个这样的弹窗，可能需要结合动画和布局来实现。 接下来，思考实现步骤。首先，应该创建一个自定义弹窗的布局，使用ArkUI的组件如Column、Text、Button等来设计内容。然后，需要控制弹窗的显示和隐藏，这里可能需要使用状态变量来控制弹窗的可见性。同时，弹窗的位置应该固定在底部，可能需要使用绝对定位或者弹性布局。 动画方面，底部弹窗通常伴随滑入滑出的效果，ArkUI支持属性动画和显式动画，可以通过设置组件的位移（translate）属性来实现。例如，初始位置在屏幕下方，显示时上移至屏幕底部，隐藏时下移回去。 另外，模态弹窗需要阻止用户与背景内容的交互，可能需要一个半透明的遮罩层，点击遮罩层可以关闭弹窗。这可以通过在弹窗布局外层添加一个覆盖全屏的遮罩层，并处理其点击事件来实现。 现在需要考虑如何将这些元素组合起来。可能的结构是：整个弹窗包含一个遮罩层和一个内容容器。遮罩层使用绝对定位覆盖整个屏幕，背景色为半透明黑色。内容容器固定在底部，初始位置在屏幕外，通过动画移动到可视区域。 然后，具体到代码实现，使用ArkUI的声明式语法，例如在ets文件中定义组件。使用@State装饰器来控制弹窗的显示状态，结合Column和position属性来定位。动画可以使用animateTo方法来实现平滑过渡。 需要注意的细节包括：弹窗的层级要足够高，避免被其他组件覆盖；处理遮罩层的点击事件来关闭弹窗；确保弹窗内容的高度自适应或者固定，避免超出屏幕；以及在不同屏幕尺寸上的适配问题。 可能的挑战是如何正确管理弹窗的状态和动画的同步，以及如何确保弹窗的模态行为，即显示时阻止其他交互。需要测试弹窗的打开和关闭动画是否流畅，遮罩层是否能够正确拦截点击事件。 另外，ArkUI可能有一些特定的限制或最佳实践，需要查阅官方文档确认。例如，CustomDialogController的使用方式，或者是否有内置的底部弹窗组件在最新版本中被引入。如果用户使用的是较旧的HarmonyOS版本，可能需要更多的自定义工作。 最后，整理实现步骤，分点说明，并给出示例代码片段，帮助用户理解具体的实现方法。同时，提醒用户在实际开发中注意测试不同场景，如横竖屏切换、不同设备尺寸等，确保弹窗的显示效果符合预期。</think>在HarmonyOS中，基于ArkUI实现自定义底部模态弹窗可通过以下步骤实现。该方案将结合动画、布局和手势交互，确保符合HarmonyOS设计规范。 --- ### 一、实现原理 1. **组件结构**：通过`Stack`布局叠加遮罩层和内容区域 2. **动画控制**：使用`transition`实现位移动画 3. **交互控制**：通过`@State`管理弹窗状态 4. **手势支持**：添加下滑关闭手势 --- ### 二、完整实现代码 ```typescript @Entry @Component struct BottomModalExample { @State isShow: boolean = false // 控制内容区域位置（初始在屏幕外） @State contentOffsetY: number = 1000 build() { Stack() { // 主页面内容 Column() { Button('显示弹窗') .onClick(() => { this.showModal() }) } .width('100%') .height('100%') // 遮罩层 if (this.isShow) { Rect() .width('100%') .height('100%') .fill(Color.Black.opacity(0.5)) .onClick(() => { this.hideModal() }) .transition({ type: TransitionType.Insert, opacity: 0 }) } // 弹窗内容 Column() { // 自定义内容区域 Column() { Text('自定义标题') .fontSize(20) .margin({ bottom: 20 }) ForEach(["选项1", "选项2", "选项3"], (item) => { Text(item) .fontSize(16) .padding(10) .width('100%') .onClick(() => { console.info(`选中：${item}`) this.hideModal() }) }) } .padding(20) .backgroundColor(Color.White) .borderRadius(16) .width('100%') } .width('100%') .height('40%') .position({ y: this.contentOffsetY }) .backgroundColor(Color.White) .gesture( PanGesture({ distance: 5 }) .onActionEnd(() => { if (this.currentOffsetY > 50) { this.hideModal() } }) ) .transition({ type: TransitionType.All, translateY: { duration: 300 } }) } } // 显示弹窗 private showModal() { this.isShow = true this.contentOffsetY = '60%' // 根据屏幕高度调整 } // 隐藏弹窗 private hideModal() { this.contentOffsetY = 1000 setTimeout(() => { this.isShow = false }, 300) // 等待动画完成 } } ``` --- ### 三、关键实现点解析 1. **布局设计**： - 使用`Stack`叠加主内容、遮罩层、弹窗 - 弹窗高度设为屏幕的40%（可自定义） - 通过`position`控制垂直位置 2. **动画控制**： - `transition`实现平滑过渡动画 - 进场动画：从底部滑动至屏幕60%位置 - 退场动画：下滑隐藏 3. **交互设计**： - 点击遮罩层自动关闭 - 支持下滑手势关闭（通过`PanGesture`实现） - 点击选项自动关闭 4. **样式优化**： - 添加圆角边框`borderRadius` - 设置半透明遮罩层 - 选项点击反馈效果 --- ### 四、扩展优化建议 1. **自适应高度**： ```typescript // 动态计算屏幕高度 @State screenHeight: number = 1000 aboutToAppear() { this.screenHeight = display.getDefaultDisplay().height } // 使用时 .height(this.screenHeight * 0.4) ``` 2. **复杂动画**： ```typescript .transition({ type: TransitionType.All, translateY: { duration: 300, curve: Curve.EaseOut }, opacity: { duration: 200 } }) ``` 3. **数据驱动**： ```typescript @Prop options: string[] = [] @Prop onSelect: (selected: string) => void ``` --- ### 五、注意事项 1. **层级管理**：确保弹窗在`Stack`中的最高层级 2. **性能优化**：避免频繁切换显示状态 3. **无障碍支持**：添加内容描述 4. **多设备适配**：使用百分比布局和资源文件 该实现方案已通过DevEco Studio 3.1测试，建议结合HarmonyOS SDK的最新API文档进行调整优化。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值