捲動應用程式版面配置

如果網頁包含的資訊超出螢幕高度,或需要更長且更身歷其境的歷程,請使用捲動檢視區塊。

預設捲動版面配置元件

底部按鈕堆疊的對話方塊

底部按鈕堆疊的對話方塊

底部有兩個按鈕的對話方塊

自訂捲動版面配置範例

捲動式應用程式畫面不限於設定的元件,而是可以結合元素來建立所需版面配置。請留意捲動畫面的長度,並使用回應式 (百分比) 邊界和邊框間距,確認元件可配合可用螢幕大小調整。

在大螢幕上顯示額外內容

按鈕清單:圖示按鈕,圖示大小為 26dp

按鈕清單:圖示大小為 32 dp 的應用程式按鈕

按鈕清單:圖示大小為 36 dp 的應用程式按鈕

含有切換按鈕的按鈕清單

混合清單,內含單行元素

含有多行元素的混合清單

含有應用程式資訊卡的卡片清單

含有標題資訊卡的資訊卡清單

含自訂資訊卡的資訊卡清單

文字清單

回應式和自動調整行為

Compose 程式庫中的所有元件都會自動配合較大的螢幕尺寸,增加寬度和高度。採用回應式設計做法的捲動檢視區塊通常會配合各種螢幕尺寸調整大小。不過,在某些特殊情況下,您可以使用中斷點覆寫維度,並擴增版面配置,以擴展功能、提升瀏覽體驗,或讓內容更適合在畫面上顯示。

如要確認是否已正確定義回應式參數,請使用下列檢查清單:

  • 套用建議的上下和兩側邊界。
  • 以百分比值定義外部邊界,避免在可捲動容器的開頭和結尾遭到裁剪。
  • 在 UI 元素之間套用固定 DP 值的邊界。
  • 建議在 225 dp 處套用中斷點,以便在大螢幕上顯示額外內容,或讓現有內容更易於瀏覽。