0
# Compose Multiplatform UI
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: org.jetbrains.compose.ui:ui-uikitsimarm64
7
- **Package Type**: maven
8
- **Language**: Kotlin (Kotlin Multiplatform)
9
- **Installation**: Add to your `build.gradle.kts`:
10
```kotlin
11
implementation("org.jetbrains.compose.ui:ui-uikitsimarm64:1.8.2")
12
```
13
14
## Core Imports
15
16
```kotlin
17
import androidx.compose.ui.Modifier
18
import androidx.compose.ui.Alignment
19
import androidx.compose.ui.graphics.Color
20
import androidx.compose.ui.text.TextStyle
21
import androidx.compose.ui.unit.dp
22
import androidx.compose.ui.unit.sp
23
```
24
25
For specific functionality:
26
27
```kotlin
28
// Graphics and drawing
29
import androidx.compose.ui.graphics.*
30
import androidx.compose.ui.draw.*
31
32
// Text handling
33
import androidx.compose.ui.text.*
34
35
// Window management (desktop/platform-specific)
36
import androidx.compose.ui.window.*
37
38
// Input handling
39
import androidx.compose.ui.input.pointer.*
40
41
// Layout system
42
import androidx.compose.ui.layout.*
43
44
// iOS platform integration
45
import androidx.compose.ui.window.ComposeUIViewController
46
import androidx.compose.ui.interop.UIKitView
47
import androidx.compose.ui.interop.UIKitViewController
48
49
// Material Design components
50
import androidx.compose.material.*
51
import androidx.compose.material3.*
52
53
// Foundation composables (lazy layouts)
54
import androidx.compose.foundation.lazy.*
55
56
// Resource management
57
import org.jetbrains.compose.resources.*
58
```
59
60
## Basic Usage
61
62
```kotlin
63
import androidx.compose.ui.Modifier
64
import androidx.compose.ui.Alignment
65
import androidx.compose.ui.graphics.Color
66
import androidx.compose.ui.text.TextStyle
67
import androidx.compose.ui.text.font.FontWeight
68
import androidx.compose.ui.unit.dp
69
import androidx.compose.ui.unit.sp
70
import androidx.compose.ui.draw.background
71
import androidx.compose.runtime.*
72
73
// Basic modifier usage with core UI components
74
@Composable
75
fun ExampleCard(content: String) {
76
Box(
77
modifier = Modifier
78
.fillMaxWidth()
79
.padding(16.dp)
80
.background(Color.Blue)
81
) {
82
Text(
83
text = content,
84
style = TextStyle(
85
fontSize = 16.sp,
86
fontWeight = FontWeight.Medium,
87
color = Color.White
88
),
89
modifier = Modifier.align(Alignment.Center)
90
)
91
}
92
}
93
94
// Example with layout and state
95
@Composable
96
fun InteractiveExample() {
97
var count by remember { mutableStateOf(0) }
98
99
Column(
100
modifier = Modifier.padding(16.dp),
101
horizontalAlignment = Alignment.CenterHorizontally
102
) {
103
Text(
104
text = "Count: $count",
105
style = TextStyle(fontSize = 20.sp)
106
)
107
108
Row {
109
repeat(3) { index ->
110
Box(
111
modifier = Modifier
112
.size(50.dp)
113
.background(
114
when (index) {
115
0 -> Color.Red
116
1 -> Color.Green
117
else -> Color.Blue
118
}
119
)
120
.clickable { count++ }
121
)
122
if (index < 2) {
123
Spacer(modifier = Modifier.width(8.dp))
124
}
125
}
126
}
127
}
128
}
129
130
// iOS integration example
131
fun MainViewController(): UIViewController =
132
ComposeUIViewController {
133
MyComposeApp()
134
}
135
136
// Material Design example
137
@Composable
138
fun MaterialExample() {
139
MaterialTheme {
140
Card(
141
modifier = Modifier.padding(16.dp)
142
) {
143
Column(
144
modifier = Modifier.padding(16.dp)
145
) {
146
Text(
147
text = "Material Card",
148
style = MaterialTheme.typography.headlineSmall
149
)
150
Button(
151
onClick = { /* Handle click */ }
152
) {
153
Text("Material Button")
154
}
155
}
156
}
157
}
158
}
159
```
160
161
## Architecture
162
163
Compose Multiplatform UI is built around several key architectural components:
164
165
- **Modifier System**: The primary interface for styling, layout, and behavior modification of composables
166
- **Graphics System**: Comprehensive 2D graphics capabilities including drawing, painting, and visual effects
167
- **Text System**: Full-featured text handling with styling, input, and internationalization support
168
- **Layout Engine**: Flexible layout system with built-in layouts and custom layout capabilities
169
- **Input Handling**: Multi-platform input system supporting touch, mouse, keyboard, and gesture recognition
170
- **Window Management**: Platform-specific window and display management
171
- **Platform Integration**: Native platform integration for iOS, Android, Desktop, and Web
172
173
## Capabilities
174
175
### Foundation Composables
176
177
Essential building blocks for creating user interfaces including layout containers, text display, and interactive components.
178
179
```kotlin { .api }
180
@Composable
181
fun Box(
182
modifier: Modifier = Modifier,
183
contentAlignment: Alignment = Alignment.TopStart,
184
propagateMinConstraints: Boolean = false,
185
content: @Composable BoxScope.() -> Unit
186
)
187
188
@Composable
189
fun Column(
190
modifier: Modifier = Modifier,
191
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
192
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
193
content: @Composable ColumnScope.() -> Unit
194
)
195
196
@Composable
197
fun Row(
198
modifier: Modifier = Modifier,
199
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
200
verticalAlignment: Alignment.Vertical = Alignment.Top,
201
content: @Composable RowScope.() -> Unit
202
)
203
204
@Composable
205
fun Text(
206
text: String,
207
modifier: Modifier = Modifier,
208
color: Color = Color.Unspecified,
209
fontSize: TextUnit = TextUnit.Unspecified,
210
fontStyle: FontStyle? = null,
211
fontWeight: FontWeight? = null,
212
fontFamily: FontFamily? = null,
213
letterSpacing: TextUnit = TextUnit.Unspecified,
214
textDecoration: TextDecoration? = null,
215
textAlign: TextAlign? = null,
216
lineHeight: TextUnit = TextUnit.Unspecified,
217
overflow: TextOverflow = TextOverflow.Clip,
218
softWrap: Boolean = true,
219
maxLines: Int = Int.MAX_VALUE,
220
style: TextStyle = LocalTextStyle.current
221
)
222
223
@Composable
224
fun LazyColumn(
225
modifier: Modifier = Modifier,
226
state: LazyListState = rememberLazyListState(),
227
contentPadding: PaddingValues = PaddingValues(0.dp),
228
content: LazyListScope.() -> Unit
229
)
230
231
@Composable
232
fun LazyRow(
233
modifier: Modifier = Modifier,
234
state: LazyListState = rememberLazyListState(),
235
contentPadding: PaddingValues = PaddingValues(0.dp),
236
content: LazyListScope.() -> Unit
237
)
238
```
239
240
[Foundation Composables](./composables.md)
241
242
### State Management
243
244
State handling and lifecycle management for reactive UI updates and side effects in Compose applications.
245
246
```kotlin { .api }
247
@Composable
248
fun <T> remember(calculation: () -> T): T
249
250
@Composable
251
fun <T> remember(
252
key1: Any?,
253
calculation: () -> T
254
): T
255
256
fun <T> mutableStateOf(
257
value: T,
258
policy: SnapshotMutationPolicy<T> = structuralEqualityPolicy()
259
): MutableState<T>
260
261
@Composable
262
fun <T> derivedStateOf(calculation: () -> T): State<T>
263
264
@Composable
265
fun LaunchedEffect(
266
key1: Any?,
267
block: suspend CoroutineScope.() -> Unit
268
)
269
270
@Composable
271
fun DisposableEffect(
272
key1: Any?,
273
effect: DisposableEffectScope.() -> DisposableEffectResult
274
)
275
```
276
277
[State Management](./state.md)
278
279
### Core UI Foundation
280
281
Essential building blocks for all Compose UI applications including the Modifier system, alignment, and basic measurement units.
282
283
```kotlin { .api }
284
interface Modifier {
285
fun <R> foldIn(initial: R, operation: (R, Element) -> R): R
286
fun <R> foldOut(initial: R, operation: (Element, R) -> R): R
287
fun any(predicate: (Element) -> Boolean): Boolean
288
fun all(predicate: (Element) -> Boolean): Boolean
289
290
companion object : Modifier {
291
override fun <R> foldIn(initial: R, operation: (R, Element) -> R): R
292
override fun <R> foldOut(initial: R, operation: (Element, R) -> R): R
293
override fun any(predicate: (Element) -> Boolean): Boolean
294
override fun all(predicate: (Element) -> Boolean): Boolean
295
}
296
}
297
298
object Alignment {
299
val TopStart: Alignment
300
val TopCenter: Alignment
301
val TopEnd: Alignment
302
val CenterStart: Alignment
303
val Center: Alignment
304
val CenterEnd: Alignment
305
val BottomStart: Alignment
306
val BottomCenter: Alignment
307
val BottomEnd: Alignment
308
309
val Top: Alignment.Vertical
310
val CenterVertically: Alignment.Vertical
311
val Bottom: Alignment.Vertical
312
313
val Start: Alignment.Horizontal
314
val CenterHorizontally: Alignment.Horizontal
315
val End: Alignment.Horizontal
316
}
317
```
318
319
[Core UI Foundation](./core-ui.md)
320
321
### Graphics and Visual Effects
322
323
Comprehensive 2D graphics system for custom drawing, visual effects, and image handling with hardware acceleration support.
324
325
```kotlin { .api }
326
class Color(
327
val value: ULong
328
) {
329
constructor(red: Float, green: Float, blue: Float, alpha: Float = 1.0f)
330
constructor(red: Int, green: Int, blue: Int, alpha: Int = 255)
331
332
val red: Float
333
val green: Float
334
val blue: Float
335
val alpha: Float
336
337
companion object {
338
val Black: Color
339
val White: Color
340
val Red: Color
341
val Green: Color
342
val Blue: Color
343
val Transparent: Color
344
val Unspecified: Color
345
}
346
}
347
348
interface Canvas {
349
fun drawRect(
350
color: Color,
351
topLeft: Offset = Offset.Zero,
352
size: Size = Size.Unspecified,
353
style: DrawStyle = Fill
354
)
355
fun drawCircle(
356
color: Color,
357
radius: Float,
358
center: Offset = Offset.Unspecified,
359
style: DrawStyle = Fill
360
)
361
fun drawPath(
362
path: Path,
363
color: Color,
364
style: DrawStyle = Fill
365
)
366
fun drawImage(
367
image: ImageBitmap,
368
topLeft: Offset = Offset.Zero,
369
paint: Paint = Paint()
370
)
371
}
372
```
373
374
[Graphics and Visual Effects](./graphics.md)
375
376
### Text Handling and Typography
377
378
Complete text system with styling, input capabilities, and internationalization support for rich text experiences.
379
380
```kotlin { .api }
381
data class TextStyle(
382
val color: Color = Color.Unspecified,
383
val fontSize: TextUnit = TextUnit.Unspecified,
384
val fontWeight: FontWeight? = null,
385
val fontStyle: FontStyle? = null,
386
val fontSynthesis: FontSynthesis? = null,
387
val fontFamily: FontFamily? = null,
388
val fontFeatureSettings: String? = null,
389
val letterSpacing: TextUnit = TextUnit.Unspecified,
390
val baselineShift: BaselineShift? = null,
391
val textGeometricTransform: TextGeometricTransform? = null,
392
val localeList: LocaleList? = null,
393
val background: Color = Color.Unspecified,
394
val textDecoration: TextDecoration? = null,
395
val shadow: Shadow? = null,
396
val textAlign: TextAlign? = null,
397
val textDirection: TextDirection? = null,
398
val lineHeight: TextUnit = TextUnit.Unspecified,
399
val textIndent: TextIndent? = null
400
)
401
402
object FontWeight {
403
val Thin: FontWeight
404
val ExtraLight: FontWeight
405
val Light: FontWeight
406
val Normal: FontWeight
407
val Medium: FontWeight
408
val SemiBold: FontWeight
409
val Bold: FontWeight
410
val ExtraBold: FontWeight
411
val Black: FontWeight
412
}
413
```
414
415
[Text Handling and Typography](./text.md)
416
417
### Layout System
418
419
Flexible layout engine with built-in layouts and support for custom layout implementations with precise measurement and positioning.
420
421
```kotlin { .api }
422
@Composable
423
fun Layout(
424
content: @Composable () -> Unit,
425
modifier: Modifier = Modifier,
426
measurePolicy: MeasurePolicy
427
)
428
429
interface MeasureScope : IntrinsicMeasureScope {
430
fun layout(
431
width: Int,
432
height: Int,
433
alignmentLines: Map<AlignmentLine, Int> = emptyMap(),
434
placementBlock: Placeable.PlacementScope.() -> Unit
435
): MeasureResult
436
}
437
438
interface Placeable {
439
val width: Int
440
val height: Int
441
442
fun place(position: IntOffset)
443
fun placeRelative(position: IntOffset)
444
}
445
```
446
447
[Layout System](./layout.md)
448
449
### Input and Interaction
450
451
Multi-platform input handling system supporting touch, mouse, keyboard input, and gesture recognition with focus management.
452
453
```kotlin { .api }
454
fun Modifier.pointerInput(
455
key1: Any?,
456
block: suspend PointerInputScope.() -> Unit
457
): Modifier
458
459
fun Modifier.clickable(
460
enabled: Boolean = true,
461
onClickLabel: String? = null,
462
role: Role? = null,
463
onClick: () -> Unit
464
): Modifier
465
466
enum class PointerEventType {
467
Press, Release, Move, Enter, Exit
468
}
469
470
interface PointerInputScope : Density {
471
val size: IntSize
472
val viewConfiguration: ViewConfiguration
473
suspend fun awaitPointerEventScope(
474
pass: PointerEventPass = PointerEventPass.Main,
475
block: suspend AwaitPointerEventScope.() -> Unit
476
)
477
}
478
```
479
480
[Input and Interaction](./input.md)
481
482
### Window and Platform Management
483
484
Platform-specific window management and integration capabilities for Desktop, iOS, Android, and Web platforms.
485
486
```kotlin { .api }
487
@Composable
488
fun singleWindowApplication(
489
state: WindowState = rememberWindowState(),
490
visible: Boolean = true,
491
title: String = "Untitled",
492
icon: Painter? = null,
493
undecorated: Boolean = false,
494
transparent: Boolean = false,
495
resizable: Boolean = true,
496
enabled: Boolean = true,
497
focusable: Boolean = true,
498
alwaysOnTop: Boolean = false,
499
onPreviewKeyEvent: (KeyEvent) -> Boolean = { false },
500
onKeyEvent: (KeyEvent) -> Boolean = { false },
501
content: @Composable WindowScope.() -> Unit
502
)
503
504
// iOS-specific
505
fun ComposeUIViewController(
506
configure: ComposeUIViewControllerConfiguration = ComposeUIViewControllerConfiguration(),
507
content: @Composable () -> Unit
508
): UIViewController
509
```
510
511
[Window and Platform Management](./window.md)
512
513
### iOS Platform Integration
514
515
Native iOS integration APIs for embedding Compose content in iOS applications and integrating with UIKit components and view controllers.
516
517
```kotlin { .api }
518
fun ComposeUIViewController(
519
configure: ComposeUIViewControllerConfiguration.() -> Unit = {},
520
content: @Composable () -> Unit
521
): UIViewController
522
523
@Composable
524
fun UIKitView(
525
factory: () -> UIView,
526
modifier: Modifier = Modifier,
527
update: (UIView) -> Unit = {},
528
onResize: ((view: UIView, rect: CValue<CGRect>) -> Unit)? = null,
529
background: Color = Color.Unspecified
530
)
531
532
@Composable
533
fun UIKitViewController(
534
factory: () -> UIViewController,
535
modifier: Modifier = Modifier,
536
update: (UIViewController) -> Unit = {}
537
)
538
```
539
540
[iOS Platform Integration](./ios-integration.md)
541
542
### Material Design Components
543
544
Complete Material Design component library implementing Google's Material Design system with theming, typography, and interaction patterns.
545
546
```kotlin { .api }
547
@Composable
548
fun Button(
549
onClick: () -> Unit,
550
modifier: Modifier = Modifier,
551
enabled: Boolean = true,
552
shape: Shape = MaterialTheme.shapes.small,
553
colors: ButtonColors = ButtonDefaults.buttonColors(),
554
content: @Composable RowScope.() -> Unit
555
)
556
557
@Composable
558
fun Card(
559
modifier: Modifier = Modifier,
560
shape: Shape = MaterialTheme.shapes.medium,
561
colors: CardColors = CardDefaults.cardColors(),
562
elevation: CardElevation = CardDefaults.cardElevation(),
563
content: @Composable ColumnScope.() -> Unit
564
)
565
566
@Composable
567
fun TextField(
568
value: String,
569
onValueChange: (String) -> Unit,
570
modifier: Modifier = Modifier,
571
label: (@Composable () -> Unit)? = null,
572
isError: Boolean = false
573
)
574
575
@Composable
576
fun MaterialTheme(
577
colorScheme: ColorScheme = MaterialTheme.colorScheme,
578
shapes: Shapes = MaterialTheme.shapes,
579
typography: Typography = MaterialTheme.typography,
580
content: @Composable () -> Unit
581
)
582
```
583
584
[Material Design Components](./material-design.md)
585
586
### Resource Management
587
588
Type-safe resource management system for handling strings, images, fonts, and other assets across multiple platforms with localization support.
589
590
```kotlin { .api }
591
@Composable
592
fun stringResource(resource: StringResource): String
593
594
@Composable
595
fun painterResource(resource: DrawableResource): Painter
596
597
@Composable
598
fun fontResource(
599
resource: FontResource,
600
weight: FontWeight = FontWeight.Normal,
601
style: FontStyle = FontStyle.Normal
602
): Font
603
604
data class StringResource(val key: String, val bundle: String = "strings")
605
data class DrawableResource(val key: String, val bundle: String = "drawable")
606
data class FontResource(val key: String, val bundle: String = "font")
607
```
608
609
[Resource Management](./resources.md)
610
611
## Core Types
612
613
```kotlin { .api }
614
// Measurement units
615
@JvmInline
616
value class Dp(val value: Float) {
617
companion object {
618
val Hairline: Dp
619
val Infinity: Dp
620
val Unspecified: Dp
621
}
622
}
623
624
val Int.dp: Dp
625
val Double.dp: Dp
626
val Float.dp: Dp
627
628
@JvmInline
629
value class Sp(val value: Float) {
630
companion object {
631
val Unspecified: Sp
632
}
633
}
634
635
val Int.sp: Sp
636
val Double.sp: Sp
637
val Float.sp: Sp
638
639
// Layout direction
640
enum class LayoutDirection {
641
Ltr, Rtl
642
}
643
644
// Size and position
645
@Immutable
646
data class IntOffset(val x: Int, val y: Int) {
647
companion object {
648
val Zero: IntOffset
649
}
650
}
651
652
@Immutable
653
data class IntSize(val width: Int, val height: Int) {
654
companion object {
655
val Zero: IntSize
656
}
657
}
658
```