这可能是一个简单的问题,但由于某些原因,我似乎无法弄清楚如何在Flex移动应用程序中从横向更改为纵向时自动调整页面大小。
即。我有一个显示收集客户信息的菜单的页面,我已经说明了我希望如何使用Portrait,但如果我切换到横向格式,则格式化会导致信息不在屏幕上。
这可能是一个我应该知道答案的问题,但是有没有人对如何做这样的事情有任何想法?
提前感谢任何建议!
示例页面
<?xml version="1.0" encoding="utf-8"?>
<s:View backgroundColor="0xF7F9FD" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Page1">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group width="100%" height="100%">
<s:VGroup verticalAlign="top" paddingTop="5" width="100%" height="100%" horizontalAlign="center">
<s:Image id="OLICLogo" verticalAlign="top" horizontalAlign="left" source="@Embed('PuritanLogo.jpg')"/>
</s:VGroup>
<s:VGroup>
<s:HGroup paddingTop="125" paddingLeft="40">
<s:Label id="lblJoint" text="Joint Application" paddingTop="10"/>
<s:CheckBox id="chkBoxJoint"/>
</s:HGroup>
</s:VGroup>
<s:VGroup>
<s:HGroup paddingTop="110" paddingLeft="60">
<s:Label id="lblTitle" paddingLeft="250" text="Personal Information" fontStyle="italic" fontWeight="bold" fontSize="16" paddingTop="10"/>
</s:HGroup>
</s:VGroup>
<s:VGroup paddingLeft="375" paddingTop="200" horizontalAlign="center">
<s:Line visible="true" xFrom="70" xTo="70" yFrom="300" yTo="870">
<s:stroke>
<s:SolidColorStroke color="0x000000" weight="2"/>
</s:stroke>
</s:Line>
</s:VGroup>
<s:VGroup paddingLeft="40" paddingTop="180">
<s:HGroup>
<s:Label id="lblClient" fontWeight="bold" fontSize="16" paddingLeft="125" paddingRight="300" text="Client"/>
<s:Label id="lblSpouse" fontWeight="bold" fontSize="16" text="Spouse"/>
</s:HGroup>
</s:VGroup>
<s:VGroup paddingLeft="50" paddingTop="240">
<s:Label id="lblCFName" paddingTop="10" text="First Name: "/>
<s:Label id="lblCMName" paddingTop="20" text="Middle Name: "/>
<s:Label id="lblCLName" paddingTop="20" text="Last Name: "/>
<s:Label id="lblCDOB" paddingTop="20" text="DOB: "/>
<s:Label id="lblCAddress" paddingTop="50" text="Address: "/>
<s:Label id="lblCCity" paddingTop="20" text="City: "/>
<s:Label id="lblCState" paddingTop="20" text="State: "/>
<s:Label id="lblCZip" paddingTop="20" text="Zip Code: "/>
<s:Label id="lblCEmail" paddingTop="50" text="Email Address: "/>
<s:Label id="lblCPhone" paddingTop="20" text="Phone Number: "/>
<s:Label id="lblCCell" paddingTop="20" text="Cell Phone: "/>
</s:VGroup>
<s:VGroup paddingLeft="170" paddingTop="240">
<s:TextInput width="175" id="txtICFName"/>
<s:TextInput width="175" id="txtICMName"/>
<s:TextInput width="175" id="txtICLName"/>
<s:TextInput width="175" id="txtICDOB"/>
</s:VGroup>
<s:VGroup paddingLeft="170" paddingTop="430">
<s:TextInput width="175" id="txtICAddress"/>
<s:TextInput width="175" id="txtICCity"/>
<s:TextInput width="175" id="txtICState"/>
<s:TextInput width="175" id="txtICZip"/>
</s:VGroup>
<s:VGroup paddingLeft="170" paddingTop="620">
<s:TextInput width="175" id="txtICEmail"/>
<s:TextInput width="175" id="txtICPhone"/>
<s:TextInput width="175" id="txtICCell"/>
</s:VGroup>
<s:VGroup paddingLeft="410" paddingTop="240">
<s:Label id="lblSFName" paddingTop="10" text="First Name: "/>
<s:Label id="lblSMName" paddingTop="20" text="Middle Name: "/>
<s:Label id="lblSLName" paddingTop="20" text="Last Name: "/>
<s:Label id="lblSDOB" paddingTop="20" text="DOB: "/>
<s:Label id="lblSAddress" paddingTop="50" text="Address: "/>
<s:Label id="lblSCity" paddingTop="20" text="City: "/>
<s:Label id="lblSState" paddingTop="20" text="State: "/>
<s:Label id="lblSZip" paddingTop="20" text="Zip Code: "/>
<s:Label id="lblSEmail" paddingTop="50" text="Email Address: "/>
<s:Label id="lblSPhone" paddingTop="20" text="Phone Number: "/>
<s:Label id="lblSCell" paddingTop="20" text="Cell Phone: "/>
</s:VGroup>
<s:VGroup paddingLeft="530" paddingTop="240">
<s:TextInput width="175" id="txtISFName"/>
<s:TextInput width="175" id="txtISMName"/>
<s:TextInput width="175" id="txtISLName"/>
<s:TextInput width="175" id="txtISDOB"/>
</s:VGroup>
<s:VGroup paddingLeft="530" paddingTop="430">
<s:TextInput width="175" id="txtISAddress"/>
<s:TextInput width="175" id="txtISCity"/>
<s:TextInput width="175" id="txtISState"/>
<s:TextInput width="175" id="txtISZip"/>
</s:VGroup>
<s:VGroup paddingLeft="530" paddingTop="620">
<s:TextInput width="175" id="txtISEmail"/>
<s:TextInput width="175" id="txtISPhone"/>
<s:TextInput width="175" id="txtISCell"/>
</s:VGroup>
<s:VGroup paddingTop="800" paddingLeft="325" horizontalAlign="center">
<s:Button id="btnContinue" click="btnContinue_clickHandler(event)" label="Continue"/>
</s:VGroup>
</s:Group>
<fx:Script>
<![CDATA[
protected function btnContinue_clickHandler(event:MouseEvent):void
{
navigator.pushView(AFEAW.Page2);
}
]]>
</fx:Script>
</s:View>
答案 0 :(得分:2)
简而言之,请听听舞台上发出的StageOrientationEvent.ORIENTATION_CHANGE。
在你的事件听众中;做东西。
的更多信息我不确定您的主应用程序代码或视图是否会触发此事件。
答案 1 :(得分:0)
对于移动应用,我尝试使用约束(顶部,底部,左侧,右侧,verticalCenter,horizontalCenter)和百分比宽度/高度 - 以便在方向更改时我不用太担心。当我担心时,我依赖于观察状态。
如果您使用的是Flex View
类,则只有在阻止方向更改时才需要StageOrientationEvent.ORIENTATION_CHANGE。
原因是View
类会自动为您设置“纵向”或“横向”视图状态,前提是您的实现只包含portrait/landscape view state。以下是getCurrentState()
类的View
方法:
public function getCurrentViewState():String
{
var aspectRatio:String = FlexGlobals.topLevelApplication.aspectRatio;
if (hasState(aspectRatio))
return aspectRatio;
// If the appropriate state for the orientation of the device
// isn't defined, return the current state
return currentState;
}
因此,如果您的View
班级有这样的州:
<s:states>
<s:State name="portrait" stateGroups="portraitStates,whatever"/>
<s:State name="landcsape" stateGroups="landscapeStates"/>
<s:State name="landscapeWithControls" stateGroups="landscapeStates"/>
</s:states>
然后,您可以在Flex 4中使用这些具有强大视图状态语法的stateGroup名称来处理所有其他定向杂务。
对于具有复杂视图状态的视图,覆盖getCurrentViewState()
并添加其他州名称非常方便:
override public function getCurrentViewState():String
{
var state:String = super.getCurrentViewState();
if (someCondition)
{
state+="withControls";
}
return state;
}