• This is the fifth day of my participation in the August More Text Challenge.

1. Text Component

• Summary:

Text is a component that displays a string as a Text area on the interface. For display data only, users cannot modify the content in the text component in the App.

• The Text component is the most basic component, but you’ll learn about other subclasses later, such asButton.TextFieldAll derived from this class.
• On the right login page, the user name and password are text boxes

• Some of the properties used by the textbox:
• Common attributes:
• There is no need to memorize these attributes, they become familiar with the use of the text. If you want to set a text, if you forget the attributes, you can find them directly in the notes or in the Huawei developer documentation.
• Address: developer.harmonyos.com/cn/docs/doc…

1.1 Width and height attributes

• match_context: indicates the size of the text box, the size of the text box itself, all wrapped content

• match_parentThe layout outside the text box is the parent element of the text box. Simple understanding:Whoever wraps the text box is the parent element of the text box.

• Specific value: unit: pixel (px)

1.2 Length unit (pixel PX)

• 2K screen or 4K screenMaximum resolution
• For example, a 2K screen is made up of 1920 cells wide and 1080 cells high

• Mobile resolution

2. Width three kinds of value writing method

2.1 Width and height: match_content

2.2 Width and height: match_parent, covering the entire parent element

2.3 Width and height are: specific values

• If there is no unit, the default value is pixel (px), for example, set width and height to200px
• 200pxYou can only display 200 pixels, and if you don’t have enough text,200pxShow as much as you can and the rest will never be shown again

3. The vp and fp

• Specific unit of length:Px, VP, FP.

Dp (virtual pixel) a unit of length of a vp

• The px pixel represents the fixed size of the write block, and all lengths are fixed at all resolutions
• Here it is: fixed size components will not display on a smaller screen

• Hongmeng mobile phone can be mounted on other devices, but the resolution of other devices cannot be determined. Therefore, when defining the size in the future, if specific values need to be written, the unit had better not use pixel PX, because pixels will cause the size of components to be fixed.

3.1 Length unit (virtual pixel VP)

• Is there a unit that can flexibly specify the width and height considering the size of the phone?vp

• The screen size is also measured diagonally, let’s say: 6 inches

• PPI = 2202.9/6 ≈ 367.15“, means the phone has every inch367.15A pixel

• If the width of this mobile phone component is set as:100px, then it can be calculated according to the above formulavp

• Once the unit is:vpWhen the mobile phone is displayed, the width and height of components will be flexibly specified according to the resolution and size of the mobile phone, so that different mobile phones can display the same interface as much as possible to maintain the same style

• Calculation of time a little bit of a problem, to compute the diagonal pixel number and screen size, so there is a default standard in the industry, the default standard can help us for rapid transformation, the calculated results is not the most accurate results, but an approximation, but approximation at the time of use or display effect is not very great.

3.2 FP (Font size)

• vpandfpIt’s the same thing.
• vpA unit of length, used of width or height.
• fpFont size is a unit of size used for font sizesp). Such as40fp.

4. Test the difference between the width and height specified by PX and VP

• Open the simulator for unit conversion, P40:1080 * 2340Keep up with the1920 * 1080almost

• So it works1：3Is represented by the relationship between

ability_main.xml

• The contents displayed are numbers:12, the above Text size is usedpxThe following Text is usedvpandfpIn accordance with1:3The size of the

      
<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>
Copy the code

• Run:

• The component sizes are similar, so you can use them later when specifying the width, height, and font sizevpandfpthe
• fpUnit of font size. Without scalingfp=vp
• If I have scaling.1fp = 1VP * Scaling ratio
• If you don’t write the unit, the default unit ispx

5. Color properties

• In the previous code, English words were used to represent the color, some limitations.
• Now you can use it# hexadecimalTo represent the

5.1 three primary colors

• The three colors of red, yellow and blue in art can be matched to create colorful colors

• There are also three primary colors in computers, red, green and blue, which are called optical primary colors.
• Every pixel in the computer is made up of three parts: red, green and blue

• Zoom in: each red, green and blue dot is actually a pixel, and many pixels together make a complete picture.

• In the computer, three colors (red, green and blue) can be combined to form a riot of colors.

How do you combine these three colors together to create a variety of colors?

• Set different values for the three colors, with a larger value indicating a darker color and a smaller value indicating a lighter color
• If the red value is set to:43Blue:123Green:194Then it can be understood in this way43Some red paint and123Green pigment,194Blue pigment, mixed together to make a color

• Through the collocation of three primary colors can form a variety of colors

• If set to255, indicates that the current color is set to the thickest. Set to0To exclude the current color

• You can also usehexadecimalIt’s decimal255The correspondingFF, so the maximum hexadecimal value isFF

• Now you can write the layout in three primary colorsability_main
• You can’t write decimal in XML, only hexadecimal
• The following# 917643Is that91Represents red,76Stands for green,43The blue

<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>
Copy the code

• Color Settings can also give it transparency, write transparency in front of the color
• Add in front of00, the color on the left is gone, indicating that the current color is pure transparent

• FF indicates opacity

• If you want to set transparency before the color, you can write this. It’s a little lighter than the brown on the front

• If two of the three groups of colors are the same, for example:#1188DD.11, 88, DDAll have the same value, it can be written as:

• This is a shorthand notation. But if this is the case, you can’t write it that briefly. For example:#11881DIt is necessary to have the same value in each of the three groups of colors to write it briefly.

5.2 Color Properties section

1. The colors in the computer are optical primary colors.
2. Respectively: red (red), green (green), blue (blue).
3. Three primary colors in computers, also known asRGB.
4. I can write it in decimal form.(255255255).
5. You can also write it in hexadecimal form.(#FFFFFF)
6. I can write transparency before the color.(#FFFFFFFF) (#00FFFFFF)
7. The hexadecimal representation can be omitted. (#18D), (do not abbreviate with transparency)
8. In hexadecimal notation, if insufficient6Is, then the completion6position# 5901(the previous repair0To meet the6Bit, not conducive to reading)
9. In general, create in codeRGBObject, in decimal.
10. xmlThe file color is set in hexadecimal.