本章我们开始讲Harmony OS中的界面开发。

目录

如何写

文本溢出省略

行高

图片组件

输入框

按钮

---

如何写

界面开发我将在build里面写代码在,在预览器(Previewer)里面看效果

我们来解析一下这段代码:

我们开始写我们的第一个界面:

我们的布局代码如下:

我们可以看出非常简单

Column表示垂直布局

Row表示水平布局

因为我们的标签样式都一样，我们这里直接把标签中的内容设置为列表，遍历列表把每个列表中的内容文章设置的标签里面，类似与vue中的v-for

到这里我们已经学会了如何在Harmony OS 里面写界面

文本溢出省略

语法:

.textOverflow({

        pverflow:TextOverflow.xxx

})

.maxLines(最大显示行数)

TextOverflow的值:

Clip(默认):直接裁剪超出部分

Ellipsis:在文本末尾显示省略号(...)

None:不做任何处理，文本可能溢出容器

MARQUEE:跑马灯效果

行高

.lineHeight(行高)

图片组件

Image(图片数据资源) 支持网络资源和本地资源

// 网络资源图片
Image('https://i-blog.csdnimg.cn/direct/94a164b720354f988aa9885b9097c1e2.png')
​// 本地资源图片
Image($r('app.media.文件名'))

本地图片放在resources/media里面

输入框

TextInput({
  placeholder:'提示词'
}).type(InputType.输入类型)

键盘类型对应表

InputType	键盘类型	典型用途
Normal	标准全键盘	普通文本
Password	标准全键盘（隐藏内容）	密码
Email	带@和域名的键盘	电子邮件
Number	数字键盘	纯数字
PhoneNumber	电话拨号键盘	电话号码
Number+Decimal	带小数点的数字键盘	金额、测量值
Number+Signed	带正负号的数字键盘	温度、坐标

按钮

Button('按钮文本')