如果您运行以下mxml代码,您会看到MyLabel1
的位置高于其他标签(例如MyLabel2
)和第二行的其他项目。
如何更改代码,以便MyLabel1
与MyLabel2
等一致?
请注意,所有更改都需要保持MyLabel2
,MyLabel3
和MyButton3
的组在MyLabel1
(左侧)和{{1}之间保持相等的间隔(在右边),就像现在一样。换句话说,第二行的这个中间组不是在容器中居中,而是在左右两侧具有相等的空间。
MyLabel4
答案 0 :(得分:1)
尝试:
将三个hgroup verticalAlign设置为中间,以便包含的项目位于组件高度的中间...
然后你需要指定三个hgroup的高度,因为: - 在第一个只有一个标签(有一定的高度) - 在其他两个中有一个按钮和一个textinput,其高度比简单标签(hgroup 1)高
使用组的自定义高度覆盖内部组件设置的高度
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" >
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="middle" height="25">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>
答案 1 :(得分:1)
只需将verticalAlign =“baseline”添加到大多数外部HGroup。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup top="10" left="20" right="20">
<s:Group width="100%">
<s:HGroup left="0" top="5" verticalAlign="baseline">
<s:Label text="Some Text Here" />
</s:HGroup>
<s:HGroup right="0" verticalAlign="baseline">
<s:Button label="Button1" width="65"/>
<s:Button label="Button2" width="65"/>
</s:HGroup>
</s:Group>
<s:Spacer height="2"/>
<s:HGroup width="100%" verticalAlign="baseline" >
<s:HGroup>
<s:Label text="MyLabel1"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel2"/>
<s:Label text="MyLabel3"/>
<s:Button label="MyButton3" width="85"/>
</s:HGroup>
<s:Spacer width="100%"/>
<s:HGroup verticalAlign="baseline">
<s:Label text="MyLabel4"/>
<s:TextInput id="myID" />
</s:HGroup>
</s:HGroup>
</s:VGroup>
</s:Application>