當您在 Power Apps 中建置畫布應用程式時，輕鬆建立有吸引力且有效率的表單。 例如，請考慮以下記錄銷售訂單的基本表單：
在本教學課程中，我們將逐步解說建立此表單的步驟。 我們還將研究一些高級主題，例如動態調整欄位大小以填充可用空間。
開始之前
如果您是 Power Apps 的新手 （或只自動產生應用程式），則在深入閱讀本文之前，您會想要 從頭開始建置應用程式 。 透過從頭開始建置應用程式，您將熟悉必要的概念，例如新增資料來源和控制項，這些概念在本文中已提及但未說明。
本文的撰寫方式就好像您有一個名為 Sales order 且包含上圖中的欄位的資料來源一樣。 如果您擁有 Power Apps 每個使用者、每個應用程式或試用授權以及系統管理員或系統自訂員權限，您可以在 Microsoft Dataverse 中 建立資料表 並新增類似欄位。
新增圖庫
從頭開始建立平板電腦應用程式，並新增您的資料來源。
本文討論的所有內容也適用於手機佈局，但手機應用程式通常只有一個垂直列。
新增垂直圖庫控制項，並將其Items屬性設定為'Sales order'。
（選用）若要符合本教學課程中的範例，請變更展示庫的 Layout 以僅顯示 Title and subtitle。
在圖庫中，按一下或點選 SO004。
此記錄將顯示在您依照本文稍後的步驟所建置的表單中。
新增標題列
新增空白畫面，您將在其中放置表單。
在本教學課程之外，您可以將 [資源庫 ] 和 [編輯表單 ] 控制項放在相同的畫面上，但如果您將它們放在不同的畫面上，您將有更多空間可供使用。
在新畫面頂端，新增 Label 控制項，並將其 Text 屬性設定為下列運算式：
「銷售訂單」 & Gallery1.Selected.SalesOrderId標籤會顯示您在資源庫中選取之記錄的銷售訂單數目。
（選用）設定標籤的格式如下：
將其 Align 屬性 設定為 Center。
將其 Size 屬性設定為 20。
將其「填滿」屬性設定為「海軍藍」。
將其 Color 屬性設定為 White。
將其 Width 屬性設定為 Parent.Width。
將其 X 和 Y 屬性設定為 0。
新增表單
新增 [編輯表單] 控制項，然後移動並調整其大小，以填滿標籤下方的畫面。
在下一個步驟中，您將使用右側窗格 （而不是編輯列） 將表單控制項連線到 銷售訂單 資料來源。 如果您使用編輯列，預設情況下表單不會顯示任何欄位。 您一律可以選取右側窗格中的一或多個核取方塊，以顯示您想要的任何欄位。
在右側窗格中，按一下或點選 [未選取資料來源] 旁的向下箭號，然後按一下或點選 [銷售訂單]。
銷售訂單資料來源中的一組預設欄位將以簡單的三欄版面配置顯示。 不過，許多欄位都是空白的，可以需要一些時間才能將它們定位至最終位置。
將表單的 Item 屬性設定為 Gallery1.Selected。
表單會顯示您在圖集或圖片庫中選取的記錄，但預設的欄位集可能與您最終產品中需要的內容不符。
在右側窗格中清除其核取方塊，以隱藏這些欄位：
- 銷售訂單識別碼
- 帳戶
- 銷售人員
- 客戶聯絡方式
移動 訂單狀態 欄位，方法是將其拖曳到左側，然後將其拖放到 客戶採購單參考 欄位的另一側。
您的螢幕應該類似以下範例：
選擇資料卡
顯示的每個欄位在表單上都有對應的資料卡。 此卡片包含一組欄位標題的控制項、輸入方塊、星號 （如果欄位是必填欄位，則會出現） 和驗證錯誤訊息。
您也可以直接在表單上選擇卡片。 選取卡片時，其上方會出現黑色說明。
備註
若要刪除卡片 （而不只是隱藏它），請選取它，然後按 Delete。
將卡片排列在欄中
根據預設，平板電腦應用程式中的表單有三欄，而手機應用程式中的表單則有一欄。 您不僅可以指定表單的欄數，還可以指定所有卡片是否都應符合欄框線。
在此圖中，表單中的資料行數目已從 3 變更為 4，並已選取貼齊至資料行核取方塊。 表單中的卡片會自動排列以符合新的版面配置。
在多個欄中調整卡片大小
根據每張卡片中的資料，您可能希望某些卡片適合單一欄，而其他卡片則跨越多個欄。 如果卡片包含的資料多於您想要在單一欄中顯示的資料，您可以選取卡片，然後拖曳選取方塊左邊框或右邊框上的抓取控點，以擴大卡片。 拖曳控點時，卡片會「貼齊」資料行邊界。
為了使您的設計更具彈性，但保留一些結構，您可以將欄數增加到 12 個。 透過這項變更，您可以輕鬆地將每張卡片設定為跨越整個表單、表單的一半、三分之一、四分之一、六分之一等等。 讓我們看看實際情況。
在右側窗格中，將表單中的欄數設定為 12。
表單外觀上不會明顯變更，但在您拖曳向左或向右的抓取控點時，會有更多的貼齊點。
增加訂單日期卡片的寬度，方法是將右邊第一個貼齊點上的抓取控點往右邊拖曳。
這張牌橫跨表單的12欄中的4欄（或表單的1/3），而不是表單12欄中的3欄（或表單的1/4）。 每當您將卡片寬度增加一個貼齊點，卡片會多橫跨表單的 1/12。
使用 訂單狀態 和 客戶採購單參考 卡重複上一個步驟。
調整 [名稱] 和 [描述] 卡片的大小，以佔用表單的六欄 （或 1/2）。
讓遞送地址的前兩行完全延伸到表單上：
全部完成。 我們有想要的格式，能混合資料列與不同數目的資料行：
操作卡片中的控制項
送貨地址包含我們想要為使用者直觀地分組在一起的幾項資訊。 每個欄位都會保留在自己的資料卡中，但我們可以操縱卡片內的控制項，使它們更好地組合在一起。
選取 [ 第一行 遞送地址 ] 卡片，選取該卡片內的標籤，然後從文字中刪除前三個字。
選取 [ 第二行 遞送地址 ] 卡片，選取該卡片內的標籤，然後刪除其中的所有文字。
只移除標籤控制項可能相當吸引人，而且在許多情況下都將運作得很順利。 但公式可能取決於該控制的存在。 更安全的方法是移除文字，或將控制項的 Visible 屬性設定為 false。
在同一張卡片中，將文字輸入框移至標籤上，以減少地址第一行和第二行之間的間距。
當卡片的內容佔用的空間較少時，卡片的高度會縮小。
現在讓我們把注意力轉向地址的第三行。 與我們剛才所做的類似，讓我們縮短這些卡片的每個標籤的文字，並將文字輸入框排列在每個標籤的右側。 以下是 州 卡的步驟：
| Step | Description | Result |
|---|---|---|
| 1 | 選取 「狀態」卡片，使抓取把手出現在卡片周圍。 |
|
| 2 | 選取卡片內的標籤，使其周圍出現抓取控點。 |
|
| 3 | 將光標放在文本的右側，然後刪除我們不需要的部分。 |
|
| 4 | 使用兩側的抓取控點，調整標籤控制項的大小，以符合新的文字大小。 |
|
| 5 | 選取此卡片中的文字輸入控制項。 |
|
| 6 | 使用兩側的抓取控點，將文字輸入框調整為您想要的大小。 |
|
| 7 | 向上拖曳文字輸入方塊，並拖曳到標籤控制項的右側，然後放下文字輸入方塊。 |
|
| 我們對 州 卡的修改現已完成。 |
|
完成第三行地址的結果：
許多牌一開始都有其屬性的動態公式。 例如，我們調整過大小和上移的文字輸入控制項具有根據其上層寬度的 Width 屬性。 當您移動或調整控制項大小時，這些動態公式會被靜態值取代。 如有需要，您可以使用編輯列還原動態公式。
關閉貼齊至資料行
有時您需要比標準 12 列所能提供的更精細的控制。 關於這些情況，您可以關閉貼齊至資料行，並且手動放置卡片。 表單將繼續貼齊至 12 個資料行，但是您也可以在開始調整大小或重新置放之前，按住 Alt 鍵或 Ctrl + Shift 鍵來覆寫貼齊點。 如需詳細資訊，請參閱 替代行為鍵盤快速鍵。
在我們的範例中，構成位址第三行的四個元件都具有完全相同的寬度。 但這可能不是最佳版面配置，因為城市名稱比州縮寫長，而且國家/地區的文字輸入方塊會因為標籤的長度而較短。 若要最佳化此空間，請關閉右側窗格中的 貼齊至欄 功能，然後在開始調整這些卡片的大小及位置後按住 Alt 或 Ctrl+Shift 鍵。
經過仔細定位後，結果對每個字段都有適當的大小，甚至字段之間的水平間距：
綜上所述，貼齊至資料行開啟和關閉時有什麼差異？
| 行為 | 貼齊至資料行開啟 | 貼齊至資料行關閉 |
|---|---|---|
| 重新調整大小貼齊至 | 您選取的欄數： 1、2、3、4、6 或 12 |
12 欄 |
| 重新調整大小貼齊可被覆寫 | 否 | 是的，開始調整大小後使用 Alt 或 Ctrl+Shift 鍵 |
| 卡片會自動在資料列之間重新進行版面配置（稍後會詳細討論） | Yes | 否 |
設定寬度和高度
與 Power Apps 中的所有內容一樣，表單的版面配置由卡片控制項上的屬性控管。 如前所述，您可以將控制項拖曳至不同位置，或拖曳抓取控點來調整控制項大小，以變更這些屬性的值。 但您會發現，在哪些情況下，您想要更精確地理解和操作這些屬性，尤其是在使用公式使表單動態時。
基本佈局：X、Y 和寬度
X 和 Y 屬性控制卡片的位置。 當我們在原始畫布上使用控制項時，這些屬性會提供絕對位置。 在形式中，這些屬性具有不同的意義：
- X：在一列內排序。
- Y：列號。
與畫布上的控制項類似， Width 屬性會指定卡片的最小寬度 （稍後會詳細介紹最小寬度）。
讓我們來看看我們表單中卡片的 X、 Y 和 Width 屬性：
溢位資料列
如果資料列上的卡片太寬而放不進該資料列，會發生什麼情況？ 通常您無需擔心這種可能性。 貼齊至資料行開啟時，這三個屬性會自動調整，讓所有項目都能完美放進資料列，不會溢位。
但是如果貼齊至資料行關閉，或者在一或多張卡片上的 Width 是根據公式，則會發生資料列溢位。 在此情況下，卡片會自動換行，這樣一來便會有效地建立另一個資料列。 例如，讓我們手動將客戶採購單參考卡 （第一列、第三個項目） 的 Width 屬性變更為 500：
頂行的三張卡片無法再水平排列，因此已新增一行以處理溢出部分。 所有這些卡片的 Y 座標仍然相同，為 0， 名稱 和 描述 卡片的 Y 仍為 1。 具有不同 Y 值的卡片不會跨列合併。
您可以使用此行為來建立完全動態化的佈局，其中卡片會根據 Z 順序放置，並在移至下一列之前盡可能地橫向填滿。 要達到這個效果，請給所有牌相同的 Y 值，並使用 X 作為牌的順序。
填充空間：WidthFit
最後一個範例中的溢位會在 「訂單狀態 」卡片之後建立空格，這是第一列中的第二張卡片。 我們可以手動調整剩餘兩張卡片的 寬度 屬性來填充這個空間，但這種方法很乏味。
或者，請使用 WidthFit 屬性。 如果將一列中的一或多張卡片的此屬性設定為 true ，則該列上的任何剩餘空間都會在它們之間平均分配。 這種行為就是為什麼我們之前說過卡片的 Width 屬性是 最小值，並且看到的內容可以更寬。 這個屬性永遠不會導致卡片縮小，只會膨脹。
如果我們在訂單狀態卡上將 WidthFit 設定為 true，它會填滿可用空間，而第一張卡則保持不變：
如果我們也在 [訂單日期] 卡片上將 WidthFit 設定為 true，則兩張卡片都會平均分割可用空間：
這些卡片上的抓取控點會考慮 WidthFit 所提供的額外寬度，而不是 Width 屬性所提供的最小寬度。 在開啟 WidthFit 時操作 Width 屬性可能會令人困惑;您可能想要將其關閉，變更寬度，然後重新開啟。
WidthFit 什麼時候有用？ 如果您的欄位僅在特定情況下使用，您可以將其 Visible 屬性設定為 false，而該列的其他卡片將自動填滿其周圍的空間。 您可能想要使用公式，僅在另一個欄位具有特定值時才顯示欄位。
在這裡，我們將 [訂單狀態] 欄位的 Visible 屬性設定為靜態 false：
當第二張牌被有效移除後，第三張牌現在可以返回到與第一張牌相同的行。 第一張卡片仍將 WidthFit 設定為 true，因此它單獨展開以填滿可用空間。
由於 訂單狀態 不可見，因此您無法在畫布上輕鬆選取它。 不過，您可以在畫面左側的控制項階層式清單中選取任何控制項，無論是否可見。
高度
Height 屬性會控制每張卡片的高度。 卡片的 高度 等同於 WidthFit，而且一律會設定為 true。 假設 HeightFit 屬性存在，但不要在產品中尋找它，因為這類屬性尚未公開。
您無法關閉此行為，因此變更卡片的高度是一項挑戰。 一行中的所有卡片看起來與最高的卡片高度相同。 您可能會看到這樣的一行：
哪張卡片讓資料列變高？ 在上一個圖形中，已選取 [ 總金額 ] 卡片並顯示高度，但其 [高度] 屬性設定為 80 （與第一列的高度相同）。 若要降低資料列的高度，您必須減少該資料列中最高卡片的 [高度 ]，而且如果不檢閱每張卡片的 [高度 ] 屬性，就無法識別最高的卡片。
自動高度
如果卡片中包含一個控制項，且該控制項的 AutoHeight 屬性設定為 true，則卡片的高度可能會超出您的預期。 例如，許多卡片都包含標籤，如果欄位值導致驗證問題，則會顯示錯誤訊息。
如果沒有任何要顯示的文字 （無錯誤），標籤會摺疊至零高度。 如果你不知道更多，你就不會知道它在那裡，這是應該的：
在畫面左側，控制項清單會顯示 ErrorMessage1，這是我們的標籤控制項。 當您更新應用程式時，您可以選取此控制項，以給予它一些高度，並顯示抓取控點，您可以使用這些控點來定位控制項並調整其大小。 藍色方塊中的 “A” 表示控制項已將 AutoHeight 設定為 true：
此控制項的 Text 屬性會設定為 Parent.Error，可用來根據驗證規則取得動態錯誤資訊。 為了說明的目的，我們將靜態地設定此控制項的 Text 屬性，這會提高其高度（並因此增加卡片高度）以容納文字的長度。
讓我們將錯誤訊息變得長一點，控制項和卡片會再次成長以容納。 資料列的整體高度會成長，並且保留卡片之間的垂直對齊：
