HarmonyOS APP开发入门3——组件（二 Text组件）_harmonyos开发 buttom外边距

HarmonyOS APP开发入门3——组件（二 Text组件）

---

Text组件

---

文本（Text）是用来显示字符串的组件，在界面上显示为一块文本区域。仅仅作为展示数据使用，用户不能在App中修改文本组件中的内容。

Text组件是最基本的组件，后面还会学习他的子类组件，比如Button，TextField都是从这个类衍生而来的。

常见的属性：

这些属性不用去背，用着用着就熟了，想要对文本进行一个设置，如果忘记属性，可以直接到笔记中找，或者到华为开发者文档中找。

常用属性

常见属性 
<Text 
ohos:id="$+id:text" 
ohos:width="match_content" 
ohos:height="match_content" 
ohos:text="Text" 
ohos:background_element="$graphic:color_gray_element" />
其他属性使用方式： 
字体大小 
ohos:text_size="28fp" 
字体颜色 
ohos:text_color="blue" 
Text组件的左外边距 
ohos:left_margin="15vp" Text
组件的下外边距 
ohos:bottom_margin="15vp" 
Text组件和内部文本的右内边距 ohos:right_padding="15vp" 
Text组件和内部文本的左内边距 ohos:left_padding="15vp" 
设置字体风格 斜体ohos:italic="true" 
字重（就是文字的粗细） 
ohos:text_weight="700" 
字体
ohos:text_font="serif" 
设置文本对齐方式
ohos:text_alignment="horizontal_center|bottom" 
设置文本换行 
ohos:multiple_lines="true" 
最大显示行数 
ohos:max_text_lines="2"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

创建Text

在layout目录下的xml文件中创建Text组件。

<Text
    ohos:id="$+id:text"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="Text"/>
1
2
3
4
5

设置Text

在xml中设置Text的背景。

<Text
    ...
    ohos:background_element="$graphic:background_text"/>
1
2
3

设置字体大小和颜色

<Text
    ohos:id="$+id:text"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="Text"
    ohos:text_size="28fp"
    ohos:text_color="#0000FF"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="15vp"
    ohos:left_padding="15vp"
    ohos:background_element="$graphic:background_text"/>
1
2
3
4
5
6
7
8
9
10
11
12

设置字体风格和字重

<Text
    ohos:id="$+id:text"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="Text"
    ohos:text_size="28fp"
    ohos:text_color="#0000FF"
    ohos:italic="true"
    ohos:text_weight="700"
    ohos:text_font="serif"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="15vp"
    ohos:left_padding="15vp"
    ohos:background_element="$graphic:background_text"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

设置文本对齐方式

<Text
    ohos:id="$+id:text"
    ohos:width="300vp"
    ohos:height="100vp"
    ohos:text="Text"
    ohos:text_size="28fp"
    ohos:text_color="#0000FF"
    ohos:italic="true"
    ohos:text_weight="700"
    ohos:text_font="serif"
    ohos:left_margin="15vp"
    ohos:bottom_margin="15vp"
    ohos:right_padding="15vp"
    ohos:left_padding="15vp"
    ohos:text_alignment="horizontal_center|bottom"
    ohos:background_element="$graphic:background_text"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

设置自动换行、最大显示行数和自动调节字体大小

<Text
    ohos:id="$+id:text"
    ohos:width="90vp"
    ohos:height="match_content"
    ohos:min_height="30vp"
    ohos:text="T"
    ohos:text_color="#0000FF"
    ohos:italic="true"
    ohos:text_weight="700"
    ohos:text_font="serif"
    ohos:multiple_lines="true"
    ohos:max_text_lines="1"
    ohos:auto_font_size="true"
    ohos:right_padding="8vp"
    ohos:left_padding="8vp"
    ohos:background_element="$graphic:background_text"/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

跑马灯效果

<Text
    ohos:id="$+id:text"
    ohos:width="75vp"
    ohos:height="match_content"
    ohos:text="TextText"
    ohos:text_size="28fp"
    ohos:text_color="#0000FF"
    ohos:italic="true"
    ohos:text_weight="700"
    ohos:text_font="serif"
    ohos:background_element="$graphic:background_text"/>
1
2
3
4
5
6
7
8
9
10
11

// 跑马灯效果
text.setTruncationMode(Text.TruncationMode.AUTO_SCROLLING);
// 始终处于自动滚动状态
text.setAutoScrollingCount(Text.AUTO_SCROLLING_FOREVER);
// 启动跑马灯效果
text.startAutoScrolling();
1
2
3
4
5
6

喜欢博文可以关注博主哦，以后会持续更新干货的