Question

我一直在使用不同的方法在运行时确定“标签”的宽度，以便我可以调整“标签”的大小，因为我不希望它被截断。我终于通过 UITextField 找到了一个简单的解决方案，它允许我设置 .autoSize ，这很棒！但是，现在我正在尝试 UITextField 的“样式”（只是调整字体和字体大小），但似乎我必须使用' .htmlText 手动完成'（如果这是唯一的方式，我很乐意接受。）

我正在使用 .text 来设置标签的值。

我的测试用例涉及 HBox （我实际上使用的是Grid，但它们应该是相同的，我已经对它们进行了测试）：

我设置了 HBox ，并将样式传递给 UITextField 。我不相信这对我有用，因为我有其他组件，我需要不同的风格。
我尝试过： UITextFormat 和 TextFormat （我看到 .htmlText 会相应更新，但输出不会更新。然后我注意到每当我调用 hbox.addChild（myUITextField）时，它都会覆盖 .htmlText
在调用 addChild 之前和/或之后，我尝试使用 myUITextField.setStyle（“fontSize”，20）设置样式，这些都没有产生影响根据我上面提到的显示在显示器上。

正在进行更改，但当我将其添加到显示器时，它们似乎已被覆盖。

那么除了手动设置UITextField以及 .htmlText 中的内容之外，我还需要做什么才能设置UITextField的样式？不使用UITextField的解决方案就好了只要有一些简单的方法可以不截断文本。

编辑：我想做textField.setStyle（'fontSize'，20），并希望每次更改文本时，我都不需要使用HTML（因此我可以只使用textField。 text ='something else'并期望它的字体大小仍为20）。这就是我不使用 .htmlText 的意思（对不起，如果我以前不清楚）。

第二次编辑：我想我应该提出整个问题，也许这将澄清我做错了什么或无法实现的目标。

我的目的是拥有一个 Grid 并在其中添加文本。我不希望它包装或滚动，所以当当前行的子总宽度超过某个数字时，我将它添加到 Grid 的下一行。为了将它添加到下一行，我需要能够计算文本的宽度。我希望能够根据案例单独设置该文本的样式，并且可能还有其他组件（如 TextInput ）。基本上我想要完成的是“填补空白”。

我已经提供了代码来展示我目前正在做的事情，并且它有点运作。它可能与原始的样式问题无关，但我无法弄清楚如何调整每个UITextField之间的距离，但除此之外，这符合我想要完成的任务。与此问题相关的是：我想改变我将每个 UITextField （目前设置 .htmlText ）的方式改为有点直截了当的方式，尽管我之前提到过我会很高兴接受使用 .htmlText ，如果这是唯一的解决方案。

所以我有一个带有x行的网格，在每行中，我只有一个GridItem。根据输入，我将UITextField和TextInput添加到GridItem中，在必要时继续下一个GridItem。如果你有更好的方法，那就更好了，但我想我真正想要的是找到一种不同的造型方式。

另外另一个问题，我不确定将TextField添加到显示中的确切方法。我试过了：

var t : TextField = new TextField();
t.text = "I'm a TextField";
hBox.addChild(t);   // doesn't work
//this.addChild(t); // doesn't work either

但是我收到以下错误：

TypeError：错误＃1034：类型强制失败：无法将flash.text :: TextField @ 172c8f9转换为mx.core.IUIComponent。

这就是我的工作。

private function styleQuestionString(str : String) : String {
  return '<FONT leading="1" face="verdana" size="20">' + str + '</FONT>';
}

private function loadQuestion(str : String) : void {
  /* Split the string */
  var tmp : Array = str.split("_");

  /* Track the current width of the GridItem */
  var curWidth : int = 0;

  /* Display components that we will add */
  var txtField : UITextField = null;
  var txtInput : TextInput = null;

  /* Track the current GridItem */
  var curGridItem : GridItem = null;

  /* Track the GridItem we can use */
  var gridItemAC : ArrayCollection = new ArrayCollection();

  var i : int = 0;

  /* Grab the first GridItem from each GridRow of Grid */
  var tmpChildArray : Array = questionGrid.getChildren();
  for (i = 0; i < tmpChildArray.length; i++) {
    gridItemAC.addItem((tmpChildArray[i] as GridRow).getChildAt(0));
  }
  curGridItem = gridItemAC[0];
  gridItemAC.removeItemAt(0);

  /* Used to set the tab index of the TextInput */
  var txtInputCounter : int = 1;

  var txtFieldFormat : UITextFormat = new UITextFormat(this.systemManager);
  txtFieldFormat.leading = "1";

  //var txtFieldFormat : TextFormat = new TextFormat();
  //txtFieldFormat.size = 20;

  /* Proper Order
    txtField = new UITextField();
    txtField.text = tmp[curItem];
    txtField.autoSize = TextFieldAutoSize.LEFT;
    txtField.setTextFormat(txtFieldFormat);
  */

  var txtLineMetrics : TextLineMetrics = null;
  var tmpArray : Array = null;

  curGridItem.setStyle("leading", "1");

  var displayObj : DisplayObject = null;

  for (var curItem : int= 0; curItem < tmp.length; curItem++) {
    /* Using UITextField because it can be auto-sized! */

    /** CORRECT BLOCK (ver 1)
    txtField = new UITextField();
    txtField.text = tmp[curItem];
    txtField.autoSize = TextFieldAutoSize.LEFT;
    txtField.setTextFormat(txtFieldFormat);
    ***/

    tmpArray = (tmp[curItem] as String).split(" ");

    for (i = 0; i < tmpArray.length; i++) {
      if (tmpArray[i] as String != "") {
        txtField = new UITextField();
        txtField.htmlText = styleQuestionString(tmpArray[i] as String);
        //txtField.setTextFormat(txtFieldFormat); // No impact on output
        txtLineMetrics = curGridItem.measureHTMLText(txtField.htmlText);
        curWidth += txtLineMetrics.width + 2;

        if (curWidth >= 670) {
          curGridItem = gridItemAC[0];
          curGridItem.setStyle("leading", "1");
          if (gridItemAC.length != 1) {
            gridItemAC.removeItemAt(0);
          }
          // TODO Configure the proper gap distance
          curWidth = txtLineMetrics.width + 2;
        }
        displayObj = curGridItem.addChild(txtField);
      }
    }

    //txtField.setColor(0xFF0000);  // WORKS

    if (curItem != tmp.length - 1) {
      txtInput = new TextInput();
      txtInput.tabIndex = txtInputCounter;
      txtInput.setStyle("fontSize", 12);
      txtInputCounter++;
      txtInput.setStyle("textAlign", "center");
      txtInput.width = TEXT_INPUT_WIDTH;
      curWidth += TEXT_INPUT_WIDTH;

      if (curWidth >= 670) {
        curGridItem = gridItemAC[0];
        if (gridItemAC.length != 1) {
          gridItemAC.removeItemAt(0);
        }
        // TODO Decide if we need to add a buffer
        curWidth = TEXT_INPUT_WIDTH + 2;
      }
      curGridItem.addChild(txtInput);
      txtInputAC.addItem(txtInput);

      /* Adds event listener so that we can perform dragging into the TextInput */
      txtInput.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
      txtInput.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
      txtInput.addEventListener(DragEvent.DRAG_EXIT, dragExitHandler);
    }

    /* Add event so that this label can be dragged */
    //txtField.addEventListener(MouseEvent.MOUSE_MOVE, dragThisLabel(event, txtField.text));
  }
}

Answer 1

经过大约8个小时的搜索解决方案似乎是一个简单的问题，我终于在这里发现了你的帖子......谢谢你！

我一直在试图让TextField工作并且没有Joy，标签很好，但格式有限，我需要能够使用嵌入字体和旋转。阅读完上述内容后，这最终对我有用：

var myFormat:TextFormat = new TextFormat();
myFormat.align = "center";
myFormat.font = "myFont";
myFormat.size = 14;
myFormat.color = 0xFFFFFF;

var newTxt:UITextField = new UITextField();
newTxt.text = "HELLO";
addChild(newTxt);
newTxt.validateNow();
newTxt.setTextFormat(myFormat);

最后两步之前addChild的顺序至关重要！（myFont是我正在使用的嵌入字体）。

再一次......一千个谢谢你......

约翰

Answer 2

基于ASKERS FEEDBACK的编辑：我没有意识到你只想在整个文本区域应用一种风格，我认为你想要设计个别部分。这对你来说更简单，根本不会给你带来任何麻烦：）


var textFormat: TextFormat = new TextFormat("Arial", 12, 0xFF0000);
myText.setTextFormat(textFormat);

请注意，这会将样式设置为TextField中的文本，而不一定是您放入的未来文本。因此，在调用setTextFormat之前，请在字段中显示文本，并在每次更改它时再次设置它确保它保持不变。

最好使用普通的TextField而不是组件。如果您仍然需要组件，则可能需要调用textArea.validateNow（）以使用新样式进行更新（尽管不是100％确定）但Adobe组件非常糟糕，应该避免使用。：（

要查看TextFormat对象上的所有可用选项，请参阅here

结束编辑---------

这很容易在普通的旧TextField中使用CSS。


var myCSS: String = "Have some CSS here, probably from a loaded file";
var myHTML: String = "Have your HTML text here, and have it use the CSS styles";

// assuming your textfield's name is myText
var styleSheet: StyleSheet = new StyleSheet();
styleSheet.parseCSS(myCSS);
myText.autoSize = TextFieldAutoSize.LEFT;
myText.styleSheet = styleSheet;
myText.htmlText = myHTML;

可以找到支持的HTML代码here
支持的CSS可以找到here

Answer 3

将Textfield添加到容器时遇到问题的原因是它没有实现IUIComponent接口。如果要添加UITextField，则需要使用它。然而，这给我带来了自己的造型问题，这让我想到了这个问题。

我知道的一些事情：

TextField使用TextFormat定义设置样式，并将其应用于文本字段。正如布莱恩所说，订单很重要。
setStyle对IUITextField没有任何作用，TextFormat方法似乎与普通TextFields中的方法不同。（编辑＃2：Ahah。您需要覆盖UITextFields上的“validateNow”函数以使用setTextFormat函数）
要自动调整TextArea，您需要执行以下操作（从TextArea继承）：

import mx.core.mx_internal; use namespace mx_internal; ... super.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT; this.height = super.mx_internal::getTextField().height;

我想，在StackOverflow上发现了这段代码。向原作者道歉。但这个想法是你需要访问“mx_internal”原始文本字段。

Text和TextArea具有换行选项。（标签没有）。因此，如果设置Text对象的显式宽度，则可以使用measuredHeight选项进行大小调整并避免截断。

（编辑：那是＃4，但是stackoverflow将其解析为1 ...）

样式UITextField

3 个答案: