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

简介: 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)
AI 代码解读

⑤ 自适应缩放

父容器尺寸确定时,使用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)
AI 代码解读
  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)
     }
    
    AI 代码解读

    }
    .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父容器组件中的子组件。

目录
打赏
0
1
1
0
28
分享
相关文章
HarmonyOS NEXT 实战系列09-生命周期
页面与组件生命周期介绍:页面生命周期(@Entry装饰)包含onPageShow、onPageHide、onBackPress等接口,分别在页面显示、隐藏和返回按钮点击时触发;组件生命周期(@Component装饰)包含aboutToAppear和aboutToDisappear,在组件创建与销毁时回调。示例代码展示了生命周期函数的使用场景及执行时机,帮助开发者更好地管理页面和组件状态。
HarmonyOS NEXT 实战系列09-生命周期
HarmonyOS NEXT 实战系列10-网络通信
本文介绍了网络通信相关知识,包括HTTP协议的工作原理、鸿蒙系统中HTTP模块的使用方法、Promise异步操作处理机制及async/await语法糖的应用,以及JSON数据格式的语法规则与转换方法。重点讲解了HTTP请求响应流程、鸿蒙开发中的网络权限申请与代码实现、Promise三种状态及创建方式,并通过示例说明异步编程技巧和JSON在数据传递中的应用。
24 10
|
2天前
|
HarmonyOS NEXT 实战系列-综合案例新闻页
本示例展示了如何通过 `ForEach` 遍历数据并结合 HTTP 请求动态渲染新闻列表。首先定义了 `News` 接口描述数据结构,接着在组件中使用 `List` 和 `ForEach` 渲染新闻项,包含标题、来源、评论数、时间和图片等信息。同时,通过 `http.createHttp()` 获取远程数据并更新列表。代码结构清晰,适配动态数据展示需求。
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
20 3
|
2天前
HarmonyOS NEXT 实战系列08-案例微博导航设置
本示例展示了如何通过 `PersistentStorage` 和 `AppStorage` 实现全局 UI 状态的持久化,并结合 `Tabs` 组件创建动态切换的首页导航栏。用户可在“视频”与“超话”间切换,状态自动保存。同时,通过 `router` 跳转至导航设置页 (`NavSetting.ets`) 完成选项修改,支持返回操作及对齐布局调整。代码涵盖基础组件用法,适合学习跨页面状态管理与 UI 设计。
HarmonyOS NEXT 实战系列07-应用状态
AppStorage 是应用全局的 UI 状态存储,支持跨 Ability 数据共享,提供 `setOrCreate` 和 `get` 方法管理全局状态,并通过 `@StorageProp` 和 `@StorageLink` 实现单向或双向数据同步至组件。PersistentStorage 基于 AppStorage,提供状态变量的持久化能力,可将选定属性保存到设备磁盘,但写操作同步执行,建议持久化数据小于 2KB,以避免影响 UI 渲染性能。相关持久化文件位于 `/data/app/el2/.../persistent_storage` 目录下。
uniapp 极速上手鸿蒙开发
uniapp 自版本 `4.28.2024092502` 起支持鸿蒙应用开发,现版本 `4.36.2024112817` 同时支持鸿蒙应用和元服务开发。本文介绍使用 HBuilderX 4.24+ 和 DevEco Studio 进行环境配置、项目创建及运行的详细步骤,涵盖从 AGC 平台新建项目、配置证书到最终运行项目的全流程,帮助开发者快速上手鸿蒙开发。注意:HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台,需使用真机调试。
114 85
uniapp 极速上手鸿蒙开发
|
5天前
|
鸿蒙开发:自定义一个搜索模版
这样的一个模版,可以简单的分为,三个部分,分别是上边的搜索框,中间的历史搜索和下边的热门搜索,搜索框,我们直接可以使用系统的组件Search,历史搜索,由于是内容不一的搜索的内容,这里使用弹性布局Flex,下边的热门搜索,条目规格一致,这里我们直接使用Grid网格组件。
49 23
鸿蒙开发:自定义一个搜索模版
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
44 18
鸿蒙开发:ArkTs语言注释
鸿蒙开发:权限管理之权限声明
本文,主要简单概述了为什么要有权限管理,以及权限管理的声明原则,这些都是基本的概念内容,大家做为了解即可,重要的是怎么声明权限,在什么位置声明权限,这一点需要掌握。
47 16
鸿蒙开发:权限管理之权限声明

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    27
  • 2
    uniapp 极速上手鸿蒙开发
    114
  • 3
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    27
  • 4
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
    27
  • 5
    鸿蒙开发:了解@Builder装饰器
    26
  • 6
    鸿蒙开发:wrapBuilder传递参数
    10
  • 7
    鸿蒙web加载本地网页资源异常
    12
  • 8
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    11
  • 9
    鸿蒙H5离线包技术分享
    4
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    10
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等