如何在Jetpack Compose中过滤MutableStateListOf数据并在LazyColumn展示

步骤1：完善ProxiesData数据类 #

首先确保你的ProxiesData数据类字段与解析逻辑匹配：

data class ProxiesData(
    val country: String,
    val countryCode: String,
    val id: Int,
    val ip: String,
    val port: Int,
    val proxytype: String
)

步骤2：添加状态变量与过滤逻辑 #

在Compose可组合函数中，添加保存用户选择国家的状态，通过derivedStateOf计算过滤后的代理列表：

@Composable
fun ProxyListScreen(proxiesData: MutableStateList<ProxiesData>) {
    // 保存用户选择的国家，初始为null表示显示全部数据
    val selectedCountry = remember { mutableStateOf<String?>(null) }
    
    // 仅当选择项或源数据变化时，重新计算过滤结果
    val filteredProxies = remember {
        derivedStateOf {
            selectedCountry.value?.let { targetCountry ->
                proxiesData.filter { it.country == targetCountry }
            } ?: proxiesData
        }
    }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        // 国家选择下拉组件
        CountrySelector(
            countries = proxiesData.map { it.country }.distinct(),
            selectedCountry = selectedCountry.value,
            onCountrySelected = { selectedCountry.value = it }
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 展示过滤后的代理列表
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(filteredProxies.value) { proxy ->
                ProxyItem(proxy = proxy)
                Divider()
            }
        }
    }
}

步骤3：实现国家选择下拉组件 #

@Composable
fun CountrySelector(
    countries: List<String>,
    selectedCountry: String?,
    onCountrySelected: (String?) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }
    val displayText = selectedCountry ?: "选择国家"

    Box(modifier = Modifier.fillMaxWidth()) {
        TextButton(
            onClick = { expanded = true },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = displayText, modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Left)
            Icon(Icons.Default.ArrowDropDown, contentDescription = null)
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier.fillMaxWidth()
        ) {
            // 新增"显示全部"选项
            DropdownMenuItem(onClick = {
                onCountrySelected(null)
                expanded = false
            }) {
                Text("显示全部")
            }

            countries.forEach { country ->
                DropdownMenuItem(onClick = {
                    onCountrySelected(country)
                    expanded = false
                }) {
                    Text(country)
                }
            }
        }
    }
}

步骤4：实现单个代理项展示组件 #

@Composable
fun ProxyItem(proxy: ProxiesData) {
    Column(modifier = Modifier.fillMaxWidth().padding(12.dp)) {
        Text(text = "国家: ${proxy.country} (${proxy.countryCode})", fontWeight = FontWeight.Bold)
        Text(text = "IP: ${proxy.ip}:${proxy.port}")
        Text(text = "类型: ${proxy.proxytype}")
        Text(text = "ID: ${proxy.id}", fontSize = 12.sp, color = Color.Gray)
    }
}

关键说明 #

• 用derivedStateOf优化性能，仅在依赖项变化时重新执行过滤逻辑，避免无意义的UI重组。
• 下拉选择器加入"显示全部"选项，方便用户快速切换回完整代理列表。
• 依托MutableStateListOf的特性，当proxiesData源数据更新时，过滤结果会自动同步，UI也会实时刷新。

内容的提问来源于stack exchange，提问作者Gnanesh023