Jetpack Composeでインクリメンタルサーチ(SearchBar UI)を実装するには

Posted by kwmt27 on Sat, May 15, 2021

はじめに

composeバージョンは 1.0.0-beta04 です。

検索入力欄に検索した文字列を入れるとリストが絞り込まれる、いわゆるインクリメンタルサーチを実装したいとおもいます。下の動画のようなイメージです。

SearchBarのUIを作るには?

だいたいこんな感じで作れます。

ROOMで部分検索するには

@Dao
interface QrResultDao {

    @Query("SELECT * from qr_results WHERE text LIKE '%' || :query || '%' " +
            "OR name LIKE '%' || :query || '%' ORDER BY updated_at DESC")
    suspend fun search(query: String): List<QrResultEntity>
}

こんな感じ。

ViewModelの実装は

SearchQrResultUseCaseを使ってますが、基本的にはDaoのsearchまでの橋渡しなので省略。型変換とかはしています。

SearchBarとリストをくっつけると

listを監視して、検索されたらUIに通知するみたいな感じです。

以上です。



comments powered by Disqus