CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Pending
Overview
Eval results
Files

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

Install with Tessl CLI

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