Jetpack Compose中UiState嵌套列表元素更新的高效实现方法

背景与现有实现 #

我正在开发一款线下围棋应用来学习Jetpack Compose，已将游戏逻辑与UI分离，核心结构如下：

GameState（棋盘状态模型） #

@Stable
@Immutable
data class GameState (
        val boardSize: Int = 19,
        val moveStack: ArrayDeque<Move> = ArrayDeque<Move>(),
        val board: List<List<Location>> = buildList {
                for (row in 0 until boardSize) {
                        add(buildList {
                                for (col in 0 until boardSize) {
                                        add(Location(
                                                coordinate = Pair(row, col),
                                                boardSize = boardSize
                                        ))
                                }
                        })
                }
        }
) {
    // 游戏逻辑方法
}

GoUiState（UI状态容器） #

data class GoUiState (
    val gameState: GameState = GameState(),
    val playerOneScore: Int = 0,
    val playerTwoScore: Int = 0
)

ViewModel实现 #

class GoViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(GoUiState())
    val uiState: StateFlow<GoUiState> = _uiState.asStateFlow()
    // 其他逻辑
}

当前问题 #

更新单个棋盘格的Location时，UI无法感知变化。原因是Compose仅在监听对象的引用变化时触发重组，而嵌套List的顶层引用未变，导致必须全量重建整个board才能触发UI更新——这种方式会引发所有棋盘格Composable重组，内存开销大、效率极低：

fun inputMove(
                row: Int,
                col: Int,
                piece: Piece
        ): GameState {
                val newGameState = GameState(
                        boardSize = boardSize,
                        moveStack = moveStack,
                        // 全量重建board以更新引用
                        board = buildList {
                                for (row in 0 until boardSize) {
                                        add(buildList {
                                                for (col in 0 until boardSize) {
                                                        add(Location(
                                                                board[row][col].piece,
                                                                board[row][col].coordinate,
                                                                boardSize,
                                                                board[row][col].hasKo
                                                        ))
                                                }
                                        })
                                }
                        }
                )
                // 游戏逻辑处理
}

优化方案 #

1. 局部更新嵌套List，保留未变化部分的引用 #

利用Compose的智能重组特性，仅修改需要更新的行和元素，而非全量重建board。核心思路是：

• 不可变集合的局部修改：复制目标行并替换指定位置的Location，再复制整个board替换修改后的行
• 确保Location是@Immutable的data class，让Compose能精准感知单个元素的变化

修改后的inputMove示例：

fun inputMove(row: Int, col: Int, piece: Piece): GameState {
    // 复制并修改目标行的指定位置
    val updatedRow = board[row].toMutableList().apply {
        set(col, Location(
            piece = piece,
            coordinate = Pair(row, col),
            boardSize = boardSize,
            hasKo = // 根据游戏逻辑设置对应值
        ))
    }
    // 复制整个board，替换修改后的行
    val newBoard = board.toMutableList().apply {
        set(row, updatedRow)
    }
    // 复制moveStack（避免修改原可变集合）
    val newMoveStack = ArrayDeque(moveStack).apply {
        add(Move(row, col, piece))
    }
    // 构建新GameState，仅修改变化的部分
    return this.copy(
        moveStack = newMoveStack,
        board = newBoard
    )
}

2. 确保所有状态成员的不可变性 #

• moveStack使用ArrayDeque是可变集合，每次修改必须创建新实例，否则GameState的引用相等性判断会认为未变化
• Location必须是data class且标记@Immutable，确保Compose能通过值比较感知元素变化

3. 优化UI层的重组粒度 #

在棋盘格Composable中，直接依赖对应位置的Location实例，而非整个board或GameState：

@Composable
fun GoCell(location: Location) {
    // 仅依赖location的UI逻辑
}

// 在棋盘布局中调用
@Composable
fun GoBoard(gameState: GameState) {
    Column {
        for (row in 0 until gameState.boardSize) {
            Row {
                for (col in 0 until gameState.boardSize) {
                    GoCell(location = gameState.board[row][col])
                }
            }
        }
    }
}

这样只有当location的引用（或值，因为是data class）变化时，对应的GoCell才会重组。

关键原理 #

Compose的重组触发基于状态的相等性比较：

• 对于不可变对象，只要引用变化就会触发依赖该对象的UI重组
• 对于data class，会自动基于成员值进行相等性判断，值变化时也会被视为状态更新
• 通过局部更新嵌套集合，仅让变化部分生成新引用，未变化部分保留原引用，就能实现精准的局部重组

内容的提问来源于stack exchange，提问作者Liam Wood-Baker