鸿蒙基础进阶---系统组件和样式

112 阅读1分钟

一个应用的开发首先是界面的显示。而界面是由控件显示的。这里的控件可分为系统控件和自定义控件。这里我们先看系统控件。 在界面之前需要首先了解页面的结构化布局

页面布局的结构

image.png 这里需要注意自定义的组件必须用struct定义,并且被@Component装饰器修饰。 @Entry指的是程序入口界面,可以理解为主界面; @Preview代表的是可以在编译器中进行实时预览; @State表示组件中的状态变量,即:变量修改之后,会触发组件中的UI进行刷新 自定义组件是可复用的组件,可以组合一些系统组件被重复引用

点击事件

image.png 其实点击事件也是组件的一个属性方法,主要用于添加组件对事件的响应逻辑,统一通过事件方法进行设置 如上图所示,这里的例子是点击登录按钮实现的页面跳转,当然这里也可以改成进行网络请求与后台进行数据交互。

公共样式抽取

image.png 这里说一下公共样式抽取 这个代码中因为登录页面有账号输入框和密码输入框,同时因为两个输入框的样式是相同的(宽度、高度、背景色、圆角等)。所以这里可以将这些样式单独抽离出来一个方法,这样的话我们在代码书写上会避免重复代码的三书写。

系统样式

image.png 我们可以看到,在我们编写好界面代码之后,最终在手机上的运行效果。但是我们在实际开发过程中,为了界面美观,是想隐藏顶部状态栏(设置全屏)。这是我们需要在在config.json文件中设置无标题栏主题样式。 image.png 设置之后再次运行就可以看到自己想要的结果了。 image.png 由于内置的系统组件过于庞大,这里就不针对每个系统组件进行一一介绍了。 zh-cn/application-dev/ui/Readme-CN.md · OpenHarmony/docs - Gitee.com 这里附上官方的UI开发文档,大家可以自行查看所需要使用内置组件的具体内容。