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

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

页面布局的结构

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

点击事件

其实点击事件也是组件的一个属性方法，主要用于添加组件对事件的响应逻辑，统一通过事件方法进行设置

如上图所示，这里的例子是点击登录按钮实现的页面跳转，当然这里也可以改成进行网络请求与后台进行数据交互。

公共样式抽取

这里说一下公共样式抽取

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

系统样式

我们可以看到，在我们编写好界面代码之后，最终在手机上的运行效果。但是我们在实际开发过程中，为了界面美观，是想隐藏顶部状态栏（设置全屏）。这是我们需要在在config.json文件中设置无标题栏主题样式。

设置之后再次运行就可以看到自己想要的结果了。

由于内置的系统组件过于庞大，这里就不针对每个系统组件进行一一介绍了。
zh-cn/application-dev/ui/Readme-CN.md · OpenHarmony/docs - Gitee.com
这里附上官方的UI开发文档，大家可以自行查看所需要使用内置组件的具体内容。