【Duilib基础控件】showhtml属性:类html富文本绘制（可在同一个Label中显示不同颜色不同大小字体）

最新推荐文章于 2024-04-12 15:51:01 发布

beibaoke910

最新推荐文章于 2024-04-12 15:51:01 发布

阅读量2.3k

点赞数

分类专栏： Duilib

本文链接：https://blog.youkuaiyun.com/beibaoke910/article/details/107487214

版权

Duilib 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了一种基于XML的富文本格式，包括如何使用特定标签实现加粗、颜色、字体、图片插入等功能，适用于界面设计与开发人员理解并应用到实际项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Attribute name="showhtml" default="false" type="BOOL" comment="是否使用类html富文本绘制,如(false)"/>

// 考虑到在xml编辑器中使用<>符号不方便，可以使用{}符号代替
// 支持标签嵌套（如<l><b>text</b></l>），但是交叉嵌套是应该避免的（如<l><b>text</l></b>）
// The string formatter supports a kind of "mini-html" that consists of various short tags:
//
//   Bold:             <b>text</b>
//   Color:            <c #xxxxxx>text</c>  where x = RGB in hex
//   Font:             <f x>text</f>        where x = font id
//   Italic:           <i>text</i>
//   Image:            <i x y z>            where x = image name and y = imagelist num and z(optional) = imagelist id
//   Link:             <a x>text</a>        where x(optional) = link content, normal like app:notepad or http:www.xxx.com
//   NewLine           <n>                  
//   Paragraph:        <p x>text</p>        where x = extra pixels indent in p
//   Raw Text:         <r>text</r>
//   Selected:         <s>text</s>
//   Underline:        <u>text</u>
//   X Indent:         <x i>                where i = hor indent in pixels
//   Y Indent:         <y i>                where i = ver indent in pixels

属性要结合text和showhtml一起使用，showhtml为true时，text中的标签才起作用。

一、一个Label同时包含图片和文字

例子1：

<Label height="50" text="<f 1600>图片和文字 </f> <i file='panel_layout/res/money_flow_switch_play.png'> " 
       textcolor="#FFFFFF" showhtml="true"/>

<i x y z>，其中：

1.x为图片名称：file='panel_layout/res/money_flow_switch_play.png'。

2.y为该图片总共包括几张图片，默认为1

3.z表示该图片要显示的id，默认为0，id从0开始

例子1的属性就表示，要将 money_flow_switch_play.png分成1份，并显示id为0的图片，即将图片整个显示。

例子2：

<Label width="500" text="<f 1600>图片和文字 </f> <i file='panel_layout/res/money_flow_switch_play.png' 3 1> " 
       textcolor="#FFFFFF" showhtml="true"/>

x为：money_flow_switch_play.png

y为：3

z为：1

例子2表示要将 money_flow_switch_play.png平均分成3份，要显示的是id为1的图片。

二、一个Label包含文字1和文字2，其中，文字1和文字2字体和颜色均不同

例子2：

<Label height="50" text="<f 1601><c #EA2827>文字1</c></f> <f 2000><c #61C869>文字2</c></f>" 
       textcolor="#FFFFFF" showhtml="true"/>

三、例子和效果：

<?xml version="1.0" encoding="utf-8"?>
<Window>
    <Font shared="true" id="1600" name="微软雅黑" size="16" bold="false"/>
    <Font shared="true" id="1601" name="微软雅黑" size="16" bold="true"/>
    <Font shared="true" id="2000" name="微软雅黑" size="20" bold="false"/>
    <VerticalLayout bkcolor="#FF090910">
        <VerticalLayout padding="10,10,10,10" bkcolor="#FF090910">
            <Label text="<f 1600>图片和文字：完整图片 </f> <i file='panel_layout/res/money_flow_switch_play.png'>"
                   height="50" textcolor="#FFFFFF" showhtml="true"/>
            <Label text="<f 1600>图片和文字：3等分，id为0 </f> <i file='panel_layout/res/money_flow_switch_play.png' 3 0>" 
                   height="50" textcolor="#FFFFFF" showhtml="true"/>
            <Label text="<f 1600>图片和文字：3等分，id为1 </f> <i file='panel_layout/res/money_flow_switch_play.png' 3 1>" 
                   height="50" textcolor="#FFFFFF" showhtml="true"/>
            <Label text="<f 1600>图片和文字：3等分，id为2 </f> <i file='panel_layout/res/money_flow_switch_play.png' 3 2>" 
                   height="50" textcolor="#FFFFFF" showhtml="true"/>
            <Label text="<f 1600>图片和文字：2等分，id为0 </f> <i file='panel_layout/res/money_flow_switch_play.png' 2 0>" 
                   height="50" textcolor="#FFFFFF" showhtml="true"/>
            <Label text="<f 1600>图片和文字：2等分，id为1 </f> <i file='panel_layout/res/money_flow_switch_play.png' 2 1>" 
                   height="50" textcolor="#FFFFFF" showhtml="true"/>			
            <Label text="<f 1601><c #EA2827>文字1</c></f> <f 2000><c #61C869>文字2</c></f>"
                   height="50" textcolor="#FFFFFF" showhtml="true"/>
        </VerticalLayout>
    </VerticalLayout>
</Window>

效果图如下：