Как уменьшить весь контент пользовательского интерфейса, чтобы он поместился в области предварительного просмотра в Jetp ⇐ Android

[Anonymous]

Я реализую экран выбора темы для своего приложения. Идея состоит в том, чтобы предоставить пользователю различные темы, из которых он может выбирать, и отобразить предварительный просмотр двух экранов, чтобы пользователь мог видеть, как будет выглядеть тема после ее выбора.
Я показываю этот главный экран в качестве предварительного просмотра:


Вот как выглядит мой экран выбора темы:


Я хочу уменьшить содержимое главного экрана, чтобы отобразить все содержимое главного экрана в доступной области предварительного просмотра средства выбора темы.
Я пробовал использовать Modifier.scale(0.4f) и Modifier.graphicsLayer(scaleX = 0.4f, ScaleY = 0.4f), но это уменьшает только то, что уже видно.


Одна из идей, которая, похоже, работает, – использовать локального поставщика для предоставления коэффициента масштабирования пользовательскому интерфейсу Compose следующим образом:

Код: Выделить всё

val LocalScaleFactor = compositionLocalOf { 1f }

@Composable
fun ScaleFactorProvider(
scaleFactor: Float = 1f,
content: @Composable () -> Unit,
) {
CompositionLocalProvider(
LocalScaleFactor provides scaleFactor,
content = content
)
}

val Int.scaleDp: Dp
@Composable
get() = (this * localScaleFactor).dp

val Int.scaleSp: TextUnit
@Composable
get() = (this * localScaleFactor).sp

val localScaleFactor: Float
@Composable get() = LocalScaleFactor.current

Код: Выделить всё

ScaleFactorProvider(0.4f) {
HomeScreenPreview()
}

Хотя этот метод работает, он требует значительных изменений кода. Мне приходится везде использовать ScaleDp и ScaleSP, а для некоторых представлений, таких как Icon, размер которых я обычно не указываю, а просто использую размер по умолчанию, теперь мне нужно определить размер. Это довольно неудобно.
Есть ли альтернативный способ уменьшить размеры всего дерева пользовательского интерфейса, чтобы оно соответствовало доступному родительскому размеру в Jetpack Compose?
< h2>Редактировать 1:
Я попробовал то, что @Leviathan предложил в комментарии. Это работает, но из-за этого сложно возложить ответственность на пользовательский интерфейс. Мой текущий пользовательский интерфейс выглядит примерно так

• Столбец
  
  Строка
  
  Вес 1-го ящика
• Вес 1-го ящика

[*]Отдых пользовательского интерфейса



Теперь мне нужно переместить содержимое строки наружу< /p>

• Ящик
  
  Столбец
  
  Пустой ящик 1f вес

[*]Остальная часть пользовательского интерфейса
[*]Предварительный просмотр слева
[*]Предварительный просмотр справа



После уменьшения масштаба оба предварительный просмотр будет в центре, и мне нужно указать смещения по x и y там, где я хочу, чтобы они были.
Проблема этого метода заключается в том, что, поскольку поле предварительного просмотра привязано к родительский элемент, выравнивание может быть отключено в зависимости от размера пользовательского устройства.

Подробнее здесь: https://stackoverflow.com/questions/787 ... tpack-comp