HarmonyOS實戰—Text元件寬高三種值的寫法和顔色屬性

1. 文本元件（Text）

• 概述：

文本（Text）是用來顯示字元串的元件，在界面上顯示為一塊文本區域。僅僅作為展示資料使用，使用者不能在App中修改文本元件中的内容。

• Text元件是最基本的元件，後面還會學習其他的子類元件，比如

  Button

  ，

  TextField

  都是從這個類衍生而來的。
• 在右側登入頁面中，使用者名和密碼是用文本框實作的

• 文本框所用到的一些屬性：
• 常見的屬性：
• 這些屬性不用去背，用着用着就熟了，想要對文本進行一個設定，如果忘記屬性，可以直接到筆記中找，或者到華為開發者文檔中找。
• 位址： https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-text-0000001050729534

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

  ，表示設定的目前顔色為最濃。設定為 ，表示不要目前的顔色

• 也可以用十六進制表示，十進制的

  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 顔色屬性小節

1. 計算機中的顔色采用光學三原色。
2. 分别為：紅(

   red

   )，綠(

   green

   )，藍(

   blue

   )。
3. 計算機中的三原色，也稱之為

   RGB

4. 可以寫成十進制形式。

   (255,255,255)

5. 也可以寫成十六進制形式。

   (#FFFFFF)

6. 顔色前面可以寫透明度。

   (#FFFFFFFF) (#00FFFFFF)

7. 十六進制中表示形式可以省略。(

   #18D

   )，（簡寫的時候不能加透明度）
8. 十六進制表示法中，如果不足

   6

   位，則補全

   6

   位。

   #5901

   （前面補 ，滿足

   6

   位，不利于閱讀）
9. 一般來講，代碼中建立

   RGB

   的對象，采用十進制。

10. xml

    檔案中設定顔色采用十六進制。