UIComponent 似乎设置了“填充/边距”（Flex 3 到 Flex 4 迁移问题？）答案

【问题标题】：UIComponent seems to have "padding/margins" set (Flex 3 to Flex 4 migration issue?)UIComponent 似乎设置了“填充/边距”（Flex 3 到 Flex 4 迁移问题？）
【发布时间】：2012-11-16 10:08:55
【问题描述】：

我有一个 Flex 应用程序，它有一个 UIComponent，它包含一个 Bitmap 对象。在 Flex 3 中，一切都很好。在 Flex 4 中，相同的代码会导致 UIComponent 中的子级偏移，我无法理解。

这是我的 .html 文件的对象标签：

        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="320" height="480" id="MyId">
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="allowFullScreen" value="false" />
          <param name="movie" value="MyFlexApp.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffff00" />
          <embed allowScriptAccess="sameDomain" allowFullScreen="false" src="MyFlexApp.swf" quality="high" bgcolor="#ffff00" width="320" height="480" name="MyAppName" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
        </object>

这是我的 .mxml 文件：

<?xml version="1.0"?>
<!-- usingas/UsingCDATA.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()" width="320" height="480" backgroundColor="#FF0000" styleName="plain">
  <mx:Script>
    <![CDATA[
    import mx.core.UIComponent;
    import MyClass;
    public function init() : void
    {
            var s:UIComponent = new MyClass();
            addChild( s );
    }
    ]]>
  </mx:Script>
</mx:Application>

这里是 MyClass.as：

public class MyClass extends UIComponent
{
    ... <snip> ...

    screenBitmap = new Bitmap( screenBitmapData );
    addChildAt( screenBitmap, 0 );
    // screenBitmap.x = -160;
    // screenBitmap.y = -24;
    var t:TextField = new TextField();
    t.type = TextFieldType.INPUT;
    t.border = true;
    t.text = "hello";
    addChildAt( t, 1 );

    ... <snip> ...
}

请注意，标签的背景颜色为黄色。我看到黄色背景正确填充了 .swf 的 320x480 大小。请注意，应用程序的背景颜色为红色。同样，在闪烁黄色之后，我看到红色背景正确填充了 .swf 的 320x480 大小，所以我相信应用程序本身没有偏移。

但我看到的是 screenBitmap 对象在显示中出现偏移。它太低了 24 像素，向右 160 像素（因此位图的左边缘正好从应用程序显示矩形的中间开始）。我不明白这些偏移量来自哪里。特别是，我不知道 MyClass 对象是否在 Application 对象内偏移（即，好像 Application 对象具有 160 的“左填充”和 24 的“顶部填充”），或者它是否是 MyClass 对象具有这些填充，然后应用到 its 子级（位图和 TextField）。（我在这里使用“填充”来表示 Flex 正在以某种方式执行的 .css 填充之类的东西，尽管我在 Flex 文档中没有看到提到这样的概念。）

取消注释这两行

    // screenBitmap.x = -160;
    // screenBitmap.y = -24;

我可以让位图“正确”显示，但这不正确，因为位图上的鼠标事件随后被错误地偏移。我当然也可以补偿鼠标事件处理的变化，但我想了解为什么会发生这种变化，而不是盲目地补偿它。

请注意，我还包括一个 TextField 对象：

    var t:TextField = new TextField();
    t.type = TextFieldType.INPUT;
    t.border = true;
    t.text = "hello";
    addChildAt( t, 1 );

我这样做只是为了确保我的位图对象没有什么奇怪的东西导致了这种转变。文本对象得到相同的移位，其左上角在 160, 24 在整个 .swf 矩形内。

正如我所说，我没有在 Flex 3 中获得这些偏移量。我使用的是完全相同的代码，现在只是使用 Flex 4 SDK 进行编译。

知道偏移量来自哪里吗？

【问题讨论】：

你在用 styleName="plain" 做什么
另外，我假设如果您迁移到 Flex 4，您至少必须将 <mx:Application> 更改为 <s:Application>（并使用脚本块执行相同操作）。我认为您至少必须在应用程序级别进行此更改，而其他组件可以继续使用 'mx` 外部应用程序应该是 Spark，不是吗？

标签： actionscript-3 apache-flex flex4 flex3 offset

【解决方案1】：

非常感谢 The_asMan 和 Sunil D。以下是修正后的 .mxml 文件，其中不再存在偏移问题：

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark" applicationComplete="init()" width="320" height="480" backgroundColor="#FF0000">
  <fx:Script>
    import mx.core.UIComponent;
    import MyClass;
    public function init() : void
    {
            var s:UIComponent = new MyClass();
            addChild( s );
    }
    ]]>
  </fx:Script>
</s:Application>

【讨论】：