外观
界面开发 - 组件
学习界面开发,工具仍然是IDE,代码写在build函数中,然后在预览中查看界面。
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() { // 在这里面写代码
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
布局思路
编写界面应用时,应该先考虑排版,后填充内容。
ArkUI(方舟开发框架)是一套构建鸿蒙应用界面的框架。
构建页面的最小单位就是组件。
组件分为基础组件(如按钮、图片、文字)和容器组件(如行和列)。
容器组件的语法为容器组件(){ 组件内容 },基础组件的语法为基础组件(参数)。
下面我们修改默认代码,对布局有一个基本的认识。
@Entry
@Component
struct Index {
build() {
Column() {
Text("学生列表")
Row() {
Text("张三")
Text("李四")
Text("王五")
}
}
}
}
需要注意,build()内部只能有一个根节点,不能再添加一个并列的容器组件。
组件属性方法
组件的属性方法可以更改组件的外观。语法:
组件() {
// 组件内容
}.属性方法(参数)
.属性方法(参数) //...| 组件属性方法 | 描述 |
|---|---|
| .width(200) | 宽度 |
| .height(200) | 高度 |
| .backgroundColor(Color.pink) | 背景色 |
| .fontSize(50) | 字体大小 |
| .fontWeight(FontWeight.Bold) | 字体粗细 |
下面接着上方的代码为这些字体加一些样式。
@Entry
@Component
struct Index {
build() {
Column() {
Text("学生列表")
Row() {
Text("张三").backgroundColor(Color.Red)
.fontColor(Color.Orange)
.fontSize(50)
Text("李四").backgroundColor(Color.Blue)
.fontColor(Color.Pink)
.fontStyle(FontStyle.Italic)
Text("王五")
.backgroundColor(Color.Gray)
.fontWeight(FontWeight.Bolder)
}
}
}
}
字体颜色
语法:.fontColor(颜色值)。其中,颜色值可以是Color的枚举值,或者为#开头的十六进制颜色图,和CSS一样。如:
Text("灰色").fontColor(Color.Gray)
Text("红色").fontColor("#FF0000")
文字溢出省略号、行高
- 文字溢出省略号
语法:.textOverflow({ overflow: Textflow.XXX })。需要配合.maxLines(行数)使用。
XXX的可选值有Clip、Ellipsis、None。
- 行高
语法:.lineHeight(数字)
Text("HarmonyOS开发初体验")
.fontSize(20)
.fontWeight(FontWeight.Bolder)
.width('100%')
.lineHeight(30)
Text("方舟开发框架(简称ArkTS)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。")
.textOverflow({overflow: TextOverflow.Ellipsis})
.maxLines(2)
图片组件
图片组件用于向界面中展示图片。图片的路径一般放在项目目录下的main/resources/base/media目录中。
图片组件用Image表示。若我们的图片位于本地且放在了上述目录下,那么使用图片组件的语法就是Image($r('app.media.文件名'))。
// 使用网络上的图片
Image("https://imqi1.com/static/img/imqi1-144.png")
.width('50%')
Text("ImQi1图标")若要使用本地图片,则需要将图片放入src/main/resources/base/media目录下,然后代码中使用$r来引用本地图片。
Image($r("app.media.icon")).width('50%')
Text("应用图标")输入框
输入框可以接收用户输入的文本,并将其存储到变量中。输入框使用TextInput函数,语法为TextInput({placeholder: '占位符文本'}).属性方法()。
.type(InputType.XXX)可以设置输入框的类型。
TextInput({placeholder: "请输入用户名"})
TextInput({placeholder: "请输入密码"}).type(InputType.Password)
按钮
按钮是可以点击的组件,创建语法是Button("按钮文本")。
TextInput({placeholder: "请输入用户名"}).width("80%")
TextInput({placeholder: "请输入密码"}).type(InputType.Password).width("80%")
Button("登录").width("40%")
设计资源 - svg图标
svg是一种向量形式的图片,它对于png、jpg等图片格式相比,可以任意放大缩小且不失真,可以改颜色。
我们可以从鸿蒙设计官网下载图标。网址为https://developer.harmonyos.com/cn/design/harmonyos-icon/。
选好图标后,将图标复制到src/main/resources/base/media目录下,然后参照上方的语法引用即可。
布局组成
和H5界面开发一样,一个盒子由边框、内边距和组件内容组成。盒子与盒子之间还有外边距来互相隔开一段距离。
我们可以为组件添加内边距来让组件内容和边框存在一段距离,语法为.padding(距离)。
Text("组件内容")
.fontSize(50)
.backgroundColor(Color.Gray)
.fontColor(Color.White)
.padding(20)
我们也可以为padding传入一个对象,分别设置四个方向的距离。语法如下。
Text("组件内容")
.fontSize(50)
.backgroundColor(Color.Gray)
.fontColor(Color.White)
.padding({
right: 10,
bottom: 20,
left: 30,
top: 40
})
设置外边距margin也是这样的语法,这里不再演示。
布局组成中的边框
边框的属性要更多一些,因为边框是由线条组成的,线条可以具有宽度、颜色、风格等。
设置边框的语法为.border(样式),其中样式需要是一个对象。
Text("设置四周同样的边框")
.padding(20)
.border({
width: 4, //设置宽度
color: Color.Red, //设置红色
style: BorderStyle.Solid //设置实线
})初次之外,还可以为每个边框单独设置样式。
Text("四个边框单独设置")
.padding(20)
.border({
width: {
left: 2,
right: 4
},
color: {
left: Color.Red,
right: Color.Blue
},
style: {
left: BorderStyle.Dashed, //虚线
right: BorderStyle.Dotted //省略号样式
}
})组件圆角
组件圆角的语法为.borderRadius(参数)。参数可以使用数值,代表每个方向的圆角大小,也可以使用一个对象,单独设置每个角。对象可用的属性分别是topLeft、topRight、bottomLeft、bottomRight,分别代表四个方向。
Text("没有圆角")
.padding(20)
.backgroundColor(Color.Blue)
.fontColor(Color.White)
Text("使用数值设置圆角")
.backgroundColor(Color.Gray)
.padding(20)
.borderRadius(20)
Text("四个圆角单独设置")
.backgroundColor(Color.Green)
.borderRadius({
topLeft: 10,
topRight: 20,
bottomLeft: 30,
bottomRight: 40
}).padding(20)
.width(200)
.height(70)
背景图片
背景样式包含背景色、背景图,可以为背景图设置位置、尺寸等等。
背景图使用.backgroundImage(背景图地址[, 是否平铺])来设置。背景图地址可以使用$r引用资源文件夹文件,也可以使用URL引用远程地址的资源。是否平铺是一个可选参数,可选值为ImageRepeat的几个值,有X、Y、XY和NoRepeat。
Text("设置背景图")
.padding(50)
.border({
width: 1,
style: BorderStyle.Dashed
}).backgroundImage($r("app.media.icon"))
Text("设置背景图")
.padding(50)
.border({
width: 1,
style: BorderStyle.Dashed
}).backgroundImage($r("app.media.icon"), ImageRepeat.XY)
设置背景图具体位置
背景图位置使用.backgroundImagePosition(坐标对象 或 位置枚举)来设置。
Text("设置背景图")
.padding(50)
.border({
width: 1,
style: BorderStyle.Dashed
}).backgroundImage($r("app.media.icon"))
.backgroundImagePosition({x: 100, y: 100})
也可以使用位置枚举,如让它居中。
Text("设置背景图")
.padding(50)
.border({
width: 1,
style: BorderStyle.Dashed
})
.backgroundImage($r("app.media.icon"))
.backgroundImagePosition(Alignment.Center)
Alignment的属性包含:
TopStart,
Top,
TopEnd,
Start,
Center,
End,
BottomStart,
Bottom,
BottomEnd。
单位问题与vp2px
由于不同终端的分辨率和长宽有很大差别,导致像素块大小不一致。若简单地以像素作为显示单位,则在不同终端的显示大小或比例会有很大差别。由此产生了一种虚拟像素单位vp,它相对于不同的像素会自动转换,保证不同设备视觉一致。函数vp2px用于将vp单位的长度转换为px单位的长度。
我们使用.width()和.height()设置长宽时,单位默认为vp;但我们设置图像时,图片背景相对位置的单位为px。于是我们可以使用vp2px函数将它们进行转换。
Text("设置背景图")
.padding(50)
.width(400)
.height(300)
.border({
width: 1,
style: BorderStyle.Dashed
})
.backgroundImage($r("app.media.icon"))
.backgroundImagePosition({
x: vp2px(200),
y: vp2px(100)
})
背景尺寸大小
设置背景尺寸大小等同于缩放背景图片,语法为.backgroundImageSize(宽高对象 或 枚举)。参数可以选择{width: 尺寸, height: 尺寸},也可以使用枚举,语法为ImageSize,可选值有:
- Contain:等比例缩放背景图,当宽或高与组件尺寸相同停止缩放;
- Cover:等比例缩放背景图至图片完全覆盖组件范围;
- Auto:默认,原图尺寸。
Text("设置背景图")
.padding(20)
.width(200)
.height(100)
.border({
width: 1,
style: BorderStyle.Dashed
})
.fontColor(Color.White)
.backgroundImage($r("app.media.bg"))
.backgroundImageSize(ImageSize.Cover)