Kotlin Multiplatform Playground Document Help

commonMain

commonMain is where you create your composable UI.

The below code is an example. You can improve and create reusable items.

Sample Code

App.kt

import androidx.compose.animation.AnimatedVisibility import androidx.compose.foundation.Image import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material.Button import androidx.compose.material.MaterialTheme import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import org.jetbrains.compose.resources.ExperimentalResourceApi import org.jetbrains.compose.resources.painterResource import org.jetbrains.compose.ui.tooling.preview.Preview import samplemultiplatform.composeapp.generated.resources.Res import samplemultiplatform.composeapp.generated.resources.compose_multiplatform @OptIn(ExperimentalResourceApi::class) @Composable @Preview fun App() { MaterialTheme { val viewModel = ViewModel() var showContent by remember { mutableStateOf(false) } Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Button(onClick = { showContent = !showContent }) { Text("Click me!") } AnimatedVisibility(showContent) { val state = remember { viewModel.getState() } if (state.error.isNotEmpty()) { Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Text("Compose: ${state.error}") } } if (state.success.isNotEmpty()) { Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Image(painterResource(Res.drawable.compose_multiplatform), null) Text("Compose: ${state.success}") } } } } } }
Last modified: 06 March 2024