Как предотвратить перекомпоновку всего пользовательского интерфейса при использовании веса в Jetpack Compose? ⇐ Android

[Anonymous]

Я создаю приложение-калькулятор в Jetpack Compose и столкнулся с проблемой рекомпозиции. Мой макет состоит из трех основных компонентов: CalculatorDisplay, CalculatorAdvanced и CalculatorPad. В макете используются веса для адаптивного дизайна. Однако, когда я переключаюisExpanded с помощью CalculatorExpandButton, перекомпонуется весь экран, а не только соответствующие компоненты (CalculatorAdvanced и CalculatorPad).
Моя цель:

• Предотвратить ненужное изменение композиции CalculatorDisplay.
• Обеспечить только CalculatorAdvanced и CalculatorPad перекомпоновываются при изменении isExpanded.

Что я пробовал:

• Использование Remember и DerivedStateOf: Я применил их к AdvancedWeight и PadWeight, чтобы минимизировать обновления состояния, но весь пользовательский интерфейс по-прежнему перекомпоновывает. (Возможно, я сделал это неправильно)
• Проверка с помощью 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 {
/** PHONE */
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 // Fixed weight for 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)
) {
// Stabilized 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) // Keeps internal proportions
.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()
)
}
}
}



Подробнее здесь: https://stackoverflow.com/questions/792 ... ck-compose