Расположите один элемент внутри LazyColumn с помощью модификатора веса

Question

Я надеюсь на такой результат. Два блока размером 2/3 и 1/3 соответственно.

Я получаю ожидаемый результат с этим кодом.

      @Preview(showBackground = true)
@Composable
fun LayoutCheck() {

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Surface(
        modifier = Modifier
            .width(200.dp)
            .weight(3f),
        color = MaterialTheme.colors.primary
    ) {}
    Surface(
        modifier = Modifier
            .width(200.dp)
            .weight(1f),
        color = MaterialTheme.colors.secondary
    ) {}
    }
}

Но когда я помещаю это в ленивую колонку, кажется, что ничего не работает. Даже дисплей не получил.

      @Preview(showBackground = true)
@Composable
fun LayoutCheck() {
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(20.dp)
    ) {
        item {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Surface(
                    modifier = Modifier
                        .width(200.dp)
                        .weight(3f),
                    color = MaterialTheme.colors.primary
                ) {}
                Surface(
                    modifier = Modifier
                        .width(200.dp)
                        .weight(1f),
                    color = MaterialTheme.colors.secondary
                ) {}
                }

            }
        }
    }
}

Если я уберу вес и поставлю некоторую высоту, это сработает. Но я не хочу там жестко кодировать. Итак, как заставить работать с весом. Жду помощи ..

Спасибо

NB: мне нужна функция прокрутки, поэтому LazyColumn

Сценарий реального мира: экран входа в систему с логотипом в первой части 2/3 и текстом и кнопкой в ​​нижней части 1/3

Сценарий 1: Идеальная работа:

Сценарий 2: если шрифт пользователя больше или экран повернут, они не смогут увидеть кнопку

Answer 1

Поскольку у вас есть только один элемент, просто используйте Column с вертикальной прокруткой:

      val scrollState = rememberScrollState()
Column(
    modifier = Modifier
        .verticalScroll(scrollState),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    //...
}

Также, если вы хотите 2/3 и 1/3, используйте в 1-м Surface в weight(2f) модификатор.

Answer 2

Вы предотвращаете изменение размера текста, применяя weightмодификатор. Вместо этого я предлагаю вам сделать интервал между элементами гибким, например:

      Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Spacer(Modifier.weight(1f))
    Image(
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = "",
    )
    Spacer(Modifier.weight(1.35f))
    Text(
        "Your app is being reviewed",
    )
    Spacer(Modifier.weight(0.2f))
    Button(onClick = { /*TODO*/ }) {
        Text("Log out")
    }
    Spacer(Modifier.weight(0.2f))
}

Объяснение проставок: