or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

composables.mdcore-ui.mdgraphics.mdindex.mdinput.mdios-integration.mdlayout.mdmaterial-design.mdresources.mdstate.mdtext.mdwindow.md
tile.json

tessl/maven-org-jetbrains-compose-ui--ui-uikitsimarm64

Compose Multiplatform UI library for iOS Simulator ARM64 target providing declarative UI framework based on Jetpack Compose for multiplatform development

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
mavenpkg:maven/org.jetbrains.compose.ui/ui-uikitsimarm64@1.8.x

To install, run

npx @tessl/cli install tessl/maven-org-jetbrains-compose-ui--ui-uikitsimarm64@1.8.0

index.mddocs/

Compose Multiplatform UI

Compose 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.

Package Information

  • Package Name: org.jetbrains.compose.ui:ui-uikitsimarm64
  • Package Type: maven
  • Language: Kotlin (Kotlin Multiplatform)
  • Installation: Add to your build.gradle.kts:
    implementation("org.jetbrains.compose.ui:ui-uikitsimarm64:1.8.2")

Core Imports

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.sp

For 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.*

Basic Usage

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")
                }
            }
        }
    }
}

Architecture

Compose Multiplatform UI is built around several key architectural components:

  • Modifier System: The primary interface for styling, layout, and behavior modification of composables
  • Graphics System: Comprehensive 2D graphics capabilities including drawing, painting, and visual effects
  • Text System: Full-featured text handling with styling, input, and internationalization support
  • Layout Engine: Flexible layout system with built-in layouts and custom layout capabilities
  • Input Handling: Multi-platform input system supporting touch, mouse, keyboard, and gesture recognition
  • Window Management: Platform-specific window and display management
  • Platform Integration: Native platform integration for iOS, Android, Desktop, and Web

Capabilities

Foundation Composables

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
)

Foundation Composables

State Management

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
)

State Management

Core UI Foundation

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
}

Core UI Foundation

Graphics and Visual Effects

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()
    )
}

Graphics and Visual Effects

Text Handling and Typography

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
}

Text Handling and Typography

Layout System

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)
}

Layout System

Input and Interaction

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
    )
}

Input and Interaction

Window and Platform Management

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
): UIViewController

Window and Platform Management

iOS Platform Integration

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 = {}
)

iOS Platform Integration

Material Design Components

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
)

Material Design Components

Resource Management

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")

Resource Management

Core Types

// 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
    }
}