显示 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 行文本还是 2 行文本,每个产品的图像均以 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. 选择第二个“标签”控件后,单击或点击“内容”选项卡上的名称标记图标,然后将控件重命名为“OverviewText”。With 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.