'Why size() and requiredSize() apply wrong value?

I'm working on chart layout and want all my "dots" on the chart have the same specified size. But the layout inspector shows incorrect value:

enter image description here

Here is my chart composable:

@Composable
private fun Chart() {
    val data = DoubleArray(100) { it.toDouble() }
    val state = LineChartScaffoldState(
        LineChartState(
            data = data,
            gap = 0.dp,//Dp.Unspecified,
            scrollState = rememberScrollState()
        )
    )

    LineChartScaffold(
        modifier = Modifier.fillMaxSize(),
        state = state
    ) {
        Box {
            Column(
                Modifier
                    .fillMaxSize()
                    .padding(start = 0.dp)
            ) {
                LineChart(
                    modifier = Modifier
                        .weight(weight = 1f, fill = false)
                        .horizontalScroll(state.lineChartState.scrollState),
                    state = it.lineChartState
                ) {
                    Dot(
                        modifier = Modifier.size(10.dp), // BUT I HAVE SPECIFIED 10 DP SIZE
                        data = data[it]
                    )
                }
            }
        }
    }
}

Here is my line chart scaffold that is using for sharing the state object.

@Composable
fun LineChartScaffold(
    modifier: Modifier = Modifier,
    state: LineChartScaffoldState,
    content: @Composable (state: LineChartScaffoldState) -> Unit
) {
    Box(modifier = modifier) {
        content(state)
    }
}

My line chart layout:

@Composable
fun LineChart(
    modifier: Modifier = Modifier,
    state: LineChartState,
    item: @Composable (index: Int) -> Unit
) {
    Layout(
        modifier = modifier,
        content = {
            for (i in state.data.indices) {
                item(i)
            }
        }
    ) { measurables, constraints ->

        val gap = if (state.gap.isUnspecified) {
            0
        } else {
            state.gap.roundToPx()
        }

        val placeables = measurables.map { it.measure(constraints) }


        layout(constraints.maxWidth, constraints.maxHeight) {
            placeables.forEachIndexed { i, it ->
                val x = (it.width + gap) * i
                val y = (constraints.maxHeight - it.height) * 0.01 * i // TODO: Remove debug percentage calculation
                Log.d("debug","x=$x, y=$y")
                it.place(x.toInt(), y.toInt())
            }
        }
    }
}

And the dot composable:

@Composable
fun Dot(
    modifier: Modifier = Modifier,
    data: Double,
) {
    Image(
        modifier = modifier,
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = null,
        alignment = Alignment.TopCenter,
    )
}

Why I get dots width 9 dp instead specified 10 dp?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source