AI 助理
备案控制台
开发者社区 云原生 文章 正文

HarmonyOS NEXT 实战系列02-布局基础

2025-03-16 166
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ArkTS通过声明式编程构建应用UI，支持属性、事件和子组件配置。线性布局（LinearLayout）使用Row和Column实现水平或垂直排列，提供多种对齐方式如Start、Center等。基础组件如Text、Button具备通用属性（width、height等）与尺寸单位（vp、fp）。样式设置涵盖文本样式、背景、间距、边框等。扩展机制包括@Extend重用样式、@Styles简化样式定义、@Builder复用UI元素，支持条件渲染（if/else）和循环渲染（ForEach）。这些功能帮助开发者高效构建灵活的用户界面。

ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。

  1. ArkUI-布局-线性布局
    线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

① 基本使用

Column({ space: 20 }) {
Row().width('90%').height(50).backgroundColor('#006699')
Row().width('90%').height(50).backgroundColor('#006699')
Row().width('90%').height(50).backgroundColor('#006699')
}.width('100%')

Row({ space: 20 }) {
Row().width('10%').height(150).backgroundColor('#006699')
Row().width('10%').height(150).backgroundColor('#006699')
Row().width('10%').height(150).backgroundColor('#006699')
}.width('90%')

② 子元素主轴排列方式

属性

描述

Start

首端对齐

Center

居中对齐

End

尾部对齐

Spacebetween

两端对齐子元素之间间距相等

SpaceAround

子元素两侧间距相等第一个元素到行首的距离和最后一个元素到行尾的距离
是相邻元素之间距离的一半

SpaceEvenly

相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

③ 子元素在交叉轴上的对齐方式

Column 组件 HorizontalAlign

Row 组件 VerticalAlign

④ 自适应拉伸

Row(){
  Text('关于微信')
  Blank()
  Text('版本 8.0.54')
  Text('  > ')
}
.width('100%')
.height(50)

⑤ 自适应缩放

父容器尺寸确定时，使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

Row() {
Column() {
Text('layoutWeight(1)')
.textAlign(TextAlign.Center)
}
.layoutWeight(1)
.backgroundColor('#0099ff')
.height('100%')

  Column() {
    Text('layoutWeight(2)')
      .textAlign(TextAlign.Center)
  }
  .layoutWeight(2)
  .backgroundColor('#00eeff')
  .height('100%')

  Column() {
    Text('layoutWeight(3)')
      .textAlign(TextAlign.Center)
  }
  .layoutWeight(3)
  .backgroundColor('#0099ff')
  .height('100%')

}
.height(100)
  1. ArkUI-布局-基础组件
    基础组件：Text Button Image TextInput ...

通用属性：width() height() size() backgroundColor() margin() padding() ...

尺寸单位：vp fp ...

vp
虚拟像素 (virtual pixel) 是一台设备针对应用而言所具有的虚拟尺寸 (区别于屏幕硬件本身的像素单位)。vp 是灵活的单位，它可在任何屏幕上缩放以具有统一的尺寸体量。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

使用虚拟像素，使 UI 元素在不同密度的设备上具有一致性大小视觉感受

fp
字体像素 (font pixel)默认情况下与 vp 相同，即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以 scale 系数，即 1 fp = 1 vp * scale。

  1. ArkUI-布局-常见样式
    ① 文本 参考链接

颜色、尺寸、字重、行高、溢出处理

// 颜色
Text('字体颜色')
.fontColor(Color.Pink)
// 尺寸
Text('字体大小')
.fontSize(30)
// 字重
Text('字体粗细')
.fontWeight(FontWeight.Bold)
// 行高
Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
.lineHeight(40)
// 溢出隐藏
Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
.maxLines(2)
// 超长文本使用省略号代替
.textOverflow({overflow: TextOverflow.Ellipsis})
② 背景 参考链接

颜色、图片
// 背景颜色
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
// 背景图片
Text('组件')
.width(300)
.height(100)
.backgroundImage($r('app.media.flower'))

③ 间距 参考链接

内间距、外间距
// 内间距
Text('文字')
.backgroundColor(Color.Pink)
// 单值：四个方向padding相同
.padding(20)
// 对象：单独设置某个方向
.padding({
top: 10,
right: 20,
bottom: 40,
left: 80
})
// 外间距
Text('文字')
.backgroundColor(Color.Orange)
// 单值：四个方向margin相同
.margin(20)
// 对象：单独设置某个方向
.margin({
top: 10,
right: 20,
bottom: 40,
left: 80
})
④ 边框 参考链接

边框、圆角
Text('边框')
.width(100)
.height(40)
// 红色 虚线 边框
.border({width: 1, color: 'red', style: BorderStyle.Dashed})
// 四个方向
.border({
width: {left: 1, top: 3, right: 5, bottom: 7},
color: {left: 'red', top: '#ff0', right: '#f60', bottom: '#ccc'},
style: {top: BorderStyle.Dashed, right: BorderStyle.Dotted}
})
Text('圆角')
.width(100)
.height(40)
.backgroundColor('#f60')
// 四个角一致
.borderRadius(5)
// 四个角不一致
.borderRadius({
topLeft: 5,
topRight: 10,
bottomRight: 20,
bottomLeft: 40
})
1.18 ArkUI-布局-@Extend
作用：扩展原生组件样式，用于样式的重用

语法：@Extend(UIComponentName) function functionName { ... }

代码：

import { promptAction } from '@kit.ArkUI'

@Extend(Button)
function customButton(color: Color, message: string) {
.fontColor(color)
.backgroundColor('#CCCCCC')
.fontSize(14)
.height(50)
.onClick(() => {
promptAction.showToast({ message: message })
})
}

@Entry
@Component
struct TestPage {
build() {
Column({ space: 20 }) {
// Button('按钮1')
// .fontColor(Color.Red)
// .backgroundColor('#CCCCCC')
// .fontSize(14)
// .height(50)
// .onClick(() => {
// promptAction.showToast({ message: '红色' })
// })
// Button('按钮2')
// .fontColor(Color.Green)
// .backgroundColor('#CCCCCC')
// .fontSize(14)
// .height(50)
// .onClick(() => {
// promptAction.showToast({ message: '绿色' })
// })
Button('按钮1')
.customButton(Color.Red, '红色')
Button('按钮2')
.customButton(Color.Green, '绿色')
}
.padding(50)
}
}

注意：

@Eextend 仅在全局定义，不支持组件内部，不支持 export

  1. ArkUI-布局-@Styles
    作用：可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用，仅支持通用属性和通用事件。

语法：

全局 @Styles function functionName() { ... }
组件 @Styles functionName(){ ... }
代码：

@Entry
@Component
struct TestPage {
@Styles
customButton() {
.width(200)
.height(100)
.borderRadius(20)
}

build() {
Column({ space: 20 }) {
// Text('灰色按钮')
// .width(200)
// .height(100)
// .borderRadius(20)
// .backgroundColor('#CCCCCC')
// .textAlign(TextAlign.Center)
// Image($r('app.media.flower'))
// .width(200)
// .height(100)
// .borderRadius(20)
Text('灰色按钮')
.customButton()
.backgroundColor('#CCCCCC')
.textAlign(TextAlign.Center)
Image($r('app.media.flower'))
.customButton()
}
.padding(50)
}
}

注意：@Styles 方法不能有参数

  1. ArkUI-布局-@Builder
    作用：轻量的UI元素复用机制@Builder，包含样式和事件

语法：

全局 @Builder function MyGlobalBuilderFunction() { ... }
使用 MyGlobalBuilderFunction()
私有 @Builder MyBuilderFunction() {}
使用 this.MyBuilderFunction()
代码：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct TestPage {
@Builder
navItem(icon: Resource, text: string) {
Column() {
Image(icon)
.width(24)
.aspectRatio(1)
Text(text)
.fontSize(12)
}
.layoutWeight(1)
.onClick(() => {
promptAction.showToast({ message: text })
})
}

build() {
Column({ space: 20 }) {
Row()
.layoutWeight(1)
Row() {
// Column(){
// Image($r('sys.media.ohos_ic_public_email'))
// .width(24)
// .aspectRatio(1)
// Text('邮件')
// .fontSize(12)
// }
// .layoutWeight(1)
// .onClick(() => {
// promptAction.showToast({ message: '邮件' })
// })
// Column(){
// Image($r('sys.media.ohos_ic_public_express'))
// .width(24)
// .aspectRatio(1)
// Text('快递')
// .fontSize(12)
// }
// .layoutWeight(1)
// .onClick(() => {
// promptAction.showToast({ message: '快递' })
// })
this.navItem($r('sys.media.ohos_ic_public_email'), '邮件')
this.navItem($r('sys.media.ohos_ic_public_express'), '快递')
}
.height(50)
.width('100%')
.backgroundColor('#cccccc')
}
.width('100%')
.height('100%')
}
}

注意：@Builder 是轻量UI封装，将来的自定义组件封装能力更强

  1. 条件&循环渲染
    ① 条件渲染

    // 铜牌 | 银牌 | 金牌
    // level: number = 0 | 1 | 2

    @Builder
    LevelBuilder(level: number) {
    if (level === 1) {
    Text('🥈')
    } else if (level === 2) {
    Text('🏅')
    } else {
    Text('🥉')
    }
    }
    Column({ space: 20 }) { 

     Row(){
   Text('小红')
   this.LevelBuilder(1)
 }
 Row(){
   Text('小娇')
   this.LevelBuilder(2)
 }

    }
    .layoutWeight(1)
    条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。
    ② 循环渲染 参考链接

ForEach(数组,组件生成函数(item,i),建值生成函数(item,i))

interface PlayerItem {
name: string
level: number
}

@Entry
@Component
struct TestPage {
// 铜牌 | 银牌 | 金牌
// level: number = 0 | 1 | 2

@Builder
LevelBuilder(level: number) {
if (level === 1) {
Text('🥈')
} else if (level === 2) {
Text('🏅')
} else {
Text('🥉')
}
}

playerList: PlayerItem[] = [
{ name: '小华', level: 2 },
{ name: '小红', level: 1 },
{ name: '小芳', level: 1 },
{ name: '小朱', level: 0 },
]

build() {
Column({ space: 20 }) {
ForEach(this.playerList, (item: PlayerItem) => {
Row() {
Text(item.name)
this.LevelBuilder(item.level)
}
})
}
.width('100%')
.height('100%')
}
}

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。

文章标签：
容器
开发者
关键词：
HarmonyOS实战
HarmonyOS next
HarmonyOS next实战布局
HarmonyOS实战布局
HarmonyOS next实战
1918010837065910
目录
相关文章
程序员潘Sir
|
4天前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战（九）：ArkTS渲染控制
ArkTS拓展了TypeScript，可以结合ArkUI进行渲染控制，是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
程序员潘Sir
29 4
程序员潘Sir
|
5天前
|
JavaScript
鸿蒙应用开发从入门到实战（八）：ArkTS自定义组件语法
ArkUI除系统预置的组件外，还支持自定义组件。使用自定义组件，可使代码的结构更加清晰，并且能提高代码的复用性。
程序员潘Sir
29 6
程序员潘Sir
|
1天前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战（十）：ArkUI图片组件Image
ArkUI提供了丰富的系统组件，用于制作鸿蒙原生应用APP的UI，本文主要讲解Image图片组件的使用。
程序员潘Sir
30 1
varin
|
5天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法，包括通过云端API和AppStorage两种方式，并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题，添加上传进度提示，支持自动登录判断，提升用户体验。
varin
31 0
varin
|
5天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程，涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参，并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性，助力开发者高效构建稳定云端服务。
varin
47 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
varin
|
5天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构，支持灵活的数据建模与权限管理，可通过AGC平台或本地项目初始化，实现数据的增删改查及端侧高效调用。
varin
26 0
varin
|
5天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念，并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容，同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
varin
53 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
varin
|
5天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术，涵盖@Extend、@Styles和@Builder的使用方法，并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果，结合生肖抽卡、小米轮播、回顶按钮等案例，展示实际应用技巧。
varin
39 0
游客ilymke6ydhgpg
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例：外卖App
仓颉语言实战分享，教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等，附完整代码示例。轻松掌握Scroll、List等组件使用技巧，提升HarmonyOS应用开发能力。
游客ilymke6ydhgpg
137 4
冬天不远了呀
|
2月前
|
安全 JavaScript API
鸿蒙开发核心要素
鸿蒙开发核心要素
冬天不远了呀
184 0

热门文章

最新文章

  • 1
    鸿蒙应用开发从入门到实战（二）：DevEco Studio工具安装
  • 2
    鸿蒙应用开发从入门到实战（一）：鸿蒙应用开发概述
  • 3
    鸿蒙应用开发从入门到实战（四）：ArkTS 语言概述
  • 4
    HarmonyOS APP应用开发项目- MCA助手（Day04持续更新中~）
  • 5
    HarmonyOS实现快递APP自动识别地址
  • 6
    鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
  • 7
    鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
  • 8
    鸿蒙应用开发从入门到实战（三）：第一个鸿蒙应用
  • 9
    鸿蒙应用开发从入门到实战（三）：第一个鸿蒙应用
  • 10
    鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
  • 1
    鸿蒙应用开发从入门到实战（十）：ArkUI图片组件Image
    30
  • 2
    鸿蒙应用开发从入门到实战（九）：ArkTS渲染控制
    29
  • 3
    鸿蒙应用开发从入门到实战（八）：ArkTS自定义组件语法
    29
  • 4
    HarmonyOS APP应用开发项目- MCA助手（Day04持续更新中~）
    61
  • 5
    鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
    31
  • 6
    鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
    47
  • 7
    鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
    26
  • 8
    HarmonyOS APP应用开发项目- MCA助手
    21
  • 9
    鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
    53
  • 10
    鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
    39

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    2025云栖大会，阿里云百炼邀请您的参与和见证