在 Adob​​e Flex / MXML 中填写父级

发布于 12-19 16:42 字数 1859 浏览 6 评论 0原文

我正在尝试在 Adob​​e Flex 4.5 / MXML 中实现布局,其中 HBox 中有多个控件,这些控件总共占用所有可用的水平屏幕空间。有些使用相对宽度(百分比),有些使用绝对宽度(像素),并且应该消耗剩余的空间,例如:

+----------------------+-----------------------+------+
|         35%          |      fill parent      | 10px |
+----------------------+-----------------------+------+

我如何在 Flex 中实现这一点(是否有与 Android 的 layout_width= 类似的东西) “填充父级”)?

由于存在具有绝对宽度的元素,我无法轻松地将填充物的宽度计算为先验百分比(因为它随屏幕宽度而变化)。

将填充宽度设置为 100% 也不起作用,因为这会将 35% 区域缩小到 35% 以下。

编辑:应用下面 www.Flextras.com 答案中的 updateDisplayList 建议会在下面源摘录中标记的行处产生错误“调用可能未定义的方法 updateDisplayList”:

<?xml version="1.0"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationPolicy="auto"
         width="100%"
         verticalGap="0">
    [...]
    <fx:Script>
        <![CDATA[
            [...]
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
                ^^^^

            headerLinkBox1.width = unscaledWidth * 0.375;
            headerLinkBox2.width = unscaledWidth * 0.2;
            headerLinkBox3.width = unscaledWidth - headerLinkBox4.width - headerLinkBox5.width - headerLinkBox6.width;

            headerLinkBox1.x = 0;
            headerLinkBox2.x = headerLinkBox1.x + headerLinkBox2.width;
            headerLinkBox3.x = headerLinkBox2.x + headerLinkBox3.width;
            headerLinkBox4.x = headerLinkBox3.x + headerLinkBox4.width;
            headerLinkBox5.x = headerLinkBox4.x + headerLinkBox5.width;
            headerLinkBox6.x = headerLinkBox5.x + headerLinkBox6.width;
        }

        [...]

I am attempting to implement a layout in Adobe Flex 4.5 / MXML where I have multiple controls in an HBox that - in total - consume all available horizontal screen estate. Some use a relative with (percentage), some an absolute width (pixels) and one is supposed to consume whatever space is still left, such as:

+----------------------+-----------------------+------+
|         35%          |      fill parent      | 10px |
+----------------------+-----------------------+------+

How would I achieve this in Flex (is there something comparable to Android's layout_width="fillparent")?

Due to the fact that there are elements that have an absolute width I cannot easily calculate the width of the filler as a percentage a priori (as it varies with the screen width).

Setting the filler's width to 100% also does not work as this will shrink the 35% area below 35%.

Edit: Applying the updateDisplayList suggestion from www.Flextras.com's answer below yields the error "Call to a possibly undefined method updateDisplayList" at the line marked in the source excerpt below:

<?xml version="1.0"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx"
         creationPolicy="auto"
         width="100%"
         verticalGap="0">
    [...]
    <fx:Script>
        <![CDATA[
            [...]
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
                ^^^^

            headerLinkBox1.width = unscaledWidth * 0.375;
            headerLinkBox2.width = unscaledWidth * 0.2;
            headerLinkBox3.width = unscaledWidth - headerLinkBox4.width - headerLinkBox5.width - headerLinkBox6.width;

            headerLinkBox1.x = 0;
            headerLinkBox2.x = headerLinkBox1.x + headerLinkBox2.width;
            headerLinkBox3.x = headerLinkBox2.x + headerLinkBox3.width;
            headerLinkBox4.x = headerLinkBox3.x + headerLinkBox4.width;
            headerLinkBox5.x = headerLinkBox4.x + headerLinkBox5.width;
            headerLinkBox6.x = headerLinkBox5.x + headerLinkBox6.width;
        }

        [...]

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

哆啦不做梦2024-12-26 16:42:41

您可以利用 Flex 组件生命周期在 updateDisplayList 中编写您自己的布局代码。从概念上讲是这样的:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
  super.updateDisplayList(unscaledWidth, unscaledHeight);
  // size the components
  comp1.width = unscaledWidth*.35
  comp2.width = unscaledWidth-10-comp1.width
  comp3.width = 10;
  // position the components
  comp1.x = 0;
  comp2.x = comp1.width;
  comp3.x = comp2.x + comp2.width;
}

您可能希望将每个组件的高度设置为,可能使用 getExplicitOrMeasuredHeight() 方法。

You make use of the Flex Component lifecycle and write your own layout code in updateDisplayList. Conceptually something like this:

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
  super.updateDisplayList(unscaledWidth, unscaledHeight);
  // size the components
  comp1.width = unscaledWidth*.35
  comp2.width = unscaledWidth-10-comp1.width
  comp3.width = 10;
  // position the components
  comp1.x = 0;
  comp2.x = comp1.width;
  comp3.x = comp2.x + comp2.width;
}

You'll probably want to set the height of each component to, possibly using the getExplicitOrMeasuredHeight() method.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文