Отображение элементов разной высоты в коллекции PowerAppsShow 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

Если вы никогда не добавляли элементы управления в коллекции, перед началом работы выполните действия, описанные в статье Show a list of items (Отображение списка элементов).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. На плитке Blank app (Пустое приложение) щелкните или нажмите Phone layout (Макет телефона).On the Blank app tile, click or tap Phone layout.

    Пункт "Создать" в меню "Файл"

  5. Добавьте подключение в таблицу FlooringEstimates из файла Excel.Add a connection to the FlooringEstimates table in the Excel file.

    Дополнительные сведения см. в статье Add a data connection in PowerApps (Добавление подключения к данным в PowerApps).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 значение FlooringEstimates.Set 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. Задайте для свойства AutoHeight текстового поля OverviewText значение true.Set 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. Задайте свойство Y элемента управления Изображение с учетом положения и размера текстового поля OverviewText, как в следующем примере: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

    Окончательный вид приложения

Сделайте то же самое, если требуется добавить дополнительные элементы управления. Задайте свойство Y каждого элемента управления с учетом свойств Y и Height элемента управления над ним.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.