Pokazywanie elementów o różnej wysokości w galerii usługi PowerAppsShow items of different heights in a PowerApps gallery

Jeśli różne elementy w Twoim zestawie danych zawierają różne ilości danych w tym samym polu, możesz całkowicie pokazać elementy zawierające więcej danych bez dodawania pustego miejsca po elementach, które zawierają mniej danych.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. Dodaj i skonfiguruj kontrolkę galerii Elastyczna wysokość, co umożliwi wykonanie następujących czynności:Add and configure a Flexible height gallery control so that you can:

  • Skonfigurowanie kontrolek Etykieta, aby mogły być rozwijane lub zwijane w zależności od ich zawartości.Configure Label controls to expand or shrink based on their contents.
  • Ustawienie każdej kontrolki tak, aby była automatycznie wyświetlana zaraz pod kontrolką powyżej.Position each control so that it automatically appears just under the control above it.

W tym samouczku wyświetlisz dane dotyczące produktów podłogowych w kontrolce galerii Elastyczna wysokość.In this tutorial, you show data about flooring products in a Flexible height gallery control. Obraz każdego produktu pojawi się 5 pikseli poniżej omówienia bez względu na to, czy omówienie zawiera pięć, czy też dwa wiersze tekstu.The image of each product appears 5 pixels below the overview, whether the overview contains five lines of text or two lines.

Końcowa aplikacja

Sugerowana lekturaSuggested reading

Jeśli kontrolki nigdy nie były dodawane do galerii, to przed kontynuowaniem tego tematu postępuj zgodnie z instrukcjami w temacie Pokazywanie listy elementów.If you've never added controls to a gallery, follow the steps in Show a list of items before you proceed in this topic.

Dodawanie danych do pustej aplikacjiAdd data to a blank app

  1. Pobierz ten plik programu Excel, który zawiera nazwy, omówienia i linki do obrazów produktów podłogowych.Download this Excel file, which contains names, overviews, and links to images of flooring products.

    Produkty podłogowe

  2. Przekaż plik programu Excel do konta magazynu w chmurze, takiego jak OneDrive, Dropbox lub Google Drive.Upload the Excel file to a cloud-storage account such as OneDrive, Dropbox, or Google Drive.
  3. W programie PowerApps Studio kliknij lub naciśnij pozycję Nowy w menu Plik.In PowerApps Studio, click or tap New on the File menu.
  4. Na kafelku Pusta aplikacja kliknij lub naciśnij pozycję Układ telefonu.On the Blank app tile, click or tap Phone layout.

    Opcja Nowy w menu Plik

  5. Dodaj połączenie do tabeli FlooringEstimates w pliku programu Excel.Add a connection to the FlooringEstimates table in the Excel file.

    Aby uzyskać więcej informacji, zobacz Dodawanie połączenia.For more information, see Add a connection.

  1. Na karcie Wstawianie kliknij lub naciśnij pozycję Galeria, a następnie kliknij lub naciśnij pozycję Elastyczna wysokość.On the Insert tab, click or tap Gallery, and then click or tap Flexible height.

    Dodawanie galerii

  2. Zmień rozmiar galerii, aby zająć cały ekran.Resize the gallery to take up the entire screen.
  3. Ustaw właściwość Items galerii na wartość FlooringEstimates.Set the gallery's Items property to FlooringEstimates.

Pokazywanie nazw produktówShow the product names

  1. W lewym górnym rogu galerii kliknij lub naciśnij ikonę ołówka, aby wybrać szablon galerii.In the upper-left corner of the gallery, click or tap the pencil icon to select the gallery template.

    Ikona ołówka

  2. Po wybraniu szablonu galerii dodaj do niej kontrolkę Etykieta.With the gallery template selected, add a Label control to it.
  3. Ustaw właściwość Text kontrolki Etykieta na następujące wyrażenie:Set the Text property of the Label control to this expression:
    ThisItem.Name ThisItem.Name

    Dodawanie etykiety

Pokazywanie omówień produktówShow the product overviews

  1. Po wybraniu szablonu galerii dodaj inną kontrolkę Etykieta i przenieś ją poniżej pierwszej kontrolki Etykieta.With the gallery template selected, add another Label control, and move it below the first Label control.
  2. Ustaw właściwość Text drugiej kontrolki Etykieta na następujące wyrażenie:Set the Text property of the second Label control to this expression:
    ThisItem.OverviewThisItem.Overview
  3. Mając wybraną drugą kontrolkę Etykieta, kliknij lub naciśnij ikonę nazwa-tag na karcie Zawartość, a następnie zmień nazwę kontrolki na OverviewText.With the second Label control selected, click or tap the name-tag icon on the Content tab, and rename the control to OverviewText.

    Zmienianie nazwy etykiety

  4. Ustaw właściwość AutoHeight pola OverviewText na wartość true.Set the AutoHeight property of the OverviewText box to true.

    Ten krok zapewnia, że pole będzie się zwiększać i zmniejszać, aby dopasować się do zawartości.This step ensures that the box will grow or shrink to fit its contents.

    Automatyczna wysokość tekstu

Pokazywanie nazw produktówShow the product images

  1. Zmień szablon tak, aby był dwa razy wyższy niż przedtem.Resize the template so that it's twice as tall as it was.

    Kontrolki można łatwiej dodawać do szablonu podczas tworzenia aplikacji, a ta zmiana nie wpłynie na wygląd aplikacji po jej uruchomieniu.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. Po wybraniu szablonu galerii dodaj kontrolkę Obraz i przenieś ją poniżej pola OverviewText.With the gallery template selected, add an Image control, and move it below the OverviewText box.
  3. Upewnij się, że właściwość Image kontrolki Obraz jest ustawiona na to wyrażenie:Ensure that the Image property of the Image control is set to this expression:
    ThisItem.ImageThisItem.Image
  4. Ustaw właściwość Y kontrolki Obraz opartą na położeniu i rozmiarze pola OverviewText, jak w tym wyrażeniu: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

    Końcowa aplikacja

Zastosuj tę samą koncepcję, jeśli chcesz dodać większą liczbę kontrolek: ustaw właściwość Y każdej kontrolki na podstawie właściwości Y i Height kontrolki powyżej.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.

Następne krokiNext steps

Dowiedz się więcej na temat sposobu pracy z kontrolką Galeria i formułami.Learn more about how to work with a gallery control and formulas.