强制子组件将自身大小调整为大于其容器

发布于 2024-08-26 21:00:59 字数 653 浏览 6 评论 0原文

我正在创建一个显示可变数量的“仪表”（内容的方形图块）的组件，其布局如下：

   <HDividedBox id="container">
    <VBox id="myComponent">
     <HBox id="header">
      ...header content...
     </HBox>
     <Tile id="body">
      ...gauges are added to the body...
     </Tile>
    </Vbox>
   </HDividedBox>

主体图块具有水平方向。当我拖动 HDividedBox 使 myComponent 变小时，主体组件也会变小，最终如果有太多仪表无法水平放置，它们将被撞到下一行，因此我使 myComponent 越小，数字垂直堆叠的仪表数量不断增加。

这一切都很好。问题是，无论我使用什么设置组合，我绝对无法让主体（Tile）的大小超出 myComponent 的大小，这在理想情况下会导致 myComponent 垂直滚动。即使将 body 的 maxHeight 设置为某个巨大的值，它的大小也永远不会大于其容器。

关于如何实现这一目标有什么想法吗？

谢谢

原文

I am creating a component that displays a variable amount of "gauges" (square tiles of content if you will), that is laid out like so:

   <HDividedBox id="container">
    <VBox id="myComponent">
     <HBox id="header">
      ...header content...
     </HBox>
     <Tile id="body">
      ...gauges are added to the body...
     </Tile>
    </Vbox>
   </HDividedBox>

The body Tile has a horizontal direction. When I drag the HDividedBox to make myComponent smaller, the body component will get smaller as well, and eventually if there are too many gauges to fit horizontally, they will be bumped to the next row, and thus the smaller I make myComponent, the number of vertically stacked gauges grows.

This is all well and good. The problem is, no matter what combination of settings I use, I absolutely cannot get the body (a Tile) to size itself beyond the size of myComponent, which would ideally cause myComponent to scroll vertically. Even setting the maxHeight of the body to some huge value, it will never size itself larger than it's container.

Any ideas on how to accomplish this?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葮薆情 2024-09-02 21:00:59

如果你强制设置 VBox 或 HDividedBox 的高度，然后设置 Tile scoll 策略并不断向其添加组件，最终你会看到一个滚动条

<mx:HDividedBox x="400" y="300" width="200" height="150">
    <mx:VBox width="100%" height="100%" >
        <mx:HBox width="100%" height="100%">
                        <mx:Button label="Header"/>
                        <mx:Button label="Header"/>
        </mx:HBox>
            <mx:Tile verticalScrollPolicy="on" width="100%">
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
            </mx:Tile>
    </mx:VBox>
</mx:HDividedBox>

If you force the height of your VBox or HDividedBox, then set the Tile scoll policy and keep adding components to it, you will see a scroll bar eventually

<mx:HDividedBox x="400" y="300" width="200" height="150">
    <mx:VBox width="100%" height="100%" >
        <mx:HBox width="100%" height="100%">
                        <mx:Button label="Header"/>
                        <mx:Button label="Header"/>
        </mx:HBox>
            <mx:Tile verticalScrollPolicy="on" width="100%">
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
            </mx:Tile>
    </mx:VBox>
</mx:HDividedBox>

回复收藏 0 原文

~没有更多了~