如何在列表中使用mutableStateFlow搜索项目

Question

我正在学习Android中的Kotlin流动。我想在我的列表中基本上即时搜索，然后过滤以在reyclerview中显示。我在Google中搜索，发现了这个惊人的 edimport 文章。这篇文章基本上是从Google搜索的。我想在列表中搜索项目，并在reyclerview中显示。有人可以指导我如何开始。我正在更详细地解释

我有一个搜索框和一个 reyclerview 一个项目 abc One，ABC二，xyz One，XYZ ONE，xyz二...等等/strong>。

主图像当所有数据均组合时

​

​或资本a 我只想在recyclerview中显示两个项目，看起来

“ nofollow noreferrer”>

” alt =“在 搜索框中的错误文本我想基本上显示一个未找到的短信，看起来像

任何指导都很棒。谢谢，

我添加了我的一件代码

ExploreViewModel.kt

class ExploreViewModel(private var list: ArrayList<Category>) : BaseViewModel() {

    val filteredTopics = MutableStateFlow<List<opics>>(emptyList())
    var topicSelected: TopicsArea? = TopicsArea.ALL
        set(value) {
            field = value
            handleTopicSelection(field ?: TopicsArea.ALL)
        }


    private fun handleTopicSelection(value: TopicsArea) {
        if (value == TopicsArea.ALL) {
            filterAllCategories(true)
        } else {
            filteredTopics.value = list.firstOrNull { it.topics != null && it.title == value.title }
                ?.topics?.sortedBy { topic -> topic.title }.orEmpty()
        }
    }

    fun filterAllCategories(isAllCategory: Boolean) {
        if (isAllCategory && topicSelected == TopicsArea.ALL && !isFirstItemIsAllCategory()) {
            list.add(0, code = TopicsArea.ALL.categoryCode))
        } else if (isFirstItemIsAllCategory()) {
            list.removeAt(0)
        }
        filteredTopics.value = list.flatMap { it.topics!! }.distinctBy { topic -> topic.title }.sortedBy { topic -> topic.title }
    }

    private fun isFirstItemIsAllCategory() = list.firstOrNull()?.code == TopicsArea.ALL
}

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.SearchView
        android:id="@+id/searchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="16dp"
        app:closeIcon="@drawable/ic_cancel"
        app:layout_constraintBottom_toTopOf="@+id/exploreScroll"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintVertical_chainStyle="packed" />

    <HorizontalScrollView
        android:id="@+id/exploreScroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        android:scrollbars="none"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/searchView">

        <com.google.android.material.chip.ChipGroup
            android:id="@+id/exploreChips"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipSpacingHorizontal="10dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:singleLine="true"
            app:singleSelection="true" />

    </HorizontalScrollView>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/exploreList"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="20dp"
        android:paddingTop="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_default="wrap"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/exploreScroll" />

</androidx.constraintlayout.widget.ConstraintLayout>

category.kt

@Parcelize
data class Category(
    val id: String? = null,
    val title: String? = null,
    val code: String? = null,
    val topics: List<Topics>? = null,
) : Parcelable

topics.kt

@Parcelize
data class Topics(
    val id: String? = null,
    val title: String? = null
) : Parcelable

Dummy数据并来自服务器

fun categoriesList() = listOf(
    Categories("21", "physical", listOf(Topics("1", "Abc one"), Topics("2", "Abc Two"))),
    Categories("2211", "mind", listOf(Topics("1", "xyz one"), Topics("2", "xyz two"))),
    Categories("22131", "motorized", listOf(Topics("1", "xyz three"), Topics("2", "xyz four"))),
)

在我的视图模型列表中持有上方的虚拟数据。在我的recyclerview中，我正在传递整个对象，我正在做flatmap将所有数据组合到列表中。确保在recyclerview中使用主题，并使用title属性。在图像中，ABC一个，ABC两个在主题中保存。谢谢

我将转到 a2 建议，因为我已经有数据转换为流程并通过适配器。我也添加了我的活动代码。

exploreactivity.kt

class ExploreActivity : AppCompatActivity() {

    private val binding by lazy { ExploreLayoutBinding.inflate(layoutInflater) }
    val viewModel by viewModel<ExploreViewModel> {
        val list = intent?.getParcelableArrayListExtra(LIST_KEY) ?: emptyList<Category>()
        parametersOf(list)
    }
    var exploreAdapter = ExploreAdapter { topic -> handleNextActivity(topic) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)
        setupView()
    }

    fun setupView() {
        setupSearchView()
        setupFilteredTopic()
        setupExploreAdapter()
    }

    private fun setupFilteredTopic() {
        lifecycleScope.launchWhenCreated {
            repeatOnLifecycle(Lifecycle.State.CREATED) {
                viewModel.filteredTopics.collect { filteredTopicsList ->
                    exploreAdapter.submitList(filteredTopicsList)
                }
            }
        }
    }

    fun setupSearchView() {
        binding.searchView.apply {
            setOnQueryTextListener(object : SearchView.OnQueryTextListener {
                override fun onQueryTextSubmit(query: String?) = false
                override fun onQueryTextChange(newText: String?): Boolean {
                    return true
                }
            })
            
        }
    }

    fun setupExploreAdapter() {
        with(binding.exploreList) {
            adapter = exploreAdapter
        }
    }
}

更新2

ExploreViewModel.kt

 val filteredCategories = query
        .debounce(200) // low debounce because we are just filtering local data
        .distinctUntilChanged()
        .combine(filteredTopics) { queryText, categoriesList ->
            val criteria = queryText.lowercase()
            if (criteria.isEmpty()) {
                    return@combine filteredTopics 
            } else {
                categoriesList.filter { category -> category.title?.lowercase()?.let { criteria.contains(it) } == true }
            }
        }

时，我会遇到错误

当我设置在适配器固定

中 a href =“ https://i.sstatic.net/dkasf.png” rel =“ nofollow noreferrer”>

Answer 1

您链接的教程具有搜索视图产生的流程。如果要将搜索功能保留在ViewModel中，则可以将MutableStateFlow放在视图模型中，该搜索视图将间接更新。您可以公开一个属性以更新查询。

这可以做到两种不同的方法，具体取决于您（a）是否已经拥有要快速查询的数据的完整列表，或者（b）您想查询服务器或数据库，每当您的查询文本更改时。

然后甚至（a）可以分解为：（a1）您有一个静态普通旧列表，或（a2）您的源列表来自流量，例如不基于查询参数的返回的房间流。

下面的所有代码都在ViewModel类中。

a1：

private val allCategories = categoriesList()
private val query = MutableStateFlow("")

// You should add an OnQueryTextListener on your SearchView that
// sets this property in the ViewModel
var queryText: String
    get() = query.value
    set(value) { query.value = value }

// This is the flow that should be observed for the updated list that 
// can be passed to the RecyclerView.Adapter.
val filteredCategories = query
    .debounce(200) // low debounce because we are just filtering local data
    .distinctUntilChanged()
    .map { 
        val criteria = it.lowercase()
        allCategories.filter { category -> criteria in category.title.lowercase }
    }

a2：

在此示例中，我为上游服务器查询提供了一个简单的占位符流。这可能是任何流程。

private val allCategories = flow {
    categoriesList()
}
private val query = MutableStateFlow("")

// You should add an OnQueryTextListener on your SearchView that
// sets this property in the ViewModel
var queryText: String
    get() = query.value
    set(value) { query.value = value }

// This is the flow that should be observed for the updated list that 
// can be passed to the RecyclerView.Adapter.
val filteredCategories = query
    .debounce(200) // low debounce because we are just filtering local data
    .distinctUntilChanged()
    .combine(allCategories) { queryText, categoriesList ->
        val criteria = queryText.lowercase()
        categoriesList.filter { category -> criteria in category.title.lowercase }
    }

b

private val query = MutableStateFlow("")

// You should add an OnQueryTextListener on your SearchView that
// sets this property in the ViewModel
var queryText: String
    get() = query.value
    set(value) { query.value = value }

// This is the flow that should be observed for the updated list that 
// can be passed to the RecyclerView.Adapter.
val filteredCategories = query
    .debounce(500) // maybe bigger to avoid too many queries
    .distinctUntilChanged()
    .map { 
        val criteria = it.lowercase()
        categoriesList(criteria) // up to you to implement this depending on source
    }