HarmonyOS 设置图标在Text 旁边

朴灿烈づ我的快乐病毒、 2022-09-03 03:29 157阅读 0赞

当Text 使用element\_left的时候,图标在文本的左侧

当Text 使用element\_right的时候,图标在文本的右侧

当Text 使用element\_top的时候,图标在文本的上侧

当Text 使用element\_bottom的时候,图标在文本的下侧

其中 element\_padding 是设置图标与文本的间距的

<?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:id="$+id:text"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="心情"
            ohos:element_right="$media:icon"
            ohos:element_padding="10vp"
            ohos:text_size="22fp"
            ohos:top_margin="50vp"/>
        <Text
            ohos:id="$+id:text1"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="心情"
            ohos:element_padding="10vp"
            ohos:element_left="$media:icon"
            ohos:text_size="22fp"
            ohos:top_margin="50vp"/>
    
        <Text
            ohos:id="$+id:text2"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="心情"
            ohos:element_padding="10vp"
            ohos:element_top="$media:icon"
            ohos:text_size="22fp"
            ohos:top_margin="50vp"/>
    
        <Text
            ohos:id="$+id:text3"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text="心情"
            ohos:element_padding="10vp"
            ohos:element_bottom="$media:icon"
            ohos:text_size="22fp"
            ohos:top_margin="50vp"/>
    
    </DirectionalLayout>

效果图如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20220829/bd4a35a2112643bd83007c5646622249.png