Jetpack Compose props typing

user_7443101 0
Viewed 535

I'm looking for an elegant way to type Composable functions parameters. I'm used to React, where you pass a single props parameter without having to have a million of them.

For reference, what is the cleanest way to to something like this

interface MyCompProps {
   foo: string
   bar: number
} 

function MyComp(props: MyCompProps) {...}

with Compose?

Do I have to create a class and instantiate one when I build the props? Do I use maps? Is it the wrong way of thinking about it?

Right now I'm doing something like

class ProjectListItemProps(
    val imageUrl: String,
    val projectName: String,
    val createdAt: String
)

@Composable
fun ProjectListItem(props: ProjectListItemProps) {...}
android-jetpack android-jetpack-compose android
2 Answers

Yes. In Android it's recommended to create data classes to represent data objects as entities.

For example, in a notes app you would create a note data class as following:

data class Note(
    var id: String = "",
    var dateAdded: Long = 0,
    var title: String = "",
    var textContent: String = "",
    var isFavorite: Boolean = false,
)

Then in compose you can create a composeable that represents the note in the UI:

@Composable
fun Note(note: Note){
    //child composables
}

But if the parameters don't represent an entity, such as whether to show ProgressBar or not, you shouldn't put it in a class.

And remember, in Kotlin you can use default parameters, then when you call the function you pass a parameter only when you want to pass a value different from the default one.

Example:

@Composable
fun Page(showProgressBar: Boolean = false){
    //child composables
}

If you called Page without passing any parameters it won't show the progress bar, because showProgressBar = true by default. But if want to show it you pass true to override the default value:

Note() /*progress bar is hidden.*/
Note(showProgressBar = true) /*progress bar is shown*/
user_134343430

I think it's a good idea to check out the design of the Composables provided by the framework. For example:

LazyColumn(
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
    // ...
}

So in short, yes it is a good idea, and I'd use it for grouping attributes.

user_44878580
Related