方舟开发框架(简称:ArkUI),是一套 构建HarmonyOS应用 界面 的框架。
构建页面的最小单位就是 “组件”。
组件名(参数) {
内容
}
.属性1()
.属性2()
.属性N()
系统组件
Text 显示文本
Image 显示图片
Column 列,内容垂直排列
Row 行,内容水平排列
Button 按钮
@Entry
@Component
struct Index {
build() {
Column() {
Text('小说简介')
Row() {
Text('都市')
Text('生活')
Text('情感')
Text('男频')
}
}
}
}
通用属性
属性 描述
width 宽度
height 高度
backgroundColor 背景色
@Entry
@Component
struct Index {
build() {
Column() {
Text('小说简介')
.width('100%')
.height(40)
Row() {
Text('都市')
.width(50)
.height(30)
.backgroundColor(Color.Orange)
Text('生活')
.width(50)
.height(30)
.backgroundColor(Color.Pink)
Text('情感')
.width(50)
.height(30)
.backgroundColor(Color.Yellow)
Text('男频')
.width(50)
.height(30)
.backgroundColor(Color.Gray)
}
// 宽度100%后, 内容居左对齐
.width('100%')
}
}
}
尺寸单位
- px :物理像素,也叫设备像素,设备实际拥有的像素点(出场设置、分辨率单位)
问题:如果用 px 作为宽高单位,又想保证不同显示能力的设备,视觉效果一样大,
就需要针对每个设备单独编码,设置尺寸,非常麻烦。
能不能有个单位,帮我们自动根据显示能力,来进行转换大小,保证多设备视觉效果一致呢? - vp :virtual pixel 虚拟像素 【推荐使用】
● 会根据不同设备的显示能力,自动进行转换成对应 px 物理像素,保证不同设备视觉一致
● 当数值不带单位时,默认单位 vp
● 基于目前预览器和常规手机的显示能力,vp 和 px 的对应关系,大约为 3 倍,1vp ≈ 3px (超清屏手机)
文本属性
使用:.属性(参数)
属性 描述
fontSize 字体大小
fontColor 字体颜色
fontStyle 字体样式
fontWeight 字体粗细
lineHeight 文本行高
decoration 文本修饰线及颜色
textAlign 水平方向Text对齐方式
align 垂直方向对齐方式
textIndent 文本首行缩进
textOverflow 设置文本超长时的显示方式
maxLines 设置文本的最大行数
字体颜色
属性:fontColor(颜色色值)
色值:
● 颜色枚举值:Color.xx,例如:Color.Pink
● 十六进制(HEX)颜色,例如:'#ffffff’或“#fff”
● rgb() 或 rgba()颜色
○ rgb(r, g, b), 取值为 0 ~ 255
○ rgba(r, g, b, a),a 为透明度,取值范围 0 ~ 1
字体样式
作用:设置字体是否倾斜
属性:fontStyle()
参数:枚举FontStyle
● Normal:正常字体(不倾斜)
● Italic:斜体
@Entry
@Component
struct Index {
build() {
Column() {
Text('HarmonyOS 是新一代的智能终端操作系统,为不同设备的智能化、互联与协同提供了统一的语言。带来简洁,流畅,连续,安全可靠的全场景交互体验。')
.fontSize(14)
.textIndent(28)
}
}
}
@Entry
@Component
struct Index {
build() {
Column() {
Text(‘HarmonyOS 是新一代的智能终端操作系统,为不同设备的智能化、互联与协同提供了统一的语言。带来简洁,流畅,连续,安全可靠的全场景交互体验。’)
.fontSize(14)
.textIndent(28)
.maxLines(2)
// 超长文本使用省略号代替
.textOverflow({overflow: TextOverflow.Ellipsis})
// 裁剪超长文本
.textOverflow({overflow: TextOverflow.Clip})
// 超长文本滚动显示
.textOverflow({overflow: TextOverflow.MARQUEE})
}
}
}