AnimatedVisibility内部TextField请求焦点导致崩溃的替代解决方案咨询

我完全懂你遇到的这个头疼问题——点击搜索按钮后，想让展开的TextField自动获取焦点，但动画还没跑完、组件还没完成组合，就触发焦点请求，直接导致FocusRequester未初始化的崩溃。用固定延时的方案确实不靠谱，很容易因为设备性能差异出现偶发问题，下面给你几个更稳妥的替代方案：

方案一：用LaunchedEffect配合帧等待（最推荐） #

把焦点请求的逻辑放到LaunchedEffect里，依托Compose的生命周期来触发，确保组件布局完成后再请求焦点：

@Composable fun MyComponent() { 
    var expanded by rememberSaveable { mutableStateOf(false) } 
    val focusRequester = remember { FocusRequester() } 

    AnimatedVisibility( 
        visible = expanded, 
        enter = expandHorizontally(animationSpec = tween(300)) + fadeIn(), 
        exit = shrinkHorizontally(animationSpec = tween(300)) + fadeOut() 
    ) { 
        TextField( 
            modifier = Modifier.focusRequester(focusRequester), 
            // 你的其他TextField配置...
        ) 
    } 

    // 监听expanded状态变化，仅当展开时请求焦点
    LaunchedEffect(expanded) {
        if (expanded) {
            // 等待一帧，确保TextField已经完成布局和绑定
            awaitFrame()
            focusRequester.requestFocus()
        }
    }

    IconButton(onClick = { 
        expanded = !expanded 
        // 这里不再直接调用requestFocus
    }) { 
        MyImage( 
            icon = R.drawable.ic_search, 
            modifier = Modifier.size(56.dp) 
        ) 
    } 
}

这个方案的优势在于：LaunchedEffect是Compose生命周期感知的，只会在expanded状态变化时触发；awaitFrame()会等待当前UI帧的布局完成，比固定延时更精准，完全避免了竞态条件。

方案二：利用TextField的布局回调自动请求焦点 #

给TextField添加onGloballyPositioned修饰符，当组件完成布局时自动触发焦点请求，不管动画耗时多久，只要TextField出现在界面上就会生效：

AnimatedVisibility( 
    visible = expanded, 
    enter = expandHorizontally(animationSpec = tween(300)) + fadeIn(), 
    exit = shrinkHorizontally(animationSpec = tween(300)) + fadeOut() 
) { 
    TextField( 
        modifier = Modifier
            .focusRequester(focusRequester)
            .onGloballyPositioned {
                // 布局完成后立即请求焦点
                focusRequester.requestFocus()
            },
        // 你的其他TextField配置...
    ) 
}

如果担心动画过程中多次触发布局回调导致重复请求焦点，可以加个状态标记控制只请求一次：

@Composable fun MyComponent() { 
    var expanded by rememberSaveable { mutableStateOf(false) } 
    val focusRequester = remember { FocusRequester() } 
    var hasRequestedFocus by remember { mutableStateOf(false) }

    AnimatedVisibility( 
        visible = expanded, 
        enter = expandHorizontally(animationSpec = tween(300)) + fadeIn(), 
        exit = shrinkHorizontally(animationSpec = tween(300)) + fadeOut() 
    ) { 
        TextField( 
            modifier = Modifier
                .focusRequester(focusRequester)
                .onGloballyPositioned {
                    if (!hasRequestedFocus) {
                        focusRequester.requestFocus()
                        hasRequestedFocus = true
                    }
                },
            onValueChange = { /* 你的输入处理逻辑 */ },
        ) 
    } 

    // 收起时重置标记，避免再次展开时不触发焦点请求
    LaunchedEffect(expanded) {
        if (!expanded) {
            hasRequestedFocus = false
        }
    }

    // ... 其余图标按钮代码不变
}

方案三：检查FocusRequester初始化状态（备选） #

如果不想改动太多现有逻辑，可以在请求焦点前先检查isInitialized状态，同时配合协程延迟到下一帧：

IconButton(onClick = { 
    expanded = !expanded 
    // 用Main协程调度，等待一帧后检查状态再请求
    CoroutineScope(Dispatchers.Main).launch {
        awaitFrame()
        if (focusRequester.isInitialized) {
            focusRequester.requestFocus()
        }
    }
}) { 
    // ... 图标代码
}

不过这个方案不如前两个优雅，手动创建CoroutineScope可能存在内存泄漏风险，所以更推荐用前两种方案。

补充：你遇到崩溃的核心原因 #

你原来的代码里，点击事件中直接调用focusRequester.requestFocus()时，AnimatedVisibility的入场动画才刚刚开始，TextField还没被添加到Compose的组合树中，FocusRequester还没和TextField的修饰完成绑定，所以会抛出IllegalStateException。错误提示里的前两点你已经做对了，问题出在焦点请求的时机太早，组件还没准备好。

内容来源于stack exchange