flex - 垂直和水平佈局表單項目

我想在flex（flash builder 4）中創建一個簡單的表單。我放置了一個表單容器和FormItems裏面。表單項目是例如標準的「客戶」字段，例如第一，最後，地址，城市，州，郵政編碼。flex - 垂直和水平佈局表單項目

默認情況下，它會垂直放置字段並使字段標籤右對齊，這看起來不錯。

不過，我想一些字段是水平的 - 例如，這樣的事情：

First __________ Last ___________ 
Address _____________________ 
    City ___________ St ___ Zip ____

我試圖把第一個/最後在HGroup容器，但完全不是那麼回事 - 我失去了標籤的右對齊，看起來是這樣的：

First __________ Last ___________ 
Address _____________________ 
City ___________ St ___ Zip ____

這是我如何努力使第一個/最後臥式的例子，但它不會是右對齊轉診 - 但是城市推薦是一起對齊的：

<mx:Form x="0" y="307" width="100%"> 
<s:HGroup> 
     <mx:FormItem label="First"> <s:TextInput/></mx:FormItem> 
     <mx:FormItem label="Last"><s:TextInput/></mx:FormItem> 
</s:HGroup> 
<mx:FormItem label="Referral"><s:TextInput/></mx:FormItem><mx:FormItem label="City"> 
    <s:TextInput/> 
</mx:FormItem> 
</mx:Form>

這幾乎就像我需要一種具有colSpan能力的表格佈局，或者？

這個自定義組件看起來前途無量，但沒有出現在FB4工作至少http://cookbooks.adobe.com/post_Multi_Column_Form_Layout-9644.html

此外，是否有任何好的書籍/網站/ etc中討論用戶界面設計/外形設計和類似Flex中，我可以瀏覽？

來源

2011-05-06 Scott Szretter

您是使用MX表單還是Spark表單？並向我們展示您用來放置項目的代碼。 – JeffryHouser 2011-05-06 13:19:43

Szretter不要發表看法;編輯您的原始文章並將您的代碼放在那裏。 – JeffryHouser 2011-05-06 20:59:32

我發現的唯一方法就是使用mx:Grid。主要是因爲mx:GridItem有colSpan或rowSpan屬性。此外，我使用空mx:FormItem代替標籤，因爲您可以使用required屬性爲必填字段顯示（*）。

下面是一個例子：

<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> 
    <mx:Form width="100%" height="100%"> 
    <mx:Grid width="100%" height="100%"> 
     <mx:GridRow> 
     <mx:GridItem> 
      <mx:FormItem label="First" required="true"/> 
     </mx:GridItem> 
     <mx:GridItem> 
      <s:TextInput/> 
     </mx:GridItem> 
     <mx:GridItem> 
      <mx:FormItem label="Last"/> 
     </mx:GridItem> 
     <mx:GridItem> 
      <s:TextInput/> 
     </mx:GridItem> 
     </mx:GridRow> 
     <mx:GridRow> 
     <mx:GridItem width="100%" height="100%"> 
      <mx:FormItem label="Last"/> 
     </mx:GridItem> 
     <mx:GridItem width="100%" height="100%" colSpan="3"> 
      <s:TextInput width="100%"/> 
     </mx:GridItem> 
     </mx:GridRow> 
    </mx:Grid> 
    </mx:Form> 
</s:Group>

希望這有助於

公園

來源

2011-05-06 13:47:20

這幾乎可以工作，至少TextInput字段都是向左對齊的列，但字段標籤都是左對齊的 - 我試圖讓它們都對齊。例如，如果我在同一列中有一個長字段標籤和一個短標籤，短名稱在TextInput字段之前會有很多空白。 – 2011-05-06 20:09:23

看到我對這個問題的回答;爲了讓標籤排列起來，這種方法非常複雜。使用樣式來更改表單項標籤上的對齊對我來說似乎更容易。 – JeffryHouser 2011-05-06 21:21:15

@Scott：那麼你只需使包含標籤的GridItem右對齊，例如： – 2011-05-12 11:40:15

答案是隻使用CSS。在CSS中創建一個label style，指定textAlign爲'left'。然後採取該標籤樣式並將其應用於labelStyleName property on the formItem。

這是一個完整的應用程序，展示瞭解決：

<?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> 
    <fx:Style> 
     @namespace s "library://ns.adobe.com/flex/spark"; 
     @namespace mx "library://ns.adobe.com/flex/mx"; 

     .labelStyleName { 
      textAlign:left; 
     } 
    </fx:Style> 

    <mx:Form x="0" y="307" width="100%"> 
     <s:HGroup> 
     <mx:FormItem label="First" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
     <mx:FormItem label="Last" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
     </s:HGroup> 
     <mx:FormItem label="Referral" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
     <mx:FormItem label="City" horizontalAlign="left" labelStyleName="labelStyleName"> 
      <s:TextInput/> 
     </mx:FormItem> 
    </mx:Form> 

</s:Application>

如果你想輸入的項目更具體的排隊;您可能必須指定一個labelWidth值。

來源

2011-05-06 21:19:27 JeffryHouser

如果您想要列對齊，您應該避免使用多個HGroups，當您縮小瀏覽器窗口的大小時，它很容易中斷，以致它無法一次顯示所有內容。內容溢出邏輯將最有可能破壞對齊。使用mx：Grid作爲最終解決方案，或使用s：Form來製作非常簡單的案例。

來源

2013-03-25 10:43:37 jediz

flex - 垂直和水平佈局表單項目

回答

相關問題