Question

我有一个我在Canvas中垂直旋转的按钮，工作正常。出现问题，当用户将窗口调整为小尺寸时，会出现垂直滚动条，我宁愿将每个按钮压缩到较小的尺寸。

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="40" maxWidth="40" xmlns:myComponents="myComponents.*"
  horizontalScrollPolicy="off"
 creationComplete="created()" initialize="init()">
 <mx:Script>
    <![CDATA[
        import mx.effects.Rotate;

        function created() : void {
            addBtn("Personal");
            addBtn("Work");
            addBtn("Three");
            addBtn("Four");

        }

        function addBtn(name:String) {
            var newBtn: Button = new Button();
            newBtn.label = name;
            newBtn.styleName = "drawerButton";
            newBtn.width = 150;
            newBtn.x = (-newBtn.width / 2) + 50;
            newBtn.y = (-newBtn.height / 2) - 30;

            var rotationContainer:Canvas = new Canvas();
            rotationContainer.clipContent = false;
            rotationContainer.addChild(newBtn);
            rotationContainer.rotation = 90;
            rotationContainer.height = 150;

            uiContainer.addChild(rotationContainer);
        }

    ]]>
 </mx:Script>
 <mx:VBox x="5" y="30" right=""  >
    <mx:VBox id="uiContainer" right="0" verticalGap="2" >
    </mx:VBox>
    <mx:Button id="uiAdd" styleName="addButton" >
    </mx:Button>
    <mx:Button id="uiRename" styleName="renameButton">
    </mx:Button>
    <mx:Button id="uiDelete" styleName="deleteButton">
    </mx:Button>
 </mx:VBox>

因此，在这种情况下，按钮的宽度从150到20分钟。

Answer 1

您需要链接到正在调整大小的控件的resize处理程序，然后从那里您可以从事件对象中获取所需的信息，包括（如果需要）控件的旧宽度。这是一个简单的示例：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns:myComponents="myComponents.*">
    <mx:Script>
        <![CDATA[
            import mx.controls.Button;
            import mx.containers.Panel;
            import mx.events.ResizeEvent;

            public function resizePanel(width:int, height:int):void
            {
                thePanel.width = width;
                thePanel.height = height;
            }

            public function panel_resizeHandler(event:ResizeEvent):void
            {
                var myPanel:Panel = event.target as Panel;
                var padding:int = 10;
                var width:Number = myPanel.width - padding * 2;
                for(var i:int = 0; i < myPanel.childDescriptors.length; i++)
                {
                    if(myPanel.childDescriptors[i].type == Button)
                    {
                        var myButton:Button = this[myPanel.childDescriptors[i].id] as Button;
                        myButton.width = width;
                    }
                }
            }
        ]]>
    </mx:Script>
    <mx:ControlBar>
        <mx:Button label="300x160" click="resizePanel(300, 160)" />
        <mx:Button label="800x160" click="resizePanel(800, 160)" />
    </mx:ControlBar>
    <mx:Resize id="resize" />
    <mx:Panel id="thePanel" resize="panel_resizeHandler(event)" width="800" resizeEffect="{resize}">
        <mx:Button id="fileBtn" label="File" width="200"/>
        <mx:Button id="editBtn" label="Edit" width="200"/>
        <mx:Button id="deleteBtn" label="Delete" width="200"/>
        <mx:Button id="aboutBtn" label="About" width="200"/>
    </mx:Panel>
</mx:Application>

Answer 2

不了解Flex，但在Flash中你会实现Event.RESIZE事件监听器，如：

stage.addEventListener(Event.RESIZE, resizeInterface);

然后在resizeInterface函数中调整按钮的大小。

Flex，调整父级调整大小时调整子级大小

2 个答案: