在 PowerApps 中新增捲動畫面Add a scrolling screen in PowerApps

建立使用者能捲動以顯示不同項目的畫面。Create a screen that users can scroll to show different items. 例如,您可能想要建立一個可以用直條圖和折線圖來顯示資料的應用程式。For example, you might want to create an app that displays data in a column chart and line chart. 藉由新增捲動畫面,您可以新增多個控制項,並在使用者捲動時顯示。By adding a scrolling screen, you can add multiple controls, which users can display if they scroll.

當您在區段中新增多個控制項時,不論是手機應用程式或平板電腦應用程式,控制項都會保持在區段中的相對位置。When you add multiple controls in a section, the controls maintain their relative positions within that section, regardless if it's a phone app or a tablet app. 請注意,螢幕大小和方向可能會決定區段的排列方式。Note that the screen size and orientation may determine how the sections are arranged.

 

必要條件Prerequisites

建立捲動畫面Create a scrolling screen

  1. 在 [常用] 索引標籤上,按一下或點選 [新增畫面]:On the Home tab, click or tap New screen:

    新增畫面到應用程式的選項

  2. 在 [常用] 索引標籤上,按一下或點選 [配置],然後按一下或點選選項來新增無限捲動的畫布:On the Home tab, click or tap Layouts, and then click or tap the option to add an infinite scrolling canvas:

    新增無限捲動畫布的選項

    已新增畫布:The canvas is added:

    具有以預設方式顯示之無限捲動畫布的畫面

新增元素Add elements

現在,讓我們新增一些控制項至畫布,看看捲動畫面如何運作。Now, let's add some controls to the canvas to see how the scrolling screen works.

  1. 在您新增的畫布中,按一下或點選 [從 [插入] 索引標籤新增項目]。In the canvas you added, click or tap Add an item from the Insert tab.

  2. 在 [插入] 索引標籤上,按一下或點選 [圖表],然後按一下或點選 [直條圖]。On the Insert tab, click or tap Charts, and then click or tap Column Chart.

    新增直條圖的選項

    直條圖顯示在畫面上的第一張卡片中:A column chart appears in the first card on the screen:

    預設的直條圖

  3. 在 [插入] 索引標籤上,按一下或點選 [文字],然後按一下或點選 [手寫筆輸入]:On the Insert tab, click or tap Text, and then click or tap Pen input:

    新增手寫筆控制項的選項

  4. 將手寫筆控制項移動到圖表下方,然後調整手寫筆控制項的大小,以覆蓋卡片的底部:Move the pen control below the chart, and resize the pen control to cover the bottom of the card:

    移動並調整手寫筆控制項的大小

新增區段Add a section

現在,讓我們新增包含另一個控制項的卡片。Now, let's add another card with another control.

  1. 在接近畫面底部的位置,按一下或點選 [新增區段]:Near the bottom of the screen, click or tap Add section:

    新增區段的選項

    卡片將新增到畫面上:A new card is added to the screen:

    位於預設區段下方的新卡片

  2. 在選取卡片的狀態下,移至 [插入] 索引標籤,按一下或點選 [圖表],然後按一下或點選 [折線圖]。With the card still selected, go to the Insert tab, click or tap Charts, and then click or tap Line chart.

    新的圖表太大,因而無法與其他控制項一起顯示於畫面上:The new chart is too big to appear on the screen with the other controls:

    新增到新卡片底部的折線圖

  3. 按下 F5 開啟 [預覽] 模式 (或按一下或點選右上角的播放圖示)。Open Preview mode by pressing F5 (or by clicking or tapping the play icon near the upper-right corner).

    開啟預覽模式

  4. 向下捲動以顯示新的折線圖。Scroll down to display the new line chart.

    預覽能顯示折線圖