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