HarmonyOS實戰—Text組件寬高三種值的寫法和顏色屬性
1. 文本組件(Text)
概述：
文本(Text)是用來顯示字符串的組件，在界面上顯示為一塊文本區域。僅僅作為展示數據使用，用戶不能在App中修改文本組件中的內容。
Text組件是最基本的組件，后面還會學習其他的子類組件，比如Button，TextField都是從這個類衍生而來的。
在右側登錄頁面中，用戶名和密碼是用文本框實現的
文本框所用到的一些屬性：
常見的屬性：
這些屬性不用去背，用著用著就熟了，想要對文本進行一個設置，如果忘記屬性，可以直接到筆記中找，或者到華為開發者文檔中找。
1.1 寬高屬性
match_context：表示文本框的內容有多大，文本框本身就有多大，全部包裹內容
match_parent：文本框外面的布局其實就是文本框的父元素。簡單理解：誰包裹了文本框誰就是文本框的父元素。
具體數值：單位為像素(px)
1.2 長度單位(像素px)
平時所說的2K屏或4K屏說的就是最大分辨率
如：2K屏就是由寬：1920個小格子和高：1080個小格子組成的
手機端的分辨率
2. 寬高三種值的寫法
2.1 寬高為：match_content
2.2 寬高為：match_parent，鋪滿整個父元素
2.3 寬高為：具體的值
具體的值，如果沒帶單位，默認為像素(px)，如：設置寬高為200px
200px只能展示200像素，如果文本內容多展示不下，200px能展示多少就展示多少，剩下來的就不會再展示了
3. vp 和 fp
具體的長度單位：px，vp，fp。
dp(安卓里面的單位，跟鴻蒙中的vp是一樣的)
vp(虛擬像素)長度單位
px像素表示寫死的固定大小，在所以的分辨率下所有的長度都是固定
如下：在一個小一點屏幕下固定的大小組件就會顯示不下
鴻蒙手機可以搭載在其他設備上，而其他設備的分辨率是無法確定的，所以以后在定義大小的時候，如果是需要寫具體的數值，單位最好不要用像素px，像素會導致組件的大小是定死的。
3.1 長度單位(虛擬像素vp)
有沒有一種單位可以考慮到手機大小，靈活指定寬高呢? vp
屏幕的尺寸也是斜著量的，假設為：6寸
PPI = 2202.9 / 6 ≈ 367.15，表示這部手機每英寸上有367.15個像素點
如果設置的這部手機組件的寬度為：100px，那么就可以根據上面的公式來計算得出 vp
一旦單位為：vp，手機在顯示的時候，就會根據手機自身的分辨率和手機自身的尺寸靈活的指定組件的寬高，讓不同的手機在顯示同一個界面的時候盡可能的保持一樣的風格
計算的時候有點麻煩，要計算對角線像素點個數和屏幕尺寸，所以在業內有一個默認的標準，默認的標準可以幫我們進行快速的轉換，計算出來的結果不是最精確的結果，而是一個近似值，但是近似值在使用或展示的時候影響并不是很大。
3.2 fp(字體大小)
vp和fp的計算方式是一樣的。
vp是長度單位，用于寬，高等。
fp是大小單位，用于字體大小(類似安卓里的sp)。比如40fp。
4. 測試 px 和 vp 兩種方式指定寬高大小的區別
打開模擬器，進行單位換算，P40：1080*2340 跟上面的 1920*1080 差不多
所以就可以用1：3 的關系來表示
ability_main.xml
顯示的內容為數字：12，上面的Text大小用px表示，下面的Text用vp和fp表示，按照1:3的大小
- <?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:orientation="vertical">
- <Text
- ohos:height="200px"
- ohos:width="200px"
- ohos:text="12"
- ohos:text_size="150"
- ohos:background_element="red"
- >
- </Text>
- <Text
- ohos:height="67vp"
- ohos:width="67vp"
- ohos:text="12"
- ohos:text_size="50fp"
- ohos:background_element="red"
- >
- </Text>
- </DirectionalLayout>
運行：
組件大小是差不多的，所以以后在指定寬高、字體大小的時候就可以使用vp和fp了
fp字體大小單位。不縮放的情況下fp=vp
如果有縮放。 1fp = 1vp * 縮放比例
如果不寫單位，默認單位是px
5. 顏色屬性
在之前的代碼當中，都是使用英文單詞來表示的顏色，有些局限性。
下面就可以使用 #16進制來表示
5.1 三原色
美術上的紅黃藍三種顏色就可以搭配出五彩繽紛的顏色
在計算機當中也有三原色，分別為：紅綠藍，這稱之為光學三原色。
在計算機里的里面的每一個像素就是由紅綠藍三部分組成的
把屏幕放大后：每一個紅綠藍組成的整體其實就是一個像素點，很多像素點在一起就是一個完整的圖片。
在計算機當中，通過上三種顏色(紅綠藍)的搭配就可以組成五彩繽紛的顏色了。
如何把這三種顏色組合在一起搭配出各種各樣的顏色呢?
給這三種顏色設置不同的值，值越大表示當前的顏色越濃，值越小，表示當前的顏色越淡
如果紅色的值設置為：43，藍色：123，綠色：194，那么就可以這樣理解了，用43份紅色顏料跟123份綠色顏料、194份藍色顏料，摻雜在一起后顏色
通過三原色的搭配就可以形成各種顏色了
如果設置為 255，表示設置的當前顏色為最濃。設置為 0，表示不要當前的顏色
也可以用十六進制表示，十進制的255對應FF，所以十六進制下最大就為FF
下面就可以使用三原色的形式來書寫布局 ability_main
在 xml 中不能寫十進制的，只能寫十六進制
下面的 #917643，表示的是 91 表示紅色、76 表示綠色、43 表示藍色
- <Text
- ohos:height="200px"
- ohos:width="200px"
- ohos:text="12"
- ohos:text_size="150"
- ohos:background_element="#917643"
- >
- </Text>
- <Text
- ohos:height="67vp"
- ohos:width="67vp"
- ohos:text="12"
- ohos:text_size="50fp"
- ohos:background_element="#1188DD"
- >
- </Text>
顏色的設置還可以給他設置透明度，在顏色的前面寫透明度
如：前面加上 00，左邊的顏色就沒有了，說明當前的顏色是純透明的
前面設置FF，說明FF表示不透明
如果要在顏色前面設置透明度，就可以這樣寫。相較于前面的褐色就稍微淡了點
擴展：寫三原色的時候是可以省略的，條件就是：當三組顏色中的兩個值是一樣的，如：#1188DD，11、88、DD都是一樣的值，就可以寫成：
這是一個簡略的寫法。但如果是這樣的就不能那樣簡略的寫了，如：#11881D，必要要三組顏色中的每一組數值都是一樣才能簡略地寫。
5.2 顏色屬性小節
- 計算機中的顏色采用光學三原色。
- 分別為：紅( red)，綠( green)，藍( blue)。
- 計算機中的三原色，也稱之為RGB。
- 可以寫成十進制形式。(255,255,255)
- 也可以寫成十六進制形式。(#FFFFFF)
- 顏色前面可以寫透明度。(#FFFFFFFF) (#00FFFFFF)
- 十六進制中表示形式可以省略。(#18D)，(簡寫的時候不能加透明度)
- 十六進制表示法中，如果不足6位，則補全6位。#5901(前面補0，滿足6位，不利于閱讀)
- 一般來講，代碼中創建RGB的對象，采用十進制。
- xml文件中設置顏色采用十六進制。
