Compose 的自動填入功能

密碼管理工具等應用程式可以將使用者提供的資料，填入其他應用程式的元件。這類將資料填入其他應用程式元件的應用程式，通稱為「自動填入服務」。自動填入架構會管理應用程式和自動填入服務之間的通訊。

填寫憑證和表單是耗時又容易出錯的工作。自動填入功能可節省使用者填寫欄位的時間，並盡可能減少使用者輸入錯誤。

只要幾行程式碼，就能在 Compose 中實作自動填入功能。這項功能可為使用者帶來下列好處：

填入憑證

自動填入功能可讓使用者透過下列方式填入憑證：

• 使用者輕觸已設定自動填入語意的欄位時，系統會顯示自動填入建議。
• 系統會向使用者顯示自動填入建議，並根據使用者輸入的內容篩選建議。

儲存憑證

使用者可以透過下列方式，使用自動填入功能儲存憑證：

• 當使用者在啟用自動填入功能的欄位中輸入新資訊或更新資訊時，系統會觸發儲存對話方塊，提示使用者儲存資訊。儲存方式有兩種：
  • 明確：提交資訊 (例如點選按鈕)
  • 使用者離開網頁時，系統會隱含地傳送
• 視憑證提供者而定，當欄位設有 ContentType.NewPassword 時，系統可能會向使用者建議高強度密碼。

您可以在應用程式中使用自動填入功能，簡化使用者擷取已儲存資料的流程。自動填入功能支援透過 BasicTextField 建立的文字元件，以及所有以該元件為基礎的 Material 文字欄位。

設定自動填入功能

在裝置或模擬器上使用 Autofill API 之前，您必須在「設定」中啟用自動填入功能。您可以在該處指定自動填入功能的憑證供應商，以便儲存憑證。

使用內容類型在文字欄位中加入自動填入功能

如要指出 TextField 已啟用自動填入功能，請使用欄位可接受的類型設定 ContentType 語意。這會向自動填入服務指出哪些使用者資料可能與這個特定欄位相關。使用 ContentType.Username 設定 TextField，讓使用者填入使用者名稱。

設定 ContentType 語意後，使用者就能存取已儲存在裝置憑證供應商中的自動填入資訊。舉例來說，如果使用者已透過筆電上的 Chrome 瀏覽器登入應用程式，並透過憑證提供者儲存密碼，系統就會透過自動填入功能提供憑證。

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics { contentType = ContentType.Username }
)
AutofillSnippets.kt

新增多種類型的自動填入欄位

在某些情況下，您可能希望 TextField 採用多個 ContentType。舉例來說，登入欄位可能接受電子郵件地址或使用者名稱。您可以使用 + 運算子，在 TextField 中新增多種內容類型。

如要瞭解可透過自動填入功能儲存的所有資料類型，請參閱 ContentType 參考資料。

TextField(
    state = rememberTextFieldState(),
    modifier = Modifier.semantics {
        contentType = ContentType.Username + ContentType.EmailAddress
    }
)
AutofillSnippets.kt

使用自動填入功能填寫資料

在 TextField 中新增 ContentType 後，您就不需要執行任何其他操作，使用者就能填寫憑證。

使用者點選已啟用自動填入功能的欄位時，如果系統中儲存了相關資料，鍵盤上方的工具列就會顯示方塊，提示使用者填入憑證。

透過導覽功能使用自動填入功能儲存資料

Compose 會自動嘗試判斷使用者何時離開頁面，並提交輸入的憑證。啟用自動填入功能後，當使用者離開頁面時，系統會自動儲存憑證資訊，不需額外編寫程式碼。

使用自動填入功能明確儲存資料

如要透過含有自動填入功能的文字欄位明確儲存新憑證，自動填入管理工具應提交 (或取消) 自動填入結構定義。本機自動填入管理工具會在必要時與自動填入架構通訊。如要移除使用者輸入的憑證，請呼叫 AutofillManager.cancel 刪除任何待處理資料，而不儲存。

下列程式碼片段說明如何使用按鈕，明確透過自動填入功能儲存資料：

1. 建立本機變數來保存自動填入管理工具，可透過下列方式擷取：

   val autofillManager = LocalAutofillManager.current
   AutofillSnippets.kt

2. 在 TextField(s) 中，透過 Modifier.semantics 新增所選內容類型：

   val autofillManager = LocalAutofillManager.current
   
   Column {
       TextField(
           state = rememberTextFieldState(),
           modifier = Modifier.semantics { contentType = ContentType.NewUsername }
       )
   
       Spacer(modifier = Modifier.height(16.dp))
   
       TextField(
           state = rememberTextFieldState(),
           modifier = Modifier.semantics { contentType = ContentType.NewPassword }
       )
   }
   AutofillSnippets.kt

3. 視需要透過點選按鈕提交自動填入內容：

   val autofillManager = LocalAutofillManager.current
   
   Column {
       TextField(
           state = rememberTextFieldState(),
           modifier = Modifier.semantics { contentType = ContentType.NewUsername },
       )
   
       Spacer(modifier = Modifier.height(16.dp))
   
       TextField(
           state = rememberTextFieldState(),
           modifier = Modifier.semantics { contentType = ContentType.NewPassword },
       )
   
       // Submit button
       Button(onClick = { autofillManager?.commit() }) { Text("Reset credentials") }
   }
   AutofillSnippets.kt

每當使用者離開畫面時，系統就會呼叫 Commit。如果「Submit」按鈕連結至導覽，則不需要呼叫「Commit」。如果您仍希望點選「Submit」觸發儲存對話方塊，請在此處新增「Commit」。

使用者點選按鈕後，系統會顯示這個底部功能表，提示他們將憑證儲存至所選憑證提供者：

透過建議高強度密碼，使用自動填入功能儲存資料

視憑證供應商而定，使用 NewUsername 和 NewPassword 內容類型時，使用者可能會在鍵盤上看到「建議高強度密碼」按鈕。使用者點選後，系統會顯示底部功能表，讓他們儲存憑證。您不需要實作任何其他功能，使用者就能享有這項體驗。

疑難排解

叫用「儲存」使用者歷程時，如果多次點選「暫時不要」，憑證提供者可能就不會再顯示底部功能表。如要重新啟用並再次顯示，請移除封鎖「要記住這組密碼嗎？」的特定應用程式。

進一步自訂自動填入功能

在一般的自動填入使用者歷程中，當啟用自動填入功能的元件填入憑證後，會變更顏色並醒目顯示，向使用者表示自動填入功能已成功完成。

如要自訂醒目顯示顏色，請使用 CompositionLocal 並提供所需顏色。預設的自動填入醒目顯示顏色定義為 Color(0x4dffeb3b)。

val customHighlightColor = Color.Red

CompositionLocalProvider(LocalAutofillHighlightColor provides customHighlightColor) {
    TextField(
        state = rememberTextFieldState(),
        modifier = Modifier.semantics { contentType = ContentType.Username }
    )
}
AutofillSnippets.kt