图文混排文本框

最近更新时间：2023-09-25

本文档中的示例详见\02_demo\test_project\res\content\maps\ui_demo.fmap

概述

图文混排文本框（Multi Text Box）用于存放文字信息并展示，用户不可编辑，支持一部分HTML语法，支持多行文本，支持超链接。

HTML文本格式

元素	属性	说明
img	src	指定显示图像的URL
	rect	生成矩形区域
	halign	图片水平对齐方式（left，center，right）
	valign	图片垂直对齐方式（top，center，bottom） 注：Multi Text Box控件属性Line Height大于图片高度生效
	only	true：图片独占一行 false：文本环绕图片 line：文本与图片保持一行，不环绕图片
	data	图片数据 注：通过MultiTextBox:GetImageData接口获取图片数据
font	color	文本字体颜色
	face	文本字体样式
Hyperlink	href	指定链接目标的URL
	style	定义超链接文本的样式信息

img属性

img-src图片路径

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\">
")

img-halign图片水平对齐方式

left-默认、center、right

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" halign=\"left\"><br/>
<img src=\"skin\\home\\23_iphone_2.png\" halign=\"center\"><br/>
<img src=\"skin\\home\\23_iphone_2.png\" halign=\"right\">
")

img-valign图片垂直对齐方式

注意

Multi Text Box控件Line Height属性值大于图片高度、小于等于Multi Text Box高度时，实现垂直对齐效果。

top-默认

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"top\">
")

center

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"center\">
")

bottom

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\">
")

img-only图片独占一行

false-默认

文本环绕图片。

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" only=\"false\"><font>MultiTextBox MultiTextBox MultiTextBox</font>
")

true

图片独占一行。

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" only=\"true\"><font>MultiTextBox MultiTextBox MultiTextBox</font>
")

line

文本与图片保持一行，不环绕。

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" only=\"line\"><font>MultiTextBox MultiTextBox MultiTextBox</font>
")

img-rect生成矩形区域

MultiTextBox.HtmlText = nx_widestr("
<img rect=\"0,0,63,63\"><font>MultiTextBox MultiTextBox MultiTextBox MultiTextBox</font>
")

img-data图片数据

通过Multi Text Box控件的GetImageData接口获取。

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" data=\"MultiTextBox\">
")

nx_msgbox("MultiTextBox:GetImageData = " .. nx_string(MultiTextBox:GetImageData(0,0)))

font属性

font-color字体颜色

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#FF0000\">Text</font>
")

font-face字体样式

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#00FF00\" face=\"Default30I\">Text</font>
")

HyperLink属性

HyperLink-href超链接地址文本

超链接地址通过Multi Text Box控件的GetHyperLinkData接口获取，事件on_mouseout_hyperlink、on_mousein_hyperlink、on_click_hyperlink、on_doubleclick_hyperlink、on_right_click_hyperlink将超链接地址作为参数传递。

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#00FF00\" face=\"Default30I\">Text</font><br/>
<a href=\"www.baidu.com\">HyperLink Address</a>
")

HyperLink-style超链接文本风格

Style修改文本默认状态、鼠标移入、按下、禁用状态下的颜色和文本大小。

HLSTypeCustom通过配置文件（skin\\HyperLinkStyle.xml）来定义。

<HyperLinkStyle Name="HLSTypeCustom">
    <Style Type="Normal" TypeID="0" FontName="FZCY13" Color="255,0,255,120" Size="13"/>
    <Style Type="MouseIn" TypeID="1" FontName="FZCY13" Color="255,80,80,230" Size="13"/>
    <Style Type="Press" TypeID="2" FontName="FZCY13" Color="255,220,220,50" Size="13"/>
    <Style Type="Disable" TypeID="3" FontName="FZCY13" Color="255,50,50,50" Size="13"/>
</HyperLinkStyle>

HyperLinkStyle说明：

类型名	说明
Type	自定义类型名
TypeID	0 -（Normal）通常状态 1 - （MouseIn）鼠标移入状态 2 - （Press）鼠标点击状态 3 - （Disable）禁用状态
FontName	字体名（参考skin\res_font.xml文件）
Color	字体颜色
Size	暂不支持

上图所示HTML文本如下：

MultiTextBox.HtmlText = nx_widestr("
<img src=\"skin\\home\\23_iphone_2.png\" valign=\"bottom\"><font color=\"#00FF00\" face=\"Default30I\">Text</font><br/>
<a href=\"www.baidu.com\" style=\"HLSTypeCustom\">HyperLink Address</a>
")

属性

属性	说明
HTML文本（HTML Text）	控件解析并展示的内容
普通文本消息屏蔽（Block Normal Text Message）	用于屏蔽鼠标对文本操作产生的消息
图片消息屏蔽（Block Image Message）	用于屏蔽鼠标对图片操作产生的消息
超链接消息屏蔽（Block Hyper Link Message）	用于屏蔽鼠标对超链接操作产生的消息

事件

回调名称	回调函数
on_click_image	点击图片时调用回调
on_lost_capture	失去焦点时回调
on_get_capture	获得焦点时回调
on_click_hyperlink	点击超链接时回调

Lua脚本示例

self.Text = "MultiTextBox"
self.AlwaysVScroll = true

--点击图片时产生回调
function on_click_image(self)
    local str=nx_string(self.HtmlText)
    nx_msgbox(str) 
end