Jetpack Compose：实现无光标自动激活的BasicTextField

要实现屏幕加载后BasicTextField呈现激活视觉状态（标签上移动画、占位符可见）但不显示光标，仅在用户交互时才显示光标，你可以通过手动控制MutableInteractionSource的交互状态模拟激活效果，同时延迟焦点请求到用户点击时。

关键实现逻辑 #

• 用MutableInteractionSource手动发送FocusInteraction.Focus事件，触发标签上浮动画，无需真正获取焦点。
• 搭配FocusRequester，仅在用户点击TextField时才请求焦点，此时光标正常显示。
• 通过cursorBrush控制光标可见性，仅在真正获焦时显示光标。

修改后的完整代码 #

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsFocusedAsState
import androidx.compose.foundation.interaction.rememberMutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.focusable
import androidx.compose.foundation.text.input.TextFieldLineLimits
import androidx.compose.foundation.text.input.TextFieldState
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.foundation.text.input.requestFocus
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextFieldDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            val stateOne = rememberTextFieldState(initialText = "Hello")
            val stateTwo = rememberTextFieldState()
            BasicTextFieldExamples(stateOne, stateTwo)
        }
    }

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun BasicTextFieldExamples(
        stateOne: TextFieldState,
        stateTwo: TextFieldState,
    ) {
        Column(
            Modifier
                .fillMaxSize()
                .padding(50.dp)
        ) {
            // 已填充内容的TextField（标签自动上浮）
            BasicTextField(
                state = stateOne,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp),
                readOnly = true,
                interactionSource = rememberMutableInteractionSource(),
                decorator = TextFieldDefaults.decorator(
                    state = stateOne,
                    enabled = true,
                    label = { Text("First Name") },
                    placeholder = { Text("Example 1") },
                    lineLimits = TextFieldLineLimits.Default,
                    outputTransformation = null
                )
            )

            // 目标TextField：启动时激活视觉状态，点击后显示光标
            val focusRequester = remember { androidx.compose.foundation.text.focusRequester() }
            val interactionSource = rememberMutableInteractionSource()
            val isFocused = interactionSource.collectIsFocusedAsState()
            val coroutineScope = rememberCoroutineScope()

            // 启动时手动发送Focus事件，触发标签上浮动画
            LaunchedEffect(Unit) {
                interactionSource.emit(
                    androidx.compose.foundation.interaction.FocusInteraction.Focus()
                )
            }

            BasicTextField(
                state = stateTwo,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .focusable()
                    .focusRequester(focusRequester)
                    .clickable {
                        // 用户点击时请求焦点，显示光标
                        coroutineScope.launch {
                            focusRequester.requestFocus()
                            stateTwo.requestFocus()
                        }
                    },
                interactionSource = interactionSource,
                // 仅在真正获焦时显示光标
                cursorBrush = if (isFocused.value) SolidColor(TextFieldDefaults.colors().cursorColor) else null,
                decorator = TextFieldDefaults.decorator(
                    state = stateTwo,
                    enabled = true,
                    label = { Text("Last Name") },
                    placeholder = { Text("Example 2") },
                    lineLimits = TextFieldLineLimits.Default,
                    interactionSource = interactionSource,
                    outputTransformation = null
                )
            )
        }
    }
}

代码细节说明 #

1. 激活视觉状态触发：通过LaunchedEffect在组件初始化时向MutableInteractionSource发送焦点事件，让标签自动上浮，呈现激活状态。
2. 光标可见性控制：利用cursorBrush参数，只有当TextField真正获焦（用户点击后）才设置光标颜色，否则光标隐藏。
3. 点击请求焦点：给TextField添加clickable修饰符，用户点击时通过FocusRequester请求焦点，此时光标正常显示，同时保持激活视觉状态。

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