在 PowerApps 藝廊中顯示不同高度的項目Show items of different heights in a PowerApps gallery

如果您資料集中的不同項目在相同欄位包含不同的資料量,您可以完全顯示含有更多資料的項目,而無須在包含較少資料的項目之後新增空格。If different items in your data set contain different amounts of data in the same field, you can completely show items that contain more data without adding empty space after items that contain less data. 新增和設定彈性高度控制項,以便您可以︰Add and configure a Flexible height gallery control so that you can:

  • 設定標籤控制項來根據其內容展開或壓縮。Configure Label controls to expand or shrink based on their contents.
  • 放置每個控制項,使其剛好自動出現在它上方控制項之下。Position each control so that it automatically appears just under the control above it.

在本教學課程中,您會在彈性高度藝廊控制項中顯示有關地板產品的資料。In this tutorial, you show data about flooring products in a Flexible height gallery control. 每項產品的影像會在概觀下出現 5 個像素,無論概觀包含五行或兩行文字。The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

最終應用程式

建議閱讀資料Suggested reading

如果您從未將控制項新增至藝廊,請遵循顯示項目清單中的步驟後,再繼續進行本主題。If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

將資料新增至空白的應用程式Add data to a blank app

  1. 下載這個 Excel 檔案,其中包含地板產品的名稱、概觀和影像的連結。Download this Excel file, which contains names, overviews, and links to images of flooring products.

    地板產品

  2. 將這個 Excel 檔案上傳到雲端儲存體帳戶,例如 OneDrive、Dropbox 或 Google Drive。Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. 在 PowerApps Studio 中,按一下或點選 [檔案] 功能表中的 [新增]。In PowerApps Studio, click or tap New on the File menu.
  4. 在 [空白應用程式] 圖格上,按一下或點選 [手機配置]。On the Blank app tile, click or tap Phone layout.

    檔案功能表上的新增選項

  5. 新增連接至 Excel 檔案中的 FlooringEstimates 資料表。Add a connection to the FlooringEstimates table in the Excel file.

    如需詳細資訊,請參閱新增連接For more information, see Add a connection.

  1. 在 [插入] 索引標籤上,按一下或點選 [資源庫],然後按一下或點選 [高度有彈性]。On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    新增資源庫

  2. 將藝廊的大小調整為佔用整個螢幕。Resize the gallery to take up the entire screen.
  3. 將藝廊的 Items 屬性設定為 FlooringEstimatesSet the gallery's Items property to FlooringEstimates.

顯示產品名稱Show the product names

  1. 在藝廊的左上角,按一下或點選鉛筆圖示可選取藝廊範本。In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    鉛筆圖示

  2. 選取資源庫範本後,為它新增標籤控制項。With the gallery template selected, add a Label control to it.
  3. 標籤控制項的 Text 屬性設定為這個運算式︰Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    新增標籤

顯示產品概觀Show the product overviews

  1. 選取資源庫範本後,新增另一個標籤控制項,並將它移到第一個標籤控制項之下。With the gallery template selected, add another Label control, and move it below the first Label control.
  2. 將第二個標籤控制項的 Text 屬性設定為這個運算式︰Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. 選取第二個標籤控制項後,在 [內容] 索引標籤上按一下或點選名稱標記圖示,然後將控制項重新命名為 OverviewTextWith the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    重新命名標籤

  4. OverviewText 方塊的 AutoHeight 屬性設定為 trueSet the AutoHeight property of the OverviewText box to true.

    這個步驟可確保方塊中會放大或縮小以符合其內容。This step ensures that the box will grow or shrink to fit its contents.

    文字自動高度

顯示產品影像Show the product images

  1. 調整範本的大小,使它成為原本高度的兩倍。Resize the template so that it's twice as tall as it was.

    您可以更輕鬆地在建置應用程式時將控制項新增至範本,這項變更不會影響應用程式執行時的外觀。You can add controls to the template more easily as you build the app, and this change won't affect how the app looks when it runs.

  2. 選取藝廊範本後,新增一個影像控制項,並將它移到 OverviewText 方塊之下。With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. 請確認影像控制項的 Image 屬性設定為這個運算式:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. 根據 OverviewText 方塊的位置和大小設定影像控制項的 Y 屬性,如這個運算式所示︰Set the Y property of the Image control based on the position and the size of the OverviewText box, as in this expression:
    OverviewText.Y + OverviewText.Height + 5OverviewText.Y + OverviewText.Height + 5

    最終應用程式

如果您想要新增更多控制項,請套用相同的概念︰根據每個控制項上方控制項的 YHeight 屬性設定每個控制項的 Y 屬性。Apply the same concept if you want to add more controls: set each control's Y property based on the Y and Height properties of the control above it.

後續步驟Next steps

深入了解如何使用藝廊控制項和公式Learn more about how to work with a gallery control and formulas.