Jetpack Compose中Button内使用Text组件报错求助

这个错误的核心逻辑很简单：所有带@Composable注解的组件（比如你用的Button、Text），必须放在同样带有@Composable注解的函数或lambda上下文里调用，不能直接写在普通函数、非Composable回调或者Activity的onCreate这类非Composable环境中。

正确代码示例 #

方式1：直接在setContent的lambda中编写

setContent的lambda本身就是Composable上下文，你可以直接在这里写你的Button代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // 这里是Composable上下文，可直接调用Button、Text
            Button(onClick = {
                // 注意：这里是普通回调lambda，不能放Composable组件
            }) {
                Text(text = "Hello")
            }
        }
    }
}

方式2：封装成独立的Composable函数

把按钮逻辑封装到自定义的Composable函数中，后续可以在任何Composable上下文里调用：

// 必须添加@Composable注解
@Composable
fun HelloButton() {
    Button(onClick = {}) {
        Text(text = "Hello")
    }
}

// 在Activity的setContent中调用
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloButton()
        }
    }
}

常见误区提醒 #

不要尝试在Button的onClick lambda里编写Composable代码——onClick是普通的点击回调，不属于Composable上下文。如果需要点击后更新UI，应该用remember和mutableStateOf管理状态，触发Compose重组：

@Composable
fun CountButton() {
    val clickCount = remember { mutableStateOf(0) }
    Button(onClick = { clickCount.value++ }) {
        Text(text = "已点击 ${clickCount.value} 次")
    }
}

内容的提问来源于stack exchange，提问作者Thaw De Zin