CODEWITHSUNDEEP
android-jetpack-composeandroid-jetpack-compose-list
Waqas Tahir
Waqas Tahir

Reputation: 8252

Jetpack Compose - Row Clipping Children When Width Increases

Here on the right , I have a list of items in a composable , Every item is inside a row , All the items are inside a column

All the children of the are getting clipped to fit the screen which I don't want , I want these items to render completely even if outside of screen since I have a zoomable container above them

As you can see how text in the text field is all in one line vertically rather than expanding the width , This is the problem

enter image description here

Code :

Row(
        modifier = modifier.zIndex(3f),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center,
    ) {
        SimpleNodesList(
            modifier = Modifier.padding(8.dp),
            parentNode = state.center,
            nodes = state.center.left,
            renderRight = false,
        )

        SimpleNode(node = state.center, parentNode = null)

        SimpleNodesList(
            modifier = Modifier.padding(8.dp),
            parentNode = state.center,
            nodes = state.center.right,
            renderLeft = false
        )
    }

Simple Nodes List is a column of rows , I have one column on left and one on the right , If the width of the left column increases , right row get's clipped by the screen

Upvotes: 7

Views: 14152

Answers (3)

Chinmay Mohanta
Chinmay Mohanta

Reputation: 1

Use SimpleFlowRow in place of Row. It will fix the clipping issue.

Upvotes: 0

Waqas Tahir
Waqas Tahir

Reputation: 8252

Using this modifier does the job for the row , In my case I also needed this layout modifier , wrapContentSize(unbounded = true) was working but children weren't clickable for some reason outside the bounds of the zoom container !

I also had to create a modifier zoomable rather than use a zoomable box , so the zoomable touch events would be dispatched on the this composable rather than the parent !

modifier = Modifier
        .layout { measurable, constraints ->
            val r =
                measurable.measure(constraints = constraints.copy(maxWidth = Constraints.Infinity))
            layout(r.measuredWidth, r.measuredHeight, placementBlock = {
                r.placeWithLayer(0, 0, 0f) {

                }
            })
        }
        .wrapContentSize(unbounded = true)

Upvotes: 6

Richard Onslow Roper
Richard Onslow Roper

Reputation: 6863

If you are using hard-coded width for the text, applying Modifier.wrapContentSize() on every container might do the job

Upvotes: 3

Related Questions