Compose 中的凹口

螢幕凹口是指某些裝置上延伸至螢幕表面的區域。這可提供從邊到邊的體驗,同時在裝置前端留出空間放置重要感應器。

直向模式下的裁剪範例
圖 1. 肖像模式中的裁剪範例
橫向模式下的裁剪範例
圖 2。橫向模式下的裁剪範例

Android 支援搭載 Android 9 (API 級別 28) 以上版本的裝置的螢幕切口。不過,裝置製造商也可以在搭載 Android 8.1 以下版本的裝置上支援螢幕缺口。

本頁說明如何在 Compose 中實作對有缺口裝置的支援,包括如何使用缺口區域,也就是含有缺口的顯示面上的邊到邊矩形。

預設情況

指定 API 級別 34 以下版本的應用程式,或是未呼叫 enableEdgeToEdge 的活動,預設不會繪製至裁剪區域,除非應用程式繪製至包含螢幕裁剪區的系統列。

在搭載 Android 15 以上版本的裝置上,指定 API 級別 35 以上版本的應用程式,或呼叫 enableEdgeToEdge 的活動,會在裁剪區域中繪製。

換句話說,在搭載 Android 15 以上版本的裝置上,如果應用程式指定 API 級別 35 以上版本,LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULTLAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGESLAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER 會解讀為 LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS,用於非浮動式視窗。

手動處理裁剪資訊

您必須處理裁剪資訊,避免裁剪區域遮蔽重要文字、控制項或需要精細觸控辨識的互動元素 (裁剪區域的觸控靈敏度可能較低)。處理裁剪時,請勿對狀態列高度進行硬式編碼,否則可能會導致內容重疊或裁剪。請改用下列任一方式處理裁剪區域:

針對 Compose,建議您使用 displayCutoutsafeContentsafeDrawing 來處理可組合項中的裁剪插邊。這種做法可讓您在需要時尊重螢幕邊框間距,或在不需要時忽略。

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}

測試內容在裁剪區塊中的顯示方式

請務必測試應用程式的所有畫面和體驗。盡可能在不同類型的裝置上進行測試。如果您沒有裝置邊框,您可以按照下列步驟,在任何搭載 Android 9 以上版本的裝置或模擬器上模擬常見的邊框設定:

  1. 啟用「開發人員選項
  2. 在「開發人員選項」畫面中,向下捲動至「Drawing」部分,然後選取「Simulate a display with a cutout」
  3. 選取裁剪類型。
    在模擬器中模擬螢幕凹口
    圖 3. 使用開發人員選項測試內容的顯示方式。