[FIXED] Compose: Column that fill parent and have all child same width

Issue

I want all Column childs to have a width equal to the width of the widest element. But scrolling should be possible from anywhere on the parent.

I achieved similar but incomplete behavior:

Code:

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
        .selectableGroup(),
) {
    RadioButtonTile(text = "asdadasdasd", selected = false)
    RadioButtonTile(text = "asdadasdasdasdadasdasd", selected = false)
    RadioButtonTile(text = "asdadasdasd", selected = false)
    RadioButtonTile(text = "asdadasdasd", selected = false)
    // ...
}

I can achieve desired appearance by replacing the .fillMaxSize() modifier to .width(IntrinsicSize.Max) and adding .fillMaxWidth() modifier to Row inside RadioButtonTile composable. But then I cannot scroll outside the Column anymore:

Code:

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier
        .width(IntrinsicSize.Max)
        .verticalScroll(rememberScrollState())
        .selectableGroup(),
) {
    RadioButtonTile(text = "asdadasdasd", selected = false)
    RadioButtonTile(text = "asdadasdasdasdadasdasd", selected = false)
    RadioButtonTile(text = "asdadasdasd", selected = false)
    RadioButtonTile(text = "asdadasdasd", selected = false)
    // ...
}

RadioButtonTile:

Row(
    Modifier
        .fillMaxWidth()
        .height(IntrinsicSize.Min)
        .padding(horizontal = 16.dp, vertical = 12.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    MaterialTheme(colors = MaterialTheme.colors.copy(onSurface = Blue100)) {
        RadioButton(
            selected = selected,
            onClick = null,
        )
    }
    Text(
        text = text,
        style = MaterialTheme.typography.subtitle1.merge(),
        modifier = Modifier.padding(start = 32.dp)
    )
}

How can I achieve the desired behavior? Is it possible to do this without writing custom Layout?

Solution

You can place your Column inside a Box and add verticalScroll to this Box:

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = Modifier
            .width(IntrinsicSize.Max)
            .selectableGroup() // not sure if this should be moved too
    ) {
        repeat(100) {
            RadioButtonTile(text = Array(Random.nextInt(3..7)) {
                Char(Random.nextInt(('a'.code)..('x'.code)))
            }.joinToString(""), selected = false)
        }
    }
}

Answered By - Philip Dukhov