Compose Multiplatform UI library for iOS Simulator ARM64 target providing declarative UI framework based on Jetpack Compose for multiplatform development
npx @tessl/cli install tessl/maven-org-jetbrains-compose-ui--ui-uikitsimarm64@1.8.0Compose Multiplatform UI provides a comprehensive declarative UI framework for building cross-platform applications using Kotlin. It enables developers to create native-like user interfaces and share UI code across iOS, Android, Desktop (Windows, macOS, Linux), and Web platforms.
build.gradle.kts:
implementation("org.jetbrains.compose.ui:ui-uikitsimarm64:1.8.2")import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.spFor specific functionality:
// Graphics and drawing
import androidx.compose.ui.graphics.*
import androidx.compose.ui.draw.*
// Text handling
import androidx.compose.ui.text.*
// Window management (desktop/platform-specific)
import androidx.compose.ui.window.*
// Input handling
import androidx.compose.ui.input.pointer.*
// Layout system
import androidx.compose.ui.layout.*
// iOS platform integration
import androidx.compose.ui.window.ComposeUIViewController
import androidx.compose.ui.interop.UIKitView
import androidx.compose.ui.interop.UIKitViewController
// Material Design components
import androidx.compose.material.*
import androidx.compose.material3.*
// Foundation composables (lazy layouts)
import androidx.compose.foundation.lazy.*
// Resource management
import org.jetbrains.compose.resources.*import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.draw.background
import androidx.compose.runtime.*
// Basic modifier usage with core UI components
@Composable
fun ExampleCard(content: String) {
Box(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
.background(Color.Blue)
) {
Text(
text = content,
style = TextStyle(
fontSize = 16.sp,
fontWeight = FontWeight.Medium,
color = Color.White
),
modifier = Modifier.align(Alignment.Center)
)
}
}
// Example with layout and state
@Composable
fun InteractiveExample() {
var count by remember { mutableStateOf(0) }
Column(
modifier = Modifier.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Count: $count",
style = TextStyle(fontSize = 20.sp)
)
Row {
repeat(3) { index ->
Box(
modifier = Modifier
.size(50.dp)
.background(
when (index) {
0 -> Color.Red
1 -> Color.Green
else -> Color.Blue
}
)
.clickable { count++ }
)
if (index < 2) {
Spacer(modifier = Modifier.width(8.dp))
}
}
}
}
}
// iOS integration example
fun MainViewController(): UIViewController =
ComposeUIViewController {
MyComposeApp()
}
// Material Design example
@Composable
fun MaterialExample() {
MaterialTheme {
Card(
modifier = Modifier.padding(16.dp)
) {
Column(
modifier = Modifier.padding(16.dp)
) {
Text(
text = "Material Card",
style = MaterialTheme.typography.headlineSmall
)
Button(
onClick = { /* Handle click */ }
) {
Text("Material Button")
}
}
}
}
}Compose Multiplatform UI is built around several key architectural components:
Essential building blocks for creating user interfaces including layout containers, text display, and interactive components.
@Composable
fun Box(
modifier: Modifier = Modifier,
contentAlignment: Alignment = Alignment.TopStart,
propagateMinConstraints: Boolean = false,
content: @Composable BoxScope.() -> Unit
)
@Composable
fun Column(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: @Composable ColumnScope.() -> Unit
)
@Composable
fun Row(
modifier: Modifier = Modifier,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
verticalAlignment: Alignment.Vertical = Alignment.Top,
content: @Composable RowScope.() -> Unit
)
@Composable
fun Text(
text: String,
modifier: Modifier = Modifier,
color: Color = Color.Unspecified,
fontSize: TextUnit = TextUnit.Unspecified,
fontStyle: FontStyle? = null,
fontWeight: FontWeight? = null,
fontFamily: FontFamily? = null,
letterSpacing: TextUnit = TextUnit.Unspecified,
textDecoration: TextDecoration? = null,
textAlign: TextAlign? = null,
lineHeight: TextUnit = TextUnit.Unspecified,
overflow: TextOverflow = TextOverflow.Clip,
softWrap: Boolean = true,
maxLines: Int = Int.MAX_VALUE,
style: TextStyle = LocalTextStyle.current
)
@Composable
fun LazyColumn(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
content: LazyListScope.() -> Unit
)
@Composable
fun LazyRow(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(0.dp),
content: LazyListScope.() -> Unit
)State handling and lifecycle management for reactive UI updates and side effects in Compose applications.
@Composable
fun <T> remember(calculation: () -> T): T
@Composable
fun <T> remember(
key1: Any?,
calculation: () -> T
): T
fun <T> mutableStateOf(
value: T,
policy: SnapshotMutationPolicy<T> = structuralEqualityPolicy()
): MutableState<T>
@Composable
fun <T> derivedStateOf(calculation: () -> T): State<T>
@Composable
fun LaunchedEffect(
key1: Any?,
block: suspend CoroutineScope.() -> Unit
)
@Composable
fun DisposableEffect(
key1: Any?,
effect: DisposableEffectScope.() -> DisposableEffectResult
)Essential building blocks for all Compose UI applications including the Modifier system, alignment, and basic measurement units.
interface Modifier {
fun <R> foldIn(initial: R, operation: (R, Element) -> R): R
fun <R> foldOut(initial: R, operation: (Element, R) -> R): R
fun any(predicate: (Element) -> Boolean): Boolean
fun all(predicate: (Element) -> Boolean): Boolean
companion object : Modifier {
override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R
override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R
override fun any(predicate: (Element) -> Boolean): Boolean
override fun all(predicate: (Element) -> Boolean): Boolean
}
}
object Alignment {
val TopStart: Alignment
val TopCenter: Alignment
val TopEnd: Alignment
val CenterStart: Alignment
val Center: Alignment
val CenterEnd: Alignment
val BottomStart: Alignment
val BottomCenter: Alignment
val BottomEnd: Alignment
val Top: Alignment.Vertical
val CenterVertically: Alignment.Vertical
val Bottom: Alignment.Vertical
val Start: Alignment.Horizontal
val CenterHorizontally: Alignment.Horizontal
val End: Alignment.Horizontal
}Comprehensive 2D graphics system for custom drawing, visual effects, and image handling with hardware acceleration support.
class Color(
val value: ULong
) {
constructor(red: Float, green: Float, blue: Float, alpha: Float = 1.0f)
constructor(red: Int, green: Int, blue: Int, alpha: Int = 255)
val red: Float
val green: Float
val blue: Float
val alpha: Float
companion object {
val Black: Color
val White: Color
val Red: Color
val Green: Color
val Blue: Color
val Transparent: Color
val Unspecified: Color
}
}
interface Canvas {
fun drawRect(
color: Color,
topLeft: Offset = Offset.Zero,
size: Size = Size.Unspecified,
style: DrawStyle = Fill
)
fun drawCircle(
color: Color,
radius: Float,
center: Offset = Offset.Unspecified,
style: DrawStyle = Fill
)
fun drawPath(
path: Path,
color: Color,
style: DrawStyle = Fill
)
fun drawImage(
image: ImageBitmap,
topLeft: Offset = Offset.Zero,
paint: Paint = Paint()
)
}Complete text system with styling, input capabilities, and internationalization support for rich text experiences.
data class TextStyle(
val color: Color = Color.Unspecified,
val fontSize: TextUnit = TextUnit.Unspecified,
val fontWeight: FontWeight? = null,
val fontStyle: FontStyle? = null,
val fontSynthesis: FontSynthesis? = null,
val fontFamily: FontFamily? = null,
val fontFeatureSettings: String? = null,
val letterSpacing: TextUnit = TextUnit.Unspecified,
val baselineShift: BaselineShift? = null,
val textGeometricTransform: TextGeometricTransform? = null,
val localeList: LocaleList? = null,
val background: Color = Color.Unspecified,
val textDecoration: TextDecoration? = null,
val shadow: Shadow? = null,
val textAlign: TextAlign? = null,
val textDirection: TextDirection? = null,
val lineHeight: TextUnit = TextUnit.Unspecified,
val textIndent: TextIndent? = null
)
object FontWeight {
val Thin: FontWeight
val ExtraLight: FontWeight
val Light: FontWeight
val Normal: FontWeight
val Medium: FontWeight
val SemiBold: FontWeight
val Bold: FontWeight
val ExtraBold: FontWeight
val Black: FontWeight
}Flexible layout engine with built-in layouts and support for custom layout implementations with precise measurement and positioning.
@Composable
fun Layout(
content: @Composable () -> Unit,
modifier: Modifier = Modifier,
measurePolicy: MeasurePolicy
)
interface MeasureScope : IntrinsicMeasureScope {
fun layout(
width: Int,
height: Int,
alignmentLines: Map<AlignmentLine, Int> = emptyMap(),
placementBlock: Placeable.PlacementScope.() -> Unit
): MeasureResult
}
interface Placeable {
val width: Int
val height: Int
fun place(position: IntOffset)
fun placeRelative(position: IntOffset)
}Multi-platform input handling system supporting touch, mouse, keyboard input, and gesture recognition with focus management.
fun Modifier.pointerInput(
key1: Any?,
block: suspend PointerInputScope.() -> Unit
): Modifier
fun Modifier.clickable(
enabled: Boolean = true,
onClickLabel: String? = null,
role: Role? = null,
onClick: () -> Unit
): Modifier
enum class PointerEventType {
Press, Release, Move, Enter, Exit
}
interface PointerInputScope : Density {
val size: IntSize
val viewConfiguration: ViewConfiguration
suspend fun awaitPointerEventScope(
pass: PointerEventPass = PointerEventPass.Main,
block: suspend AwaitPointerEventScope.() -> Unit
)
}Platform-specific window management and integration capabilities for Desktop, iOS, Android, and Web platforms.
@Composable
fun singleWindowApplication(
state: WindowState = rememberWindowState(),
visible: Boolean = true,
title: String = "Untitled",
icon: Painter? = null,
undecorated: Boolean = false,
transparent: Boolean = false,
resizable: Boolean = true,
enabled: Boolean = true,
focusable: Boolean = true,
alwaysOnTop: Boolean = false,
onPreviewKeyEvent: (KeyEvent) -> Boolean = { false },
onKeyEvent: (KeyEvent) -> Boolean = { false },
content: @Composable WindowScope.() -> Unit
)
// iOS-specific
fun ComposeUIViewController(
configure: ComposeUIViewControllerConfiguration = ComposeUIViewControllerConfiguration(),
content: @Composable () -> Unit
): UIViewControllerWindow and Platform Management
Native iOS integration APIs for embedding Compose content in iOS applications and integrating with UIKit components and view controllers.
fun ComposeUIViewController(
configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
content: @Composable () -> Unit
): UIViewController
@Composable
fun UIKitView(
factory: () -> UIView,
modifier: Modifier = Modifier,
update: (UIView) -> Unit = {},
onResize: ((view: UIView, rect: CValue<CGRect>) -> Unit)? = null,
background: Color = Color.Unspecified
)
@Composable
fun UIKitViewController(
factory: () -> UIViewController,
modifier: Modifier = Modifier,
update: (UIViewController) -> Unit = {}
)Complete Material Design component library implementing Google's Material Design system with theming, typography, and interaction patterns.
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = MaterialTheme.shapes.small,
colors: ButtonColors = ButtonDefaults.buttonColors(),
content: @Composable RowScope.() -> Unit
)
@Composable
fun Card(
modifier: Modifier = Modifier,
shape: Shape = MaterialTheme.shapes.medium,
colors: CardColors = CardDefaults.cardColors(),
elevation: CardElevation = CardDefaults.cardElevation(),
content: @Composable ColumnScope.() -> Unit
)
@Composable
fun TextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
label: (@Composable () -> Unit)? = null,
isError: Boolean = false
)
@Composable
fun MaterialTheme(
colorScheme: ColorScheme = MaterialTheme.colorScheme,
shapes: Shapes = MaterialTheme.shapes,
typography: Typography = MaterialTheme.typography,
content: @Composable () -> Unit
)Type-safe resource management system for handling strings, images, fonts, and other assets across multiple platforms with localization support.
@Composable
fun stringResource(resource: StringResource): String
@Composable
fun painterResource(resource: DrawableResource): Painter
@Composable
fun fontResource(
resource: FontResource,
weight: FontWeight = FontWeight.Normal,
style: FontStyle = FontStyle.Normal
): Font
data class StringResource(val key: String, val bundle: String = "strings")
data class DrawableResource(val key: String, val bundle: String = "drawable")
data class FontResource(val key: String, val bundle: String = "font")// Measurement units
@JvmInline
value class Dp(val value: Float) {
companion object {
val Hairline: Dp
val Infinity: Dp
val Unspecified: Dp
}
}
val Int.dp: Dp
val Double.dp: Dp
val Float.dp: Dp
@JvmInline
value class Sp(val value: Float) {
companion object {
val Unspecified: Sp
}
}
val Int.sp: Sp
val Double.sp: Sp
val Float.sp: Sp
// Layout direction
enum class LayoutDirection {
Ltr, Rtl
}
// Size and position
@Immutable
data class IntOffset(val x: Int, val y: Int) {
companion object {
val Zero: IntOffset
}
}
@Immutable
data class IntSize(val width: Int, val height: Int) {
companion object {
val Zero: IntSize
}
}