2.4 垂直布局
<p>SkinVerticalLayout表示垂直布局。</p>
<p>垂直布局会将容器里面的组件一个挨着一个地垂直排列起来。</p>
<p>垂直布局不会换列，当组件一个挨一个地排列到头之后，剩下的组件将不会被显示出来。</p>
<p>因此，垂直布局容器的子组件必须能确定自己的布局宽度和布局高度。</p>
<p>通常来说，会将子组件的布局宽度设置为跟父组件宽度相同，否则需要利用属性【LayoutAlignment】确定组件水平方向的坐标。</p>
<h2>请看下面的示例</h2>
<h4>效果图</h4>
<p><img src="http://www.skinui.cn/doc/img/2/4/1.png" alt="垂直布局" /></p>
<h4>布局文件</h4>
<pre><code class="language-xml">&lt;SkinDialog DefaultWidth=&quot;400&quot; DefaultHeight=&quot;300&quot; SysButton=&quot;CLOSE&quot; Icon=&quot;128&quot; Caption=&quot;IDS_LAYOUT_SHOW4&quot; Animation=&quot;SizeChange&quot;&gt;
&lt;SkinVerticalLayout LayoutWidth=&quot;WrapContent&quot; LayoutHeight=&quot;WrapContent&quot; AlignParentHorizontalCenter=&quot;0&quot; AlignParentVerticalCenter=&quot;0&quot;&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;100&quot; LayoutHeight=&quot;30&quot; BkgColor=&quot;ID_COLOR_RED&quot;&gt;
&lt;SkinTextView Text=&quot;1&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;100&quot; LayoutHeight=&quot;60&quot; BkgColor=&quot;ID_COLOR_GREEN&quot;&gt;
&lt;SkinTextView Text=&quot;2&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;SkinRelativeLayout LayoutWidth=&quot;100&quot; LayoutHeight=&quot;90&quot; BkgColor=&quot;ID_COLOR_BLUE&quot;&gt;
&lt;SkinTextView Text=&quot;3&quot; LayoutWidth=&quot;FillParent&quot; LayoutHeight=&quot;FillParent&quot; HorzAlignment=&quot;Center&quot; VertAlignment=&quot;Center&quot; FontColor=&quot;ID_COLOR_WHITE&quot;/&gt;
&lt;/SkinRelativeLayout&gt;
&lt;/SkinVerticalLayout&gt;
&lt;/SkinDialog&gt;</code></pre>
<p>上面的布局，色块一个挨着一个地垂直排列起来。</p>
<p>第一个色块的高度为30像素，第二个色块的高度占父组件高度为30像素，第三个色块的高度为30像素。。</p>