给Web开发者的HarmonyOS指南01-文本样式

简介: 本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。

给Web开发者的HarmonyOS指南01-文本样式

本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。

本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。

开发环境准备

  • DevEco Studio 5.0.3
  • HarmonyOS Next API 15

鸿蒙前端封面图.png

页面结构 HTML 与 ArkUI

Web 开发中,HTML 文档结构由<html><head><body>等标签组成,其中<body>标签包含了页面中所有可见的内容。

而在 HarmonyOSArkUI 框架中,使用@Entry@Component装饰器定义组件,并通过build()方法定义页面内容。

基本结构对比

HTML文档结构:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <!-- 页面内容放这里 -->
</body>
</html>

ArkUI组件结构:

@Entry
@Component
struct MyComponent {
   
  build() {
   
    // 页面内容放这里
  }
}

文本处理对比

在Web开发中,我们习惯使用各种HTML标签来表示不同语义的文本内容,例如标题、段落、强调等。

而在HarmonyOS的ArkUI中,文本处理方式有所不同,主要依赖 Text 组件和 Span 组件。

基本概念对比

HTML概念 HarmonyOS/ArkUI概念
语义化标签 (h1-h6, p等) 无需语义化标签,统一使用Text组件
标签嵌套 组件链式调用和嵌套
样式通过CSS设置 样式通过链式API设置
内联样式 直接在组件后链式调用样式方法

文本显示对比

下面通过具体示例对比HTML和ArkUI的文本显示方式:

1. 标题和段落

HTML代码:

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<p>我是一个段落<br>我被换行了</p>

ArkUI代码:

// 鸿蒙系统中没有语义化标签的概念
// 所有文本都使用Text组件,通过样式区分不同级别
Text('我是一级标题')
  .fontSize(32) // 通过字体大小区分标题级别
  .fontWeight(FontWeight.Bold)

Text('我是二级标题')
  .fontSize(24)
  .fontWeight(FontWeight.Bold)

// 以此类推...

// 段落和换行
Text('我是一个段落\n我被换行了')
// 注意:在ArkUI中使用\n实现换行,而不是<br>标签

2. 文本样式

HTML代码:

<p>我是<strong>加粗</strong></p>
<p>我是<em>倾斜</em></p>
<p>我是<del>删除线</del></p>
<p>我是<ins>下划线</ins></p>

ArkUI代码:

// 在ArkUI中,样式化的文本使用Text和Span组合实现
Text() {
   
  Span('我是')
  Span('加粗')
    .fontWeight(FontWeight.Bold) // 对应HTML的<strong>
  Span('的文本')
}

Text() {
   
  Span('我是')
  Span('倾斜')
    .fontStyle(FontStyle.Italic) // 对应HTML的<em>
  Span('的文本')
}

Text() {
   
  Span('我是')
  Span('删除线')
    .decoration({
    type: TextDecorationType.LineThrough }) // 对应HTML的<del>
  Span('的文本')
}

Text() {
   
  Span('我是')
  Span('下划线')
    .decoration({
    type: TextDecorationType.Underline }) // 对应HTML的<ins>
  Span('的文本')
}

布局容器

在HTML中,我们使用 <div> 作为通用容器来组织内容。

在ArkUI中,主要使用 ColumnRow 等容器。

HTML代码:

<div class="column">
  <!-- 内容放这里 -->
</div>

<style>
  * {
    
    margin: 0;
    padding: 0;
    /* 为了与 ArkUI 盒子模型保持一致,所有 HTML 元素的 CSS 盒模型被设置为 border-box */
    box-sizing: border-box;
  }

  .column{
    
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    height: 100%;
    align-items: center;
  }
</style>

ArkUI代码:

// 默认为纵向排列的容器,类似于CSS的flex-direction: column
Column({
    space: 10 }) {
    // space参数设置子组件之间的间距,类似CSS的gap
  // 内容放这里
}
.width('100%') // 设置宽度,链式API调用
.height('100%') // 设置高度
.alignItems(HorizontalAlign.Center) // 水平对齐方式,类似CSS的align-items

关键区别总结

  1. 组件化思维
    • HTML使用标签表示不同语义
    • ArkUI使用组件表示UI元素,不强调语义
  2. 样式应用方式
    • HTML/CSS分离内容和样式
    • ArkUI使用链式API直接在组件上设置样式
  3. 布局方式
    • HTML依赖CSS盒模型和Flexbox
    • ArkUI内置容器组件如Column、Row实现布局
  4. 语法结构
    • HTML使用开闭标签和属性
    • ArkUI使用TypeScript语法和方法链

学习建议

  1. 理解组件化思维:将HTML标签概念转变为组件概念
  2. 掌握ArkUI基础组件
    • Text:文本组件
    • Span:文本片段
    • Column:纵向容器
    • Row:横向容器
  3. 链式API调用习惯:样式设置通过链式方法调用而非CSS属性
  4. 布局思维转变:使用容器组件的嵌套来实现复杂布局

总结

作为Web开发者,迁移到HarmonyOS开发需要转变思维模式,从标签和CSS的分离到组件和链式API的结合。虽然语法不同,但概念是相通的。只要掌握了基本对应关系,Web开发者能够快速适应HarmonyOS开发。

希望这篇 HarmonyOS Next 教程对你有所帮助,期待您的 👍点赞、💬评论、🌟收藏 支持。

目录
相关文章
|
3月前
|
设计模式 开发者 容器
23.[HarmonyOS NEXT Column案例四(下)] 响应式卡片内容实现与样式定制
在上一部分中,我们介绍了响应式设计的基本概念、Column组件的水平对齐能力以及如何通过条件渲染实现响应式宽度设置。本教程将继续深入探讨响应式卡片内容的详细实现,包括图片和文本组件的属性设置、卡片样式的定制以及完整代码的分析,帮助开发者掌握更全面的响应式设计技巧。
87 4
|
3月前
|
数据安全/隐私保护 UED 容器
17.[HarmonyOS NEXT Column案例一(下)] 表单组件的详细实现与样式定制
在上一篇教程中,我们介绍了Column组件的基本概念和参数设置。本篇将深入探讨登录表单中各个子组件的实现细节,包括Text、TextInput和Button组件的属性设置和样式定制,以及如何将这些组件组合成一个完整的登录表单界面。
103 4
|
3月前
|
存储 数据处理 UED
19.[HarmonyOS NEXT Column案例二(下)] 时间线组件的详细实现与样式定制
在上一篇教程中,我们介绍了Column组件的reverse属性及其在时间线应用中的基本用法。本篇将深入探讨时间线中各个子组件的实现细节,包括ForEach循环渲染、Row布局、Text组件的样式设置,以及如何通过这些组件构建一个完整的时间线界面。
100 2
|
3月前
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
164 1
|
6月前
鸿蒙开发:如何实现文本跑马灯效果
如果只是一个普通的跑马灯效果,而且Text文本组件中的TextOverflow.MARQUEE可以满足需求,以Text为主,如果你想控制文本的速度,暂停等功能,可以使用Marquee,如果你想实现复杂的场景滚动,比如图片,各种组件嵌套滚动,这种只能自己定义了。
182 1
鸿蒙开发:如何实现文本跑马灯效果
|
3月前
|
UED 容器
42.[HarmonyOS NEXT Row案例十] 精美图文混排卡片:左图标与右文本的完美结合
在移动应用界面设计中,图文混排卡片是一种常见且实用的UI组件,它通过将图标和文本组合在一起,以简洁明了的方式呈现信息。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个精美的图文混排卡片,实现左侧图标与右侧多行文本的布局效果。 图文混排卡片广泛应用于各类应用场景,如通知提醒、功能介绍、信息展示等。通过合理的布局和样式设置,可以提升用户体验和界面美观度。
91 4
|
3月前
|
UED 容器
39.[HarmonyOS NEXT Row案例七] 打造精美商品列表项:图文混排与多行文本的艺术
在电商应用和内容展示类应用中,商品列表项是一个核心UI组件,它需要在有限的空间内高效展示商品图片、标题、价格等多种信息。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件结合Column组件创建一个精美的商品列表项,实现图文混排与多行文本的完美展示。
78 1
|
5月前
|
人工智能
WEB CAD 利用AI编程实现多行文本的二次开发
本文介绍了在MxCAD插件中实现自定义编辑器实体类的功能,重点展示如何通过MxCADMText类在CAD中渲染和管理富文本。文章详细说明了注册同心圆实体文本的步骤,包括实现自定义文本类、注册自定义文本以及交互式修改参数的方法。此外,还扩展实践了粗糙度实体文本的注册与应用,涵盖构造粗糙度自定义实体文本类、注册及初始化过程,并通过示例图展示了运行效果。这些功能可帮助用户将复杂图形以文本形式插入多行文本中,提升项目设计效率。
|
6月前
|
API 开发者 UED
HarmonyOS:ArkTS 多态样式自学指南
本文介绍了 ArkTS 多态样式功能,帮助开发者为组件设置不同状态(如点击、按下、禁用等)下的样式。从 API Version 8 开始支持,API Version 11 引入 `attributeModifier` 动态设置属性。核心接口 `stateStyles` 支持多种状态,如 `normal`、`pressed`、`disabled` 等。文章通过示例代码展示了如何为 `Text` 和 `Radio` 组件设置多态样式,结合状态控制实现动态视觉反馈。掌握此功能可提升用户体验,推荐开发者根据需求灵活运用。
226 27
|
6月前
|
前端开发 API 开发者
给Web开发者的HarmonyOS指南02-布局样式
本系列教程适合鸿蒙 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。
269 5
给Web开发者的HarmonyOS指南02-布局样式

热门文章

最新文章