Question

如果一个动态大小（即宽度为100％）的Box不够大，它的内容如何让那个盒子可以滚动而不是将这个resposiblity传递给它的父级。我只想让盒子变得像它的空间一样大。

即。在下面的示例中，如果您调整浏览器窗口的大小以使文本框不适合（高度），如何让box1显示滚动条而不是整个应用程序？

<?xml version="1.0"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">

    <mx:HDividedBox width="100%" height="100%">

        <mx:VBox id="box1" backgroundColor="green" height="100%" verticalScrollPolicy="on" clipContent="true">


            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

        </mx:VBox>

        <mx:Box backgroundColor="red" width="100%" height="100%">

        </mx:Box>

    </mx:HDividedBox>

</mx:Application>

我已尝试使用verticalScrollbarPolicy auto和on，但这不起作用。

Answer 1

因此，您需要将vbox包装在画布中并将vbox设置为与其内容具有相对高度（通过不设置height属性）。出于某种原因，它必须是画布，而不是另一个Box衍生物。这样你就可以达到你想要达到的效果。

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalScrollPolicy="off">

   <mx:HDividedBox width="100%" height="100%">

        <mx:Canvas id="box1" backgroundColor="green" height="100%" >

            <mx:VBox >
                <mx:Button width="200" />

                <mx:Button width="200"/>

                <mx:Button width="200"/>

                <mx:Button width="200"/>

                <mx:Button width="200"/>

                <mx:Button width="200"/>
            </mx:VBox>

        </mx:Canvas>

        <mx:Box backgroundColor="red" width="100%" height="100%" />
    </mx:HDividedBox>

</mx:Application>

将尝试并提出它必须是画布的原因。感觉恰到好处，但很难说清楚。希望能尽快给你解释。

Answer 2

滚动条没有启动，因为它有足够的空间容纳其所有子元素。当容器的滚动条的高度/宽度对于其所有子项的所有组合高度/宽度而言太小时，它就会出现。这是一个简短的例子：

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" 
        verticalScrollPolicy="off">

    <mx:HDividedBox width="100%" height="600" verticalScrollPolicy="off">


        <mx:VBox id="box1" backgroundColor="green" height="100" 
                    verticalScrollPolicy="auto" clipContent="true">


            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

        </mx:VBox>

        <mx:Box backgroundColor="red" width="100%" height="100%">

        </mx:Box>

    </mx:HDividedBox>

</mx:Application>

Adobe Flex：可滚动框

2 个答案: