Power Apps 響應(yīng)式布局基礎(chǔ)概念

時間：2023-09-23 15:36:02 | 來源：網(wǎng)站運營

時間：2023-09-23 15:36:02 來源：網(wǎng)站運營

Power Apps 響應(yīng)式布局基礎(chǔ)概念：什么是布局容器




布局容器是 Power Apps 畫布應(yīng)用在 20年11月 推出的一個布局控件。通過布局容器可以根據(jù)容器的大小自動調(diào)整控件的大小，從而實現(xiàn)響應(yīng)式布局，節(jié)省了手動定位控件位置的時間。

如何使用布局容器




首先需要在編輯應(yīng)用的文件-設(shè)置中將【調(diào)整為適合頁面】給關(guān)閉，







之后回到畫布應(yīng)用編輯界面，點擊左側(cè)的插入選項卡，展開布局可以看到其中有3個容器控件，分別是【水平容器】，【垂直容器】和【容器】







讓我們將【水平容器】拖到畫布中。







接下來可以往水平容器中添加其他控件。

比如添加三個按鈕。







接下來讓我們切換到樹狀視圖，可以看到被添加的三個按鈕都被插入到了容器控件下方。







我們看一下容器控件中有哪些可以配置的屬性。

【方向】：用來控制容器中元素的排列方式，因為當(dāng)前是水平布局，所以容器中的按鈕就是橫向排列，如果我們將【方向】改為垂直，容器中的控件將垂直排列。（這和我們直接在插入選項卡中插入【垂直布局】容器的效果一樣 ）







我們將容器控件改為水平布局，之后適當(dāng)拉大一下容器的寬度。

可以看到容器中的控件都是在左上角對齊的。







這些對齊方式就是通過【兩端對齊（水平）】和【對齊（垂直）】屬性進行的控制。

當(dāng)我們將水平和垂直都設(shè)置為居中時，按鈕就會居中在容器中。







或者可以設(shè)置兩端對齊 ，可以看到容器中的按鈕會隨著容器本身的寬度變化，依然保持著三等分的水平位置。







將垂直對齊改為【拉伸】后，容器中控件的高度會隨著容器本身高度而變化，一直保持著撐滿整個高度。







【間隔】用來定義容器中控件的間隔距離，如果設(shè)置為兩端對齊，那這個間隔就無效了，因為系統(tǒng)會自動來設(shè)置間隔。







【溢出】用來定義在容器中寬度過小，導(dǎo)致容器中控件寬度超過容器寬度時，是顯示滾動條，還是隱藏多余部分。







但如果我們此時勾選了【換行】，當(dāng)控件超出容器寬度時會自動換到下一行。







以上這些就是在容器中的基本屬性配置，除此之外在容器中的控件也會有一些特殊的地方，

我們選中容器中的一個按鈕，可以看到一個【在容器中對齊】的屬性，該屬性會配置控件的對齊方式，默認(rèn)是【由容器設(shè)置】







但如果我們進行了自定義，比如把其中一個設(shè)置為【拉伸】，那他就會脫離容器本身的設(shè)置，單獨應(yīng)用自定義的對齊方式。（前提要把容器的換行關(guān)上）







下方還可以看到一個【靈活寬度】配置，如果將其打開，該控件的寬度會占據(jù)被分配在容器中的所有寬度。







如果我們在容器中對多個控件開啟了【靈活寬度】后，可以通過【填充部分】來定義指定控件所占的比例。比如將三個按鈕都開啟靈活寬度，此時再把第一個按鈕的填充部分設(shè)置為 4 ，那就相當(dāng)于 第一個按鈕占 4個寬度位，第二個和第三個分別占1個寬度位。

也就是說第一個按鈕會占整個容器寬度的6分之4。







新的屏幕模板




除此之外，在我們嘗試新建屏幕時，會多出3個新的屏幕模板。

這些屏幕模板就是 Power Apps 通過布局控件去定義的頁面







比如我們點擊【頁面、主要部分、頁腳】

此時新建的屏幕會整體有一個水平布局容器，并在該容器下方嵌套了3個容器。







并且最外圍的容器寬度是 Parent.Width ，高度是 Parent.Height 然后容器的水平布局也是拉伸，這表示我的屏幕有多大，該容器就會有多大，容器中的控件也會隨著屏幕的大小發(fā)生變化。這就是響應(yīng)式布局，可以根據(jù)設(shè)備屏幕大小，自動改變界面的樣式。







而在該容器下方的 HeaderContainer 中，我們可以發(fā)現(xiàn)該容器的高度被固定為了 75 。這個高度是不會隨著屏幕大小而改變的。







FooterContainer 同樣將高度定義為了 75 .

此時 MainSectionContainer 的高度被定義為靈活高度后，就相當(dāng)于中間區(qū)域會隨著屏幕高度發(fā)生變化，但是上下兩個部分永遠留了 75 高度。







在響應(yīng)式布局中添加控件




介紹完容器的屬性，和新增的響應(yīng)式屏幕模板后，我們來看一下如何在響應(yīng)式屏幕中添加控件。

首先在 Header 中添加一個文本標(biāo)簽。







之后更改 Header容器的對齊，將其改為居中對齊。







并給 Header 容器添加一個背景色。







之后將文本標(biāo)簽控件的靈活高度打開，文本對齊設(shè)置為居中對齊。







設(shè)置下文本內(nèi)容，顏色和字號。







此時我們運行應(yīng)用，畫布會撐滿整個屏幕







如果瀏覽器屏幕縮小，畫布中的內(nèi)容也會同步縮小。







我們在 Footer 中同樣可以添加兩個標(biāo)簽，設(shè)置文本并配置樣式后，將 Footer 容器的對齊方式改為兩端對齊，此時應(yīng)用的底部也會實現(xiàn)響應(yīng)式的布局，根據(jù)屏幕寬度不同，兩個文字始終定位在屏幕底部左右兩端。







在 Main容器中添加一個高度靈活的庫控件，并添加表單窗體控件后即可實現(xiàn)一個最簡單的響應(yīng)式應(yīng)用。