Context:

In the app, there are dynamic questions from the backend asking users to select an option, usually two or three options. The first choice design is to display the options as buttons in a row. But sometimes, the button texts could be very long that the buttons or the texts are not displayed properly on a mobile phone. In this case, the options should be displayed as a dropdown.

What tried:

To get the width of the button row, I tried to create a mutableState isBtnStyle var, pass a callback lambda to the button layout composable, get and pass back the row width, compare the row width with the screen width, and if the row width is bigger, display the dropdown layout.

val screenWidth = Resources.getSystem().displayMetrics.widthPixels
var isBtnStyle by remember {mutableStateOf(true)}
val rowWidth = { width: Int ->
    if ( width > screenWidth ) isBtnStyle = false 
    }
if(isBtnStyle){
    btnStyleComposable(rowWidth)
} else {
     dropdownStyleComposable()
}

The problem:

The button layout composable is always displayed first for measuring the width, then the dropdown composable is displayed if the button layout is too wide for the screen.

Question:

How could I get the width of the row of buttons before the row is visually displayed, so the decision can be made on which composable layout to be displayed?

Thank you

CodePudding user response：

Here is your answer. For sake of minimum message length, I will add that I prefer to use Modifier.onPlaced.