AS3 Scroller，与约束布局的奇怪交互？

Question

我有一个表单，它使用约束布局（左/右/上/下）将主表单定位在背景中。当我在弹出的 TitleWindow 中使用该表单时，它会按照我的预期对组件进行布局和调整大小（并设置 TitleWindow 大小）。

当尝试在 Scroller 中使用相同的组件集时，布局不正确 - 背景会调整大小以适应 Scroller，而内部窗体的大小正确（但未应用右/下约束） .

这个简化的程序演示了这个问题。如果没有 Scroller，表单的布局正确，如果调整 WindowedApplication 的大小以显示整个表单，它看起来是正确的。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                        xmlns:s="library://ns.adobe.com/flex/spark" 
                        xmlns:mx="library://ns.adobe.com/flex/mx"
                        width="400" height="400">

    <fx:Declarations>
        <s:SolidColor id="bgFill" color="#8080c0"/>
        <s:SolidColor id="whiteFill" color="#ffffff"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            protected function checkSizes():void
            {
                trace('Base is ' + base.width + 'x' + base.height);
                trace('Background is ' + bg.width + 'x' + bg.height);
                trace('Border is ' + border.width + 'x' + border.height);
                trace('Form is ' + form.width + 'x' + form.height);
            }

        ]]>
    </fx:Script>

        <s:Group id="base">
            <s:Rect id="bg"
                    left="0" right="0" top="0" bottom="0"
                    fill="{bgFill}"/>
            <s:Rect id="border"
                    left="10" right="10" top="10" bottom="10"
                    fill="{whiteFill}"/>
            <s:VGroup id="form" left="20" right="20" top="20" bottom="20">
                <s:Button width="600" height="600" 
                          label="Push Me!"
                          click="checkSizes()"/>
            </s:VGroup>
        </s:Group>
</s:WindowedApplication>

单击按钮会按我的预期显示组件大小：

基础是 640x640 背景为 640x640 边框为 620x620 表格为 600x600

如果我添加一个滚动条以适应父窗口，base、bg 和 border 都适合滚动条，而不是调整大小以适应 form 周围的边框：

<s:Scroller width="100%" height="100%">
    <s:Group id="base">
        ...

底座为 385x361 背景是 385x361 边框为 365x341 表格为 600x600

奇怪的是，如果我在base 周围添加一个额外的组，那么每个人的布局都是正确的......

<s:Scroller width="100%" height="100%">
    <s:Group id="dummy">
        <s:Group id="base">
            ...

在我开始挖掘 Scroller 和 ScrollerSkin 源代码之前，有谁知道我是否已经离开了我的摇杆并在第一个滚动示例中做一些破旧的事情？我宁愿不创建我不需要的额外组件层。

Answer 1

滚动条将其第一个（也是唯一的）子项限制在其范围内，当您滚动时它将移动该子项的视口。

因为您的主应用程序将滚动条的大小限制为 400x400，所以底边也永远不会超过 400x400。

如果添加 dummy，base 可以随意扩展，但 dummy 将被限制扩展。 我希望这能解释一下。如果不问我更多=)