Jetpack Compose：聚焦时转为TextField的Text组件实现方案咨询

核心思路是用状态驱动UI切换，通过布尔状态控制显示Text还是TextField，同时结合状态处理文本样式和交互逻辑。以下是具体实现：

步骤1：定义核心状态 #

在可组合函数中声明两个关键状态：

• isEditing：控制当前显示Text还是TextField
• textValue：存储文本内容，双向绑定到TextField

步骤2：条件渲染组件 #

根据isEditing的值，渲染对应组件：

• 非编辑状态：显示带条件样式的Text，点击后切换到编辑状态
• 编辑状态：显示TextField，完成编辑（失去焦点、按回车）后切回Text

步骤3：处理条件样式 #

针对Text组件，根据业务条件设置样式，优先应用删除线（TextDecoration.LineThrough），可叠加其他样式。

完整代码示例 #

import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextDecoration
import androidx.compose.ui.text.input.ImeAction

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EditableStyledText(
    initialText: String,
    shouldShowStrikethrough: Boolean, // 控制删除线的条件
    textColor: Color = Color.Black, // 可选的其他样式参数
    onTextUpdated: (String) -> Unit // 文本更新回调
) {
    val isEditing = remember { mutableStateOf(false) }
    val textValue = remember { mutableStateOf(initialText) }

    if (isEditing.value) {
        TextField(
            value = textValue.value,
            onValueChange = { textValue.value = it },
            modifier = Modifier.focusable(),
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
            keyboardActions = KeyboardActions(
                onDone = {
                    isEditing.value = false
                    onTextUpdated(textValue.value)
                }
            ),
            singleLine = true
        )
    } else {
        Text(
            text = textValue.value,
            color = textColor,
            textDecoration = if (shouldShowStrikethrough) TextDecoration.LineThrough else TextDecoration.None,
            modifier = Modifier.clickable {
                isEditing.value = true
            }
        )
    }
}

// 使用示例
@Composable
fun UsageDemo() {
    val isTaskCompleted = remember { mutableStateOf(false) }
    val taskContent = remember { mutableStateOf("买菜做饭") }

    EditableStyledText(
        initialText = taskContent.value,
        shouldShowStrikethrough = isTaskCompleted.value,
        onTextUpdated = { taskContent.value = it }
    )
}

扩展优化建议 #

• 给TextField添加自动获焦逻辑，切换编辑状态时立即弹出键盘
• 扩展参数支持更多条件样式（比如字体大小、加粗）
• 替换点击触发为长按触发编辑，避免误操作

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