Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a composable function with `weight` modifier?

When I have

Column {
    Button(onClick = { /*TODO*/ },) {
        Text("Original Window")
    }
    Button(onClick = { /*TODO*/ }) {
        Text("Fit System Window")
    }
}

I can create a common composable function

@Composable
fun MyButton(
    onClick: () -> Unit,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick = onClick,
        content = content
    )
}

Column {
    MyButton(onClick = { /*TODO*/ },) {
        Text("Original Window")
    }
    MyButton(onClick = { /*TODO*/ }) {
        Text("Fit System Window")
    }
}

However when I have

Column {
    Button(onClick = { /*TODO*/ },
        modifier = Modifier.weight(1f)) {
        Text("Original Window")
    }
    Button(onClick = { /*TODO*/ },
        modifier = Modifier.weight(1f)) {
        Text("Fit System Window")
    }
}

I cannot create below

@Composable
fun MyButton(
    onClick: () -> Unit,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier.weight(1f),
        content = content
    )
}

Column {
    MyButton(onClick = { /*TODO*/ },) {
        Text("Original Window")
    }
    MyButton(onClick = { /*TODO*/ }) {
        Text("Fit System Window")
    }
}

This is because weight modifier is under ColumnScope interface.

How can I make a composable function with weight modifier?

like image 686
Elye Avatar asked Mar 12 '21 11:03

Elye


People also ask

What is compose Modifier?

Modifiers allow you to decorate or augment a composable. Modifiers let you do these sorts of things: Change the composable's size, layout, behavior, and appearance. Add information, like accessibility labels.

Is a function that is used to define a layout in your app using composable functions?

Jetpack Compose is built around composable functions. These functions let you define your app's UI programmatically by describing how it should look and providing data dependencies, rather than focusing on the process of the UI's construction (initializing an element, attaching it to a parent, etc.).

What is jetpack compose?

Jetpack Compose is Android's modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

How do I screen size in jetpack compose?

If you want to get the size in pixels: val screenDensity = configuration. densityDpi / 160f and multiply with dp, for example val screenHeight = configuration. screenHeightDp.


1 Answers

Looks like I just need to just create an extension from of ColumnScope

@Composable
fun ColumnScope.MyButton(
    onClick: () -> Unit,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier.weight(1f),
        content = content
    )
}
like image 142
Elye Avatar answered Oct 09 '22 10:10

Elye