如何在Jetpack Compose中禁用按钮防止列表添加重复项并标记错误

要完成需求，核心是通过Jetpack Compose的状态管理跟踪输入内容和列表数据，根据输入是否重复来动态控制按钮状态和输入框样式。以下是完整的实现代码：

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DuplicatePreventingList() {
    // 跟踪输入框文本状态
    var inputText by remember { mutableStateOf("") }
    // 存储已添加的列表项（mutableStateListOf会自动触发UI重组）
    val itemList = remember { mutableStateListOf<String>() }

    // 判断输入是否无效（空值或已存在于列表）
    val isInputInvalid = inputText.trim().isEmpty() || itemList.contains(inputText.trim())

    Column(modifier = Modifier.padding(16.dp)) {
        // 带错误状态的输入框
        OutlinedTextField(
            value = inputText,
            onValueChange = { inputText = it },
            label = { Text("输入内容") },
            modifier = Modifier.fillMaxWidth(),
            // 输入重复时切换为错误样式
            colors = androidx.compose.material3.TextFieldDefaults.outlinedTextFieldColors(
                focusedBorderColor = if (isInputInvalid) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
                unfocusedBorderColor = if (isInputInvalid) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.outline,
                textColor = if (isInputInvalid) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.onSurface
            )
        )

        // 带禁用状态的保存按钮
        Button(
            onClick = {
                val trimmedText = inputText.trim()
                if (trimmedText.isNotEmpty() && !itemList.contains(trimmedText)) {
                    itemList.add(trimmedText)
                    inputText = "" // 添加后清空输入框
                }
            },
            enabled = !isInputInvalid, // 根据输入状态控制按钮可用性
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 8.dp)
        ) {
            Text("保存")
        }

        // 展示已添加的列表
        LazyColumn(modifier = Modifier.padding(top = 16.dp)) {
            items(itemList) { item ->
                Text(
                    text = item,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 4.dp)
                )
            }
        }
    }
}

关键实现细节 #

• 状态管理：
  • 用mutableStateOf跟踪输入文本，输入变化时自动触发UI重组。
  • 用mutableStateListOf存储列表项，添加/删除元素时自动更新列表UI。
• 按钮禁用逻辑：
  • 通过isInputInvalid变量判断输入有效性：空值（或仅含空格）、文本已存在时，按钮禁用。
  • 按钮的enabled参数直接绑定该变量，状态变化时自动更新按钮状态。
• 错误状态标记：
  • 利用OutlinedTextField的colors参数，输入重复时将边框和文本颜色切换为主题错误色（红色）。
• 重复校验优化：
  • 对输入文本做trim()处理，避免空格导致的无效重复。
  • 点击按钮时再次校验，防止状态竞态问题。

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