`

flex中的Text属性

    博客分类:
  • Flex
阅读更多

不同于Lable只显示单行文本,Text可以显示多行文本,通过断行符,和根据Text的宽带,高度能自适应的文本断行。Text 默认为可选,可以通过设置Selectable是否可选,不支持底色,边框和焦点。

在启动后,如果Text显示为多行,选择一部分文本后,文本会自动滚动并且产生一些文本隐藏,中文的文本显示时,双击按钮会发现,每双击一下自动选择接下来的一个中文字<这些挺有意思,但估计不爽,别的都是全选应该算bug>

1.Text 自适应长度和高度

<mx:Text width="50" height="40" text="This is a text component,If you need an editable multiline component, use TextArea.">
运行后只能显示部分文字"This is a text",没有缩略符"..."提示,同时也无Tooltip;

Flex帮助提示用"\n"来强制断行,一直没有试出来,每次显示该\n在页面;

Text提供maxWidthmaxHeight属性。

<mx:Text width="50" text="This is a text component,If you need an editable multiline component, use TextArea."> 文本自适应断行;
<mx:Text maxWidth="50" text="This is a text component,If you need an editable multiline component, use TextArea.">文本不断行,只显示width为50的文本

2.Text支持htmlText

A:
<mx:Text width="100%" text="This is a text component." />

B:
<mx:Text width="100%">
      <mx:text>
           This is a text component.
      </mx:text>
</mx:Text>

C:
<mx:Text width="100%">
      <mx:htmlText>
           <![CDATA[
              This is <font color="#FF0000">HTML text</font> in a <b>Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.
           ]]>
      </mx:htmlText>
</mx:Text>

使用htmlText时候,象C方式是Flex2在code中会自动输入CDATA,但是这样输入后会在文本前显示一段空白和空行,如果你想显示一段没有默认添加的,请按D方式输入:

D:
<mx:Text width="100%">
      <mx:htmlText>
           <![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.]]>
      </mx:htmlText>
</mx:Text>

在Text中的htmlText必须使用CDATA,并且作为htmlText的subtag,否则html的属性将不会被支持。

Adobe Flex reference:

The Text control displays multiline, noneditable text. Use the Label control if you need only a single line of text.

The Text control does not support scroll bars. If you need scrolling, you should use a non-editable TextArea control.

You can format the text in a Text control using HTML tags, which are applied after the control's CSS styles are applied. You can also put padding around the four sides of the text.

The text in a Text control is selectable by default, but you can make it unselectable. When using a Text control in an item renderer, always set its selectable property to false.

If the control is not as wide as the text, the text will wordwrap. The text is always aligned top-left in the control.

To size a Text component, it's common to specify an explicit width and let Flex determine the height as required to display all the text. If you specify an explicit height, some of the text may get clipped; unlike Label, Text does not truncate its text with "...". It's also common to use percentage widths and heights with Text.

If you leave both the width and the height unspecified, Flex calculates them based on any explicit line breaks in the text, with no wordwrapping within lines. For example, if you set the text property, the newline character "\n" causes a line break. If you set the htmlText property, the HTML markup <br> causes a line break. If your text or htmlText is lengthy and doesn't contain line breaks, you can get a very wide Text component; you can set the maxWidth to limit how wide the component is allowed to grow.

Text controls do not have backgrounds or borders and cannot take focus.

分享到:
评论

相关推荐

    flex textlayout 滚动条

    Flex TextLayout滚动条是Adobe Flex框架中的一个关键组件,它涉及到UI设计和用户交互。TextLayout是Flex中用于处理文本渲染和布局的强大工具,而滚动条则是当内容超过容器显示范围时,提供导航的一种方式。在本文中...

    flex中的iframe源码

    2. **使用HTMLText**:在Flex中,我们可以使用HTMLText组件来显示HTML内容。HTMLText组件可以解析并渲染基本的HTML标签,包括`&lt;iframe&gt;`。我们需要将iframe的HTML代码作为内容插入到HTMLText组件中。 3. **处理...

    《Flex_help》,Flex中文帮助

    3. **Flex组件**:Flex提供了一整套丰富的组件库,如Button、CheckBox、RadioButton、TextInput、TextArea、List、DataGrid等,这些组件可以快速构建出交互性强的用户界面。每个组件都有其特定的属性和事件,通过...

    flex中文帮助文档

    &lt;mx:TextArea text="Say hello to Flex!" /&gt; !" /&gt; ``` - **代码解释**:此段MXML代码展示了如何使用Flex组件构建简单的用户界面。 - `&lt;mx:Application&gt;`:定义了一个Flex应用的根节点。 - `&lt;mx:Panel&gt;`:...

    解决Flex 中文乱码

    2. **Flex客户端设置**:在Flex应用中,可以通过设置`HTTPService`或`WebService`组件的`charset`属性为`UTF-8`来指定请求的字符集。例如: ```xml ...

    flex创建的字体属性框

    根据给定的信息,本文将详细解释“flex创建的字体属性框”的相关概念和技术要点,包括Flex框架中的字体属性设置、MXML与ActionScript混合编程、数据绑定以及UI组件的运用等。 ### Flex简介 Flex是一种用于构建跨...

    flex各组件对应的样式属性

    ### Flex各组件对应的样式属性详解 #### 一、主题颜色...以上介绍了Flex框架中几个常用组件的样式属性及其配置方法。这些属性为开发者提供了极大的灵活性,可以根据实际需求定制出美观且符合设计要求的应用界面。

    Flex中文帮助

    &lt;mx:TextArea text="Say hello to Flex!"/&gt; ``` 此示例展示了如何使用MXML定义包含文本区域和按钮的基本界面。MXML的强大在于它可以直观地描述界面布局,同时通过ActionScript添加复杂的功能和逻辑,使开发者...

    关于flex中query查询

    在Flex框架中,针对地图和属性之间的查询操作是非常重要的一个环节,尤其是在地理信息系统(GIS)应用开发中。本文将详细介绍如何利用Flex进行地图查询,包括基本概念、代码实现以及具体的应用场景。 #### 一、...

    微信小程序flex布局demo

    在微信小程序中,开发者可以利用CSS布局方式之一的Flex布局来实现复杂的页面设计,提高用户体验。本教程将深入探讨微信小程序中的Flex布局。 一、Flex布局基础 1. Flex容器:在CSS中,一个元素如果设置了`display:...

    flex中时分秒计算

    ### Flex中的时分秒计算详解 #### 一、引言 在Flex开发中,时间相关的功能经常被用到,比如日期选择器、时间输入框等。对于这些需求,Adobe Flex框架提供了丰富的组件来帮助开发者实现。本文将详细介绍如何在Flex...

    Using htmlText in a toolTip in flex

    本文将深入探讨如何在Flex中实现`htmlText`属性在工具提示中的应用,以及涉及到的相关知识点。 首先,`htmlText`是Flex中TextBase组件类的一个属性,它允许我们设置包含HTML标记的文本,这样可以创建具有样式、颜色...

    Flex教程大全 flex快速入门

    这里`{dataModel.textProperty}`表示从名为`dataModel`的数据模型中获取`textProperty`属性的值,并将其绑定到文本框的`text`属性上。 #### 四、Flex应用程序的编译和运行 创建好Flex应用程序后,需要使用Flex...

    Flex中文本高亮显示

    然后,将这些元素添加到`RichText`或`RichEditableText`的`elements`属性中。 在描述中提到的博客链接(https://songwensheng.iteye.com/blog/647240)可能会提供具体的实现细节,包括代码示例和遇到的问题及解决...

    Flex中文基础教程

    - **属性**:`text` 和 `label` 属性分别设置了文本区域的内容和按钮的标签。 通过以上介绍,我们可以了解到Flex不仅是一款功能强大的开发工具,还提供了丰富的API和组件库,使得开发者能够快速地构建出既美观又...

    完整的Flex中文帮助文档 PDF格式

    3. **Flex组件**:Flex提供了一套丰富的预定义组件,如Button、Label、TextInput等,这些组件可以直接在MXML中使用。此外,开发者还可以自定义组件来满足特定需求。 4. **数据绑定**:Flex中的数据绑定机制简化了UI...

    Flex中文帮助文档(含4份.PDF文档)

    Flex组件是构建用户界面的主要元素,这份手册详尽地列出了Flex提供的各种内置组件,如Button、TextInput、List等,并解释了它们的属性、事件和方法。同时,它还介绍了自定义组件的方法,使开发者能够根据项目需求...

    Flex4.0API中文手册完整版

    Flex 4.0 API中文手册是为Adobe Flex 4.0框架提供的一份全面的开发者参考资料,它包含了大量的类库、方法、属性和事件的详细解释,帮助开发者深入理解和使用Flex进行富互联网应用(RIA)的开发。Flex是基于...

    Flex中实现对一个text渲染不同的字体颜色示例

    样式可以通过内联、外部CSS文件或在MXML标签的style属性中直接定义。 6. 控件ID和布局 在Canvas容器中定义了一个TextArea控件,并通过id属性对其进行了唯一标识(id="txt")。这样做的目的是可以在ActionScript代码...

    flex 映射DataGrid,修改DataGridColumn显示值

    // 通过Label组件的htmlText属性,结合html标签自定义字体颜色 this.htmlText = '&lt;font color="#FF0000"&gt;' + String(value.@price).substr(0, 3) + '&lt;/font&gt;' + '&lt;font color="#00FF00"&gt;' + String(value.@price)...

Global site tag (gtag.js) - Google Analytics