如何配置Jetpack Compose的Row语义，让TalkBack合并Text与Button内容？

问题场景 #

声明了包含Text和Button的Row组件，期望实现：

1. 聚焦Row时，TalkBack合并朗读“Date completed November 2024, Button”
2. Button不成为单独可聚焦项

但原代码仅朗读“Date completed”，且Button仍可单独聚焦：

Row(
    modifier = Modifier.semantics(mergeDescendants = true) { role = Role.Button }
) {
    Text("Date completed")
    Button(onClick = { }) {
        Text("November 2024")
    }
}

解决方案 #

通过调整语义配置和交互修饰符，实现需求：

修改后的代码 #

Row(
    modifier = Modifier
        // 让Row成为可交互、可聚焦的组件，绑定与Button一致的点击逻辑
        .clickable(onClick = { /* 此处放置你的点击处理逻辑 */ })
        // 合并子组件的语义内容
        .semantics(mergeDescendants = true) {
            role = Role.Button // 标记Row为按钮角色
        }
) {
    Text("Date completed")
    Button(
        onClick = { /* 与Row一致的点击处理逻辑 */ },
        // 清除Button自身的语义，避免被TalkBack单独识别为可聚焦项
        modifier = Modifier.semantics { clearSemantics() }
    ) {
        Text("November 2024")
    }
}

关键说明 #

• Row添加clickable：确保Row本身是可交互的聚焦目标，否则TalkBack会优先聚焦内部的Button。
• Row的mergeDescendants = true：将子组件（两个Text）的语义内容合并到Row中，实现整体朗读。
• Button的clearSemantics()：清除Button自带的语义（包括按钮角色、可聚焦标记），使其不再被TalkBack单独处理，同时内部Text的语义会被合并到Row中。

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