HarmonyOS 字体在自身控件中居中(使用text_alignment)

Myth丶恋晨 2023-01-23 03:59 112阅读 0赞

要实现的效果就是把字体在控件居中

![20210712220351605.png][]

HarmonyOS  使用的是text\_alignment 属性，详细的如下

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;"> text_alignment </td> 
 <td style="vertical-align:top;"> 文本对齐方式 </td> 
 <td style="vertical-align:top;"> left </td> 
 <td style="vertical-align:top;"> 表示文本靠左对齐。 </td> 
 <td style="vertical-align:top;"> 可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:text_alignment="top" ohos:text_alignment="top|left" </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> top </td> 
 <td style="vertical-align:top;"> 表示文本靠顶部对齐。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> right </td> 
 <td style="vertical-align:top;"> 表示文本靠右对齐。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> bottom </td> 
 <td style="vertical-align:top;"> 表示文本靠底部对齐。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> horizontal_center </td> 
 <td style="vertical-align:top;"> 表示文本水平居中对齐。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> vertical_center </td> 
 <td style="vertical-align:top;"> 表示文本垂直居中对齐。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> center </td> 
 <td style="vertical-align:top;"> 表示文本居中对齐。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> start </td> 
 <td style="vertical-align:top;"> 表示文本靠起始端对齐。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;"> end </td> 
 <td style="vertical-align:top;"> 表示文本靠结尾端对齐。 </td> 
 </tr> 
 </tbody> 
</table>

代码实现

<?xml version="1.0" encoding="utf-8"?>
 <DependentLayout
 xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:height="match_parent"
 ohos:width="match_parent"
 ohos:alignment="horizontal_center">
 
 <Text
 ohos:id="$+id:text"
 ohos:height="60vp"
 ohos:width="160vp"
 ohos:background_element="$graphic:background_ability_main"
 ohos:text="喜欢"
 ohos:text_alignment="center"
 ohos:text_size="22fp"
 ohos:top_margin="50vp"/>
 
 </DependentLayout>

具体效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

[20210712220351605.png]: /images/20221004/d855c91badaf4b44b686a3d5232a8c5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221004/5af3cdf492d646c0bdb69bda72105d99.png