Jetpack Compose中使用Weight时如何避免整个UI重组？

问题描述 #

我正在用Jetpack Compose开发一款计算器应用，当前遇到了UI重组的问题。布局包含三个核心组件：CalculatorDisplay、CalculatorAdvanced和CalculatorPad，采用Weight实现响应式设计。但通过CalculatorExpandButton切换isExpanded状态时，整个屏幕都会重组，而非仅CalculatorAdvanced和CalculatorPad这两个相关组件。

优化目标 #

• 避免CalculatorDisplay发生不必要的重组
• 确保仅CalculatorAdvanced和CalculatorPad在isExpanded变化时重组

已尝试方案 #

• 使用remember和derivedStateOf：将其应用于advancedWeight和padWeight以减少状态更新，但整个UI仍会重组（可能使用方式有误）
• 通过Layout Inspector排查：确认点击CalculatorExpandButton会导致整个PhonePortraitLayout重组

相关代码 #

@Composable
fun CalculatorScreen(viewModel: CalculatorViewModel = viewModel()) {
    val context = LocalContext.current
    val activity = context as Activity
    val window = activity.window
    val windowSizeClass = rememberWindowSizeClass()

    val color = MaterialTheme.colorScheme.surfaceColorAtElevation(24.dp).toArgb()
    SideEffect {
        window.statusBarColor = color
    }

    val expandedStateHandler = remember {
        ExpandedStateHandler()
    }

    Box(modifier = Modifier.fillMaxSize()) {
        when {
            /** 手机竖屏 */
            windowSizeClass.isPhonePortrait -> PhonePortraitLayout(
                viewModel = viewModel,
                windowSizeClass = windowSizeClass,
                expandedStateHandler = expandedStateHandler
            )
        }
    }
}

class ExpandedStateHandler {
    var isExpanded by mutableStateOf(false)
        private set

    fun toggle() {
        isExpanded = !isExpanded
    }
}

@Composable
fun PhonePortraitLayout(
    viewModel: CalculatorViewModel,
    windowSizeClass: MyWindowSizeClass,
    expandedStateHandler: ExpandedStateHandler
) {
    val displayWeight = 0.3337f // CalculatorDisplay的固定权重
    val advancedWeight = if (expandedStateHandler.isExpanded) 0.1451f else 0.045f
    val padWeight = if (expandedStateHandler.isExpanded) 0.4f else 0.5f

    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.padding(bottom = 8.dp)
    ) {
        // 待稳定的CalculatorDisplay
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(displayWeight)
        ) {
            CalculatorDisplay(
                viewModel = viewModel,
                modifier = Modifier.fillMaxSize()
            )
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .weight(advancedWeight)
        ) {
            Box(
                modifier = Modifier
                    .weight(3.1f) // 维持内部比例
                    .padding(start = 16.dp, end = 4.dp)
            ) {
                CalculatorAdvanced(
                    viewModel = viewModel,
                    windowSizeClass = windowSizeClass,
                    isExpanded = expandedStateHandler.isExpanded,
                    modifier = Modifier.fillMaxSize()
                )
            }

            Box(
                contentAlignment = Alignment.TopEnd,
                modifier = Modifier
                    .padding(start = 4.dp, end = 16.dp)
                    .weight(0.56f)
            ) {
                CalculatorExpandButton(
                    text = if (expandedStateHandler.isExpanded) "Adv" else "Basic",
                    onClick = { expandedStateHandler.toggle() }
                )
            }
        }

        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(padWeight)
                .padding(horizontal = 16.dp)
        ) {
            CalculatorPad(
                viewModel = viewModel,
                windowSizeClass = windowSizeClass,
                modifier = Modifier.fillMaxSize()
            )
        }
    }
}

解决方案 #

1. 抽离独立组件隔离状态依赖 #

PhonePortraitLayout因直接读取expandedStateHandler.isExpanded，状态变化时会触发整个Composable重组。将CalculatorDisplay相关代码抽成独立的无状态Composable，确保它不依赖isExpanded状态：

@Composable
fun CalculatorDisplayContainer(
    viewModel: CalculatorViewModel,
    displayWeight: Float
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .weight(displayWeight)
    ) {
        CalculatorDisplay(
            viewModel = viewModel,
            modifier = Modifier.fillMaxSize()
        )
    }
}

该组件的参数viewModel是稳定类型（ViewModel默认稳定），displayWeight是固定值，因此isExpanded变化时不会触发它重组。

2. 用derivedStateOf正确派生权重状态 #

将依赖isExpanded的权重计算逻辑用derivedStateOf包裹，确保只有权重值变化时才会通知相关UI节点：

@Composable
fun PhonePortraitLayout(
    viewModel: CalculatorViewModel,
    windowSizeClass: MyWindowSizeClass,
    expandedStateHandler: ExpandedStateHandler
) {
    val displayWeight = 0.3337f
    // 派生权重状态，仅当isExpanded变化时更新
    val weightState = remember {
        derivedStateOf {
            val isExpanded = expandedStateHandler.isExpanded
            Pair(
                if (isExpanded) 0.1451f else 0.045f,
                if (isExpanded) 0.4f else 0.5f
            )
        }
    }
    val advancedWeight = weightState.value.first
    val padWeight = weightState.value.second

    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.padding(bottom = 8.dp)
    ) {
        CalculatorDisplayContainer(viewModel, displayWeight)

        // 剩余Row和Box代码保持不变
        Row(/* ... */) { /* ... */ }
        Box(/* ... */) { /* ... */ }
    }
}

3. 标记ExpandedStateHandler为稳定类型 #

Compose默认会将自定义类视为不稳定类型，即使内部使用mutableStateOf。添加@Stable注解，让Compose识别该类只有isExpanded属性变化时才需要触发重组：

@Stable
class ExpandedStateHandler {
    var isExpanded by mutableStateOf(false)
        private set

    fun toggle() {
        isExpanded = !isExpanded
    }
}

4. 优化组件参数传递（可选） #

如果CalculatorAdvanced和CalculatorPad不需要viewModel的全部状态，只传递它们所需的具体状态或事件回调（而非整个ViewModel），可以进一步降低重组概率。例如：

// 示例：给CalculatorPad传递具体回调而非整个ViewModel
@Composable
fun CalculatorPad(
    onNumberClick: (String) -> Unit,
    onOperatorClick: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    // 组件实现
}

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