在Jetpack Compose中实现单词换行与独立单词组件交互

核心实现思路 #

用Jetpack Compose Material3内置的FlowRow布局处理自动换行逻辑，配合自定义的可交互单词组件，通过状态管理控制每个单词的样式变化（比如删除线），满足点击、样式修改等交互需求。

代码实现步骤 #

1. 定义数据类管理单词状态

data class WordItem(
    val text: String,
    val isStrikethrough: Boolean = false
)

2. 主布局与状态维护
   在主Composable里用mutableStateListOf维护单词列表状态，通过FlowRow承载所有单词组件：

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.unit.dp

@Composable
fun InteractableWordLayout() {
    // 模拟初始单词集合，可根据业务逻辑动态生成
    val wordList = remember {
        mutableStateListOf(
            WordItem("Hello"),
            WordItem("Jetpack"),
            WordItem("Compose"),
            WordItem("is"),
            WordItem("awesome"),
            WordItem("and"),
            WordItem("powerful"),
            WordItem("for"),
            WordItem("Android"),
            WordItem("UI"),
            WordItem("development")
        )
    }

    FlowRow(
        modifier = Modifier.padding(16.dp),
        horizontalArrangement = androidx.compose.foundation.layout.Arrangement.spacedBy(8.dp),
        verticalArrangement = androidx.compose.foundation.layout.Arrangement.spacedBy(4.dp)
    ) {
        wordList.forEachIndexed { index, word ->
            WordComponent(
                word = word,
                onWordClick = {
                    // 点击切换删除线状态
                    wordList[index] = word.copy(isStrikethrough = !word.isStrikethrough)
                }
            )
        }
    }
}

3. 封装可交互单词组件
   单独实现单个单词的显示与交互逻辑，方便后续扩展：

@Composable
fun WordComponent(
    word: WordItem,
    onWordClick: () -> Unit
) {
    Text(
        text = word.text,
        style = MaterialTheme.typography.bodyLarge.copy(
            textDecoration = if (word.isStrikethrough) TextDecoration.LineThrough else TextDecoration.None
        ),
        modifier = Modifier
            .clickable(onClick = onWordClick)
            .padding(vertical = 2.dp)
    )
}

关键细节说明 #

• FlowRow布局：自动判断子组件宽度，当单词超出当前行剩余空间时自动换行，无需手动计算布局边界。
• 状态更新：mutableStateListOf会在列表元素变化时自动触发界面重组，保证样式实时更新。
• 交互扩展：除了点击切换删除线，还可以在WordComponent中添加长按事件、 hover 样式、自定义背景等交互逻辑，只需修改组件内部的Modifier和状态即可。

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