app/src/main/java/com/devshish/advancedjetpackcompose/customlayout/StaircaseLayout.kt - master - ursa/AdvancedJetpackCompose

app/src/main/java/com/devshish/advancedjetpackcompose/customlayout/StaircaseLayout.kt
78 строк3 KB
ursa
add project
03 мар 2025, 11:36
03 мар 2025, 11:3684c8a15
package com.devshish.advancedjetpackcompose.customlayout

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun StaircaseLayoutExample(modifier: Modifier = Modifier) {
    // Контейнер с кастомным макетом
    StaircaseLayout(
        modifier = modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(16.dp)
    ) {
        // Элементы, которые будут располагаться в виде лестницы
        Text(
            text = "Step 1",
            fontSize = 20.sp,
            modifier = Modifier
                .background(Color.Blue)
                .padding(8.dp)
        )
        Text(
            text = "Step 2",
            fontSize = 20.sp,
            modifier = Modifier
                .background(Color.Green)
                .padding(8.dp)
        )
        Text(
            text = "Step 3",
            fontSize = 20.sp,
            modifier = Modifier
                .background(Color.Red)
                .padding(8.dp)
        )
    }
}

@Composable
fun StaircaseLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->
        // 1. Измеряем каждый дочерний элемент
        val placeables = measurables.map { measurable ->
            measurable.measure(constraints)
        }

        // 2. Вычисляем общую ширину и высоту макета
        val maxWidth = placeables.maxOf { it.width }
        val totalHeight = placeables.sumOf { it.height }

        // 3. Определяем позиции для каждого элемента
        layout(maxWidth + (placeables.size - 1) * 50, totalHeight) { // Ширина с учетом смещения
            var yPosition = 0
            var xOffset = 0

            placeables.forEach { placeable ->
                // Размещаем каждый элемент со смещением по X
                placeable.placeRelative(x = xOffset, y = yPosition)
                yPosition += placeable.height
                xOffset += 50 // Смещение каждого следующего элемента вправо
            }
        }
    }
}