手把手教你低代码开发鸿蒙应用UI

Posted 2021-12-03 HarmonyOS技术社区

1. 打开DevEco Studio，创建一个新工程，模板选择支持Phone的模板，创建空白JS项目
   

2. 这里选Application桌面, 低代码开发功能适用于Phone和Tablet设备的HarmonyOS应用、原子化服务，目前只支持JS语言，且compileSdkVersion必须为6
   

3. 选中模块的pages文件夹，单击鼠标右键，选择New > JS Visual。
   

4. 这里取名为list, 用来展示图片列表
   

5. 拖拉一个List组件到画布上
   

6. 调整List组件宽度与高度为100%
   

7. 拖拉一个ListItem组件到List组件里, 并设置宽度为100%, 高度为100px;
   

8. 拖拉一个Image组件到ListItem组件里, 并设置宽度为200px, 高度为100%
   

9. 拖拉Text组件到ListItem组件里, 并在Image组件右边, 设置宽度为100%, 高度100%
   

10. 在list.js文件准备好List组件需要的数据.
    

11. 选择ListItem组件, 设置数据源
    

12. 选择Image组件, 设置图片源为$item.img, 修改图片宽度为200px, ObjectFit: contain
    

13. 选择Text组件, 设置文本组件显示内容
    

14. 修改Text组件左内边距为10px
    

15. 大慨效果出来了, 但还是觉得不够靓仔, 比如每行靠得太近了, 还有在每行下面加上分隔线就更好看了.
    

16. 界面就拖拉好了, 那下来就把这个界面显示到项目中, 先把界面转换为hml和css文件
    
    
    

17. 导出hml和css文件后, 文件名为list, 预览器不给通过,后来修改文件名就可以了.
    

18. 创建图片详细页面
    

19. 拖拉一个Text组件到画面上, 设置宽度和高度, 文本对齐方式
    

20. 调整最外层div的对齐方式
    

21. 拖拉一个Image组件
    

22. 要到导出hml和css文件的时候了.
    

最终效果为:

B站：https://www.bilibili.com/video/BV1Ag411N7T8/

Gitee源码： https://gitee.com/army16_harmony/low-code-one.git

想了解更多关于鸿蒙的内容，请访问：

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#bkwz

::: hljs-center

:::