0

The following code is from the project.

I find that fun MainScreen() add @Composable, and fun launchDetailsActivity doesn't add @Composable.

It make me confused. I think all function which apply to Compose should to add @Composable, why doesn't fun launchDetailsActivity add @Composable?

@AndroidEntryPoint
class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        setContent {
            ProvideWindowInsets {
                ProvideImageLoader {
                    CraneTheme {
                        MainScreen(
                            onExploreItemClicked = { launchDetailsActivity(context = this, item = it) }
                        )
                    }
                }
            }
        }
    }
}


@Composable
fun MainScreen(onExploreItemClicked: OnExploreItemClicked) {
  ...
}


fun launchDetailsActivity(context: Context, item: ExploreModel) {
    context.startActivity(createDetailsActivityIntent(context, item))
}
2
  • i think this is generated by navigation? Sep 27, 2021 at 7:19
  • From what i know a composable function should be started with uppercase letter Sep 27, 2021 at 11:10

3 Answers 3

2
+50

Function with @Composable is not just a function it tells the compose compiler that this is a UI element. Take this data and build a Widget with it.

So you have to determine when you will add @Composable based on whether this function draws something in the UI or not. In the non compose world you can think of this function like a View.

For example, this function takes a parameter name and builds a Text widget with the text "Hello $name" which you can see in the UI.

@Composable
fun Greeting(name: String) {
    Text("Hello $name")
}

But

fun getName(firstName: String, lastName: String): String {
    return "$firstName $lastName"
}

This function is not a composable function. It is not annotated with @Composable because it is not a widget, it shouldn't render anything in the UI. It just takes two parameters, Concatenates them, and returns the String.

In your case, MainScreen is the function that is rendering the Main screen of your app so it is a UI element. But function launchDetailsActivity doesn't draw anything in the UI. It just navigates from one activity to another activity.

Few things to remember:

Function with @Composable doesn't return anything.

You can't call a composable function from a non-composable function.

Unlike non-composable function composable function start with an Uppercase letter.

You can read this doc for details https://developer.android.com/jetpack/compose/mental-model

1

You need to mark view builder functions with @Composable, to be directly called from an other @Composable.

If you have a side effect function, it shouldn't be called directly from composable. It can be called from touch handlers, like click in your example, or using a side effect, like LaunchedEffect. Check out more about what's side effect in documentation.

@Composable
fun SomeView() {
    // this is directly called from view builder and should be marked with @Composable
    OtherView()

    LaunchedEffect(Unit) {
        // LaunchedEffect a side effect function, and as it's called 
        // from LaunchedEffect it can be a suspend fun (optionally)
        handleLaunchedEffect()
    }
    Button(onClick = { handleButtonClick() }) { // or onClick = ::handleButtonClick

    }
}

@Composable
fun OtherView() {

}

suspend fun handleLaunchedEffect() {

}

fun handleButtonClick() {

}
0

You should use @Composable if you are using calling another function annotated with @Composable that's it pretty simple.

Generally all @Composable functions starts with uppercase letter but some also start with lowercase like everything that starts with remember

So when you are using these functions inside another function you need to use @Composable else even android studio will yell at you because composable function can be invoked from another composable.

3
  • Thanks! but why doesn't fun launchDetailsActivity add @Composable?? You know that fun MainScreen which has added @Composable invoke it
    – HelloCW
    Sep 29, 2021 at 0:22
  • Hey it's the other way around
    – Jack
    Sep 29, 2021 at 0:26
  • Let's say our function name is test if test calls MainScreen it needs to be annotated with @Composable but if MainScreen calls test() we don't need to do anything it will be treated as normal function
    – Jack
    Sep 29, 2021 at 0:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.