實施谷歌在 jetpack compose android 中放置自動完成文本字段實施

Question

有人在 Jetpack Compose 項目中實現了谷歌自動完成建議文本字段或片段嗎？ 如果是這樣的話，請指導或分享代碼片段，因為我在實施它時遇到了困難。

更新

這是我觸發打開全屏對話框的意圖，但是當我開始在其中輸入時它會關閉，而且我無法弄清楚問題是什么並且需要有關處理活動結果以供閱讀的線索此 compose 函數中的預測結果。

    Places.initialize(context, "sa")

    val fields = listOf(Place.Field.ID, Place.Field.NAME)

    val intent = Autocomplete.IntentBuilder(
        AutocompleteActivityMode.FULLSCREEN,fields).build(context)

        startActivityForResult(context as MainActivity,intent, AUTOCOMPLETE_REQUEST_CODE, Bundle.EMPTY)
                            

Answer 1

我正在使用 MVVM 架構，這就是我實現它的方式：

GooglePlacesApi

我創建了一個 api 用於訪問名為 GooglePlacesApi 的谷歌 api

 interface GooglePlacesApi { @GET("maps/api/place/autocomplete/json") suspend fun getPredictions( @Query("key") key: String = <GOOGLE_API_KEY>, @Query("types") types: String = "address", @Query("input") input: String ): GooglePredictionsResponse companion object{ const val BASE_URL = "https://maps.googleapis.com/" } }

@Query("types") 字段用於指定您在查詢中要查找的內容，您可以查找機構等。可以在此處找到類型

楷模

所以我為此實現創建了 3 個模型：

谷歌預測響應

如果您使用 postman 執行 GET 請求，響應的外觀是：

谷歌預測響應

您可以看到我們有一個帶有“預測”鍵的 object，所以這是我們的第一個 model。

 data class GooglePredictionsResponse( val predictions: ArrayList<GooglePrediction> )

谷歌預測術語

data class GooglePredictionTerm( val offset: Int, val value: String )

谷歌預測

data class GooglePrediction( val description: String, val terms: List<GooglePredictionTerm> )

我只需要這些信息，如果您需要其他信息，請隨時修改模型或創建自己的模型。

GooglePlaces 存儲庫

最后我們創建存儲庫來獲取信息（我使用 hilt 來注入我的依賴項，如果不使用它可以忽略這些注釋）

 @ActivityScoped class GooglePlacesRepository @Inject constructor( private val api: GooglePlacesApi, ){ suspend fun getPredictions(input: String): Resource<GooglePredictionsResponse>{ val response = try { api.getPredictions(input = input) } catch (e: Exception) { Log.d("Rently", "Exception: ${e}") return Resource.Error("Failed prediction") } return Resource.Success(response) } }

在這里，我使用了一個額外的 class 來處理響應，稱為 Resource

 sealed class Resource<T>(val data: T? = null, val message: String? = null){ class Success<T>(data: T): Resource<T>(data) class Error<T>(message: String, data:T? = null): Resource<T>(data = data, message = message) class Loading<T>(data: T? = null): Resource<T>(data = data) }

查看 Model

我再次使用刀柄，所以如果不使用它，請忽略注釋。

 @HiltViewModel class AddApartmentViewModel @Inject constructor(private val googleRepository: GooglePlacesRepository): ViewModel(){ val isLoading = mutableStateOf(false) val predictions = mutableStateOf(ArrayList<GooglePrediction>()) fun getPredictions(address: String) { viewModelScope.launch { isLoading.value = true val response = googleRepository.getPredictions(input = address) when(response){ is Resource.Success -> { predictions.value = response.data?.predictions.: } } isLoading.value = false } } fun onSearchAddressChange(address: String){ getPredictions(address) } }

如果您需要任何進一步的幫助，請告訴我

• 我沒有包括 UI 實現，因為我認為它是單獨的，但這是更容易的部分；）

Answer 2

@Composable
fun MyComponent() {
    val context = LocalContext.current

    val intentLauncher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.StartActivityForResult()
    ) {
        when (it.resultCode) {
            Activity.RESULT_OK -> {
                it.data?.let {
                    val place = Autocomplete.getPlaceFromIntent(it)
                    Log.i("MAP_ACTIVITY", "Place: ${place.name}, ${place.id}")
                }
            }
            AutocompleteActivity.RESULT_ERROR -> {
                it.data?.let {
                    val status = Autocomplete.getStatusFromIntent(it)
                    Log.i("MAP_ACTIVITY", "Place: ${place.name}, ${place.id}")
                }
            }
            Activity.RESULT_CANCELED -> {
                // The user canceled the operation.
            }
        }
    }

    val launchMapInputOverlay = {
        Places.initialize(context, YOUR_API_KEY)
        val fields = listOf(Place.Field.ID, Place.Field.NAME)
        val intent = Autocomplete
            .IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
            .build(context)
        intentLauncher.launch(intent)
    }

    Column {
        Button(onClick = launchMapInputOverlay) {
            Text("Select Location")
        }
    }
}