[HarmonyOS]——组件常用属性介绍

一、组件概述

组件：即屏幕展示出来的元素，都称之为组件。

• 特别注意：组件在未被添加到布局中时，既无法显示也无法交互，因此一个用户界面至少包含一个布局
• 组件加载的方向：从上到下，从左到右

1、组件的分类

在鸿蒙开发中，组件可以分为 显示类组件 和 交互类组件

• 注意：布局也是一种特殊的组件，把它当作是容器组件

2、文本框组件

（1）基本属性

（2）宽高属性的三种设置方式

谈到具体值的单位，就需要说一下电脑屏幕的分辨率，2K和4K屏，区别就在于可以支持的最大分辨率有多大，其中常见的是2K屏中的 1920*1080 和 4K屏当中的 3840*2160

 分辨率按照像素为单位，在电脑中的样子为下面一个一个的小格子:

二、常用单位细则

 1、像素的弊端

像素是固定大小的，他不会跟随屏幕分辨率的变化而变化，所以设置大小时使用像素就相当于写死了

 2、虚拟像素（简称：vp）——长度单位

vp = (px * 160)  /  ppi

• 屏幕像素点密度（Pixels Per Inch - ppi）：对角线像素点个数 / 屏幕尺寸，其实本质上就是每个英寸上有多少的像素点
• px = 写死，vp = 灵活

 （1）粗略估算表

 3、字体像素（fp）——大小单位

 fp是一个表示字体大小的单位

三、组件的颜色属性

在日常生活中，颜色采用美学三原色：红、黄、蓝

在计算机当中，颜色采用光学三原色（简称：RGB），光学三原色：红、绿、蓝

一般来讲，在代码中创建RGB对象，采用十进制，但是在XML文件中设置颜色采用十六进制的形式

1、十进制表示法： 

2、十六进制表示法：

书写：ohos:background_element="#1188DD"

• 需要注意的是：在鸿蒙开发当中，如果需要给颜色加上透明度，是加在三原色前面，取值范围也是 0~FF，00是代表纯透明，FF代表不透明
• 加了三原色的书写方法：ohos:background_element="#001188DD"，其中00所在位置即透明度所占位
• 简写：如果代表RGB三个颜色取值的每两位都是相同的，可以简略写，比如#1188DD，可以简写为#18D
• 在十六进制表示法中，如果不足6位，则在前面补0补全6位

 四、间距相关

1、外间距

• 外间距其实就是组件边框距离其他组件的距离
• 如果组件外侧没有其他组件，则是到父布局的距离

 外间距使用margin属性来设置：

2、内边距

内边距其实就是组件边框距离内部文字的距离

内边距用 padding属性来表示，一般设置上内边距和左内边距

五、案例分析

1、登录页面设计

此处仅仅实现页面内的内容，页面标题栏之后再完善

• 这里需要注意：内部字体设置对齐方式时，如果设置的是center，则代表水平和垂直都居中

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#DDDDDD"
    ohos:orientation="vertical">

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text_color="#999999"
        ohos:text_size="16vp"
        ohos:text="请输入手机号"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="100vp"
        ohos:background_element="#FFFFFF"
        />

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text_color="#999999"
        ohos:text_size="16vp"
        ohos:text="请输入密码"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:top_margin="10vp"
        ohos:background_element="#FFFFFF"
        />

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="16vp"
        ohos:text_color="#979797"
        ohos:top_margin="12vp"
        ohos:layout_alignment="right"
        ohos:right_margin="20vp"
        ohos:text="忘记密码了？"
        />

    <Button
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text="登录"
        ohos:text_size="24vp"
        ohos:text_color="#fefefe"
        ohos:text_alignment="center"
        ohos:background_element="#21a8fd"
        ohos:top_margin="76vp"
        ohos:layout_alignment="horizontal_center"
        />

    <Button
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text="注册"
        ohos:text_size="24vp"
        ohos:text_color="#fefefe"
        ohos:text_alignment="center"
        ohos:background_element="#21a8fd"
        ohos:top_margin="13vp"
        ohos:layout_alignment="horizontal_center"
        />
</DirectionalLayout>

 2、找回密码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#DDDDDD"
    ohos:orientation="vertical">

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text_color="#999999"
        ohos:text_size="16vp"
        ohos:text="请输入手机号"
        ohos:text_alignment="center"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="10vp"
        ohos:background_element="#FFFFFF"
        />

    <Text
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text_color="#999999"
        ohos:text_size="16vp"
        ohos:text="请输入密码"
        ohos:layout_alignment="horizontal_center"
        ohos:text_alignment="center"
        ohos:top_margin="6vp"
        ohos:background_element="#FFFFFF"
        />

    <Button
        ohos:height="50vp"
        ohos:width="319vp"
        ohos:text="完成"
        ohos:text_size="24vp"
        ohos:text_color="#fefefe"
        ohos:text_alignment="center"
        ohos:background_element="#21a8fd"
        ohos:top_margin="13vp"
        ohos:layout_alignment="horizontal_center"
        />
</DirectionalLayout>