Flex drop 元素太大时答案

【问题标题】：Flex drop element when too bigFlex drop 元素太大时
【发布时间】：2012-04-25 10:28:40
【问题描述】：

在 Flex Mobile 中，我在操作栏中有几个按钮。在屏幕非常小的设备（例如 HTC Wildfire）上，并非所有按钮都可以显示。有没有办法告诉 Flex 在元素不合适时隐藏它？我知道可以通过使用状态并测试屏幕的宽度，但我希望有另一种方法..

【问题讨论】：

您是否对操作栏中的内容使用基于 % 的宽度布局？如果你是并且内容仍然被丢弃，你将不得不对状态做一些事情。重新访问您的设计并查看是否可以减少操作栏中使用的空间也可能是值得的
我使用的是固定宽度，因为按钮都有图标。无需重新访问，因为 Wildfire 是唯一无法显示所有按钮的设备

标签： actionscript-3 apache-flex layout mobile

【解决方案1】：

这是一个非常简单的 Spark 布局类，它水平布置对象，丢弃任何不适合的项目。

package
{
    import mx.core.ILayoutElement;

    import spark.layouts.supportClasses.LayoutBase;

    public class DroppableHorizontalLayout extends LayoutBase
    {
        private static const PADDING:Number = 5;

        public function DroppableHorizontalLayout()
        {
            super();
        }

        override public function updateDisplayList(width:Number, height:Number):void
        {
//          super.updateDisplayList(width,height); // super method doesn't do anything
            var currentXCoordinate:Number = 0;
            var numKids:int = target.numChildren;
            for (var i:int=0; i < numKids; i++)
            {
                var currentItem:ILayoutElement = target.getElementAt(i);
                var itemWidth:Number = currentItem.getPreferredBoundsWidth();
                if (currentXCoordinate + itemWidth < width)
                {
                    currentItem.setLayoutBoundsSize(itemWidth, currentItem.getPreferredBoundsHeight());
                    currentItem.setLayoutBoundsPosition(currentXCoordinate, 0); // or whatever the Y coordinate should be
                    currentXCoordinate = currentXCoordinate + itemWidth + PADDING;
                }
                else
                {
                    break; // no reason to keep iterating, nothing else will fit...
                }
            }
        }
    }
}

编写具有典型 Flex 布局类的所有功能的布局并非易事。但是你当然可以像上面那样做一些简单的事情，遍历子对象，设置它们的大小/位置，在这种情况下，不用费心渲染不适合的东西。

【讨论】：

由于某种原因，当我把它放在 actionLayout 中时，所有元素都被隐藏了。我不得不稍微调整一下你的代码。现在它也适用于操作栏。谢谢
太棒了！您可能想要编辑答案并添加您为它所做的调整，以便在与 ActionBar（actionLayout 属性）一起使用时工作。我用 Group 对其进行了测试，它确实有效，但除此之外没有尝试任何其他方法：)
我把它编码得又快又脏，但它有效，我会把它添加到你的答案中

【解决方案2】：

您可以检查ApplicationDPI 值；并在更高分辨率上隐藏明确的内容。大多数平板电脑提供 160dpi；而大多数手机提供240dpi。 iPhone 4 提供 320dpi 屏幕。我不确定 iPad 的 Retina 显示屏。

【讨论】：

纯粹使用基于 dpi 的布局会很棘手。 iPad 3 和即将推出的 1080p Android 桌子的分辨率约为 260dpi（iPad 准确地说是 264），因此将被 flex 标记为 240dpi。
@Al_Birdy 同意；这真的取决于你想做什么，你想定位什么，以及代码需要如何“面向未来”。