Bharat Kumar
Bharat Kumar

Reputation: 956

Issue with defining weight to views in Jetpack compose

I want to make a simple jetpack compose layout, using weights. below is the code

Row() {
Column(
    Modifier.weight(1f).background(Blue)){
    Text(text = "Weight = 1", color = Color.White)
}
Column(
    Modifier.weight(2f).background(Yellow)
) {
    Text(text = "Weight = 2")
}
}

which will result in a layout like this Simple row column lauout using weights.

but what if my inner views are coming from some other Composable function, which is unaware that its going to be a child of a column or a row?

Row() {
  // Calling Some composable function here
}

In that case i am not able to access the Modifier.weight(..) function, because it thinks that its not in the row or column scope, because it is an independent function.

Upvotes: 7

Views: 5367

Answers (3)

Qamar khan
Qamar khan

Reputation: 215

Row(
                modifier = mainRowModifier,
                verticalAlignment = rowCenterVerticallyAlign
            ) {
                Row(
                    verticalAlignment = rowCenterVerticallyAlign,
                    horizontalArrangement = rowContentArrangementCenter,
                    modifier = Modifier.weight(.5f, true).wrapContentHeight()
                ) {
                    Text(
                        text = "971",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        textAlign = TextAlign.Center
                    )
                    Icon(
                        painter = painterResource(id = resIdDropDownIcon),
                        contentDescription = null,
                        modifier = Modifier.padding(start = startPaddingDropdownIcon.dp)
                    )
                }

                Divider(
                    color = dividerColor,
                    modifier = dividerModifier
                )

                SimpleTextField(
                    modifier = Modifier.weight(2f),
                    value = "",
                    placeHolder = textFieldPlaceholder,
                    keyboardType = KeyboardType.Phone,
                    singleLine = true
                )

                Text(
                    text = optionalTextTxt,
                    modifier = Modifier.weight(.5f, true),
                    style = MaterialTheme.typography.bodySmall,
                    fontSize = optionalTextFontSize.sp
                )
            }

no weight is issue to main row, then i will assign subrow weight to 0.5 and for textField weight will be 2f and last textview weight is issue to 0.5f

then Output will be looks like enter image description here

Upvotes: 0

Jarrod Moldrich
Jarrod Moldrich

Reputation: 815

You can prefix RowScope. or ColumnScope. to your function declaration

@Composable
fun RowScope.SomeComposable() {
    // weights should work in here
    Column(Modifier.weight(1f)){ /**/ }

}

Upvotes: 10

Gabriele Mariotti
Gabriele Mariotti

Reputation: 365178

You can add the modifier as parameter in your Composable.

Something like:

@Composable
fun myCard(modifier: Modifier = Modifier, name:String){
    Box(modifier){
            Text(name,textAlign = TextAlign.Center,)
    }
}

In this way the myCard is unaware that its going to be a child of a Column or a Row.

Then in your implementation you can use:

Row(Modifier.padding(16.dp).height(50.dp)) {
    myCard(Modifier.weight(1f).background(Color.Yellow),"Weight = 1")
    myCard(Modifier.weight(2f).background(Color.Red),"Weight = 2")
}

enter image description here

Upvotes: 6

Related Questions