Compose Multiplatform UI library for iOS Simulator ARM64 target providing declarative UI framework based on Jetpack Compose for multiplatform development
—
Essential building blocks for all Compose UI applications including the Modifier system, alignment, measurement units, and core interfaces.
The Modifier interface is the primary way to decorate or add behavior to Compose UI elements. Modifiers can be chained together to create complex styling and behavior combinations.
/**
* An ordered, immutable collection of modifier elements that decorate or add behavior to Compose UI elements.
*/
interface Modifier {
/**
* Accumulates a value starting with initial and applying operation to current result and each element.
*/
fun <R> foldIn(initial: R, operation: (R, Element) -> R): R
/**
* Accumulates a value starting with initial and applying operation from right to left.
*/
fun <R> foldOut(initial: R, operation: (Element, R) -> R): R
/**
* Returns true if any element matches the given predicate.
*/
fun any(predicate: (Element) -> Boolean): Boolean
/**
* Returns true if all elements match the given predicate.
*/
fun all(predicate: (Element) -> Boolean): Boolean
/**
* Concatenates this modifier with another modifier.
*/
infix fun then(other: Modifier): Modifier
/**
* A single Element contained within a Modifier chain.
*/
interface Element : 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
}
/**
* The companion object Modifier is the empty, default, or starter Modifier that contains no elements.
*/
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
override infix fun then(other: Modifier): Modifier
}
}Usage Examples:
// Basic modifier chaining
Modifier
.fillMaxWidth()
.padding(16.dp)
.background(Color.Blue)
.clickable { /* action */ }
// Conditional modifiers
val baseModifier = Modifier.fillMaxWidth()
val finalModifier = if (isEnabled) {
baseModifier.clickable { /* action */ }
} else {
baseModifier.alpha(0.5f)
}Provides alignment specifications for positioning elements within containers, supporting both absolute and relative positioning.
/**
* An interface to calculate the position of a sized box inside an available space.
*/
interface Alignment {
/**
* Calculates the position of a box with the given size in the available space.
*/
fun align(size: IntSize, space: IntSize, layoutDirection: LayoutDirection): IntOffset
/**
* 2D Alignments for absolute positioning
*/
interface Horizontal {
fun align(size: Int, space: Int, layoutDirection: LayoutDirection): Int
}
interface Vertical {
fun align(size: Int, space: Int): Int
}
companion object {
// 2D alignments
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
// 1D vertical alignments
val Top: Vertical
val CenterVertically: Vertical
val Bottom: Vertical
// 1D horizontal alignments
val Start: Horizontal
val CenterHorizontally: Horizontal
val End: Horizontal
}
}
/**
* BiasAlignment allows positioning with a bias value from -1.0 to 1.0
*/
class BiasAlignment(
val horizontalBias: Float,
val verticalBias: Float
) : Alignment {
class Horizontal(val bias: Float) : Alignment.Horizontal
class Vertical(val bias: Float) : Alignment.Vertical
}
/**
* AbsoluteAlignment uses start/end positioning regardless of layout direction
*/
object AbsoluteAlignment {
val TopLeft: Alignment
val TopRight: Alignment
val CenterLeft: Alignment
val CenterRight: Alignment
val BottomLeft: Alignment
val BottomRight: Alignment
val Left: Alignment.Horizontal
val Right: Alignment.Horizontal
}Usage Examples:
// In a Box composable
Box(
modifier = Modifier.size(200.dp),
contentAlignment = Alignment.Center
) {
Text("Centered content")
}
// Custom bias alignment
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = BiasAlignment(0.3f, -0.2f)
) {
Text("Custom positioned")
}Density-independent and scalable measurement units for consistent layout across different screen densities and user preferences.
/**
* Dimension value representing device-independent pixels (dp).
*/
@JvmInline
value class Dp(val value: Float) : Comparable<Dp> {
override operator fun compareTo(other: Dp): Int
operator fun plus(other: Dp): Dp
operator fun minus(other: Dp): Dp
operator fun times(other: Float): Dp
operator fun times(other: Int): Dp
operator fun div(other: Float): Dp
operator fun div(other: Int): Dp
operator fun unaryMinus(): Dp
companion object {
val Hairline: Dp
val Infinity: Dp
val Unspecified: Dp
}
}
/**
* Create a Dp using an Int
*/
val Int.dp: Dp
/**
* Create a Dp using a Double
*/
val Double.dp: Dp
/**
* Create a Dp using a Float
*/
val Float.dp: Dp
/**
* Scalable dimension value representing scalable pixels (sp) for text.
*/
@JvmInline
value class Sp(val value: Float) : Comparable<Sp> {
override operator fun compareTo(other: Sp): Int
operator fun plus(other: Sp): Sp
operator fun minus(other: Sp): Sp
operator fun times(other: Float): Sp
operator fun times(other: Int): Sp
operator fun div(other: Float): Sp
operator fun div(other: Int): Sp
operator fun unaryMinus(): Sp
companion object {
val Unspecified: Sp
}
}
/**
* Create an Sp using an Int
*/
val Int.sp: Sp
/**
* Create an Sp using a Double
*/
val Double.sp: Sp
/**
* Create an Sp using a Float
*/
val Float.sp: Sp
/**
* Represents a unit of text measurement
*/
sealed class TextUnit {
object Unspecified : TextUnit()
companion object {
val Unspecified: TextUnit
}
}Usage Examples:
// Using dp for layout dimensions
Modifier
.width(200.dp)
.height(100.dp)
.padding(16.dp)
// Using sp for text sizes
TextStyle(fontSize = 16.sp)
// Arithmetic operations
val largeSpacing = 16.dp + 8.dp // 24.dp
val halfWidth = 100.dp / 2 // 50.dpSupport for left-to-right (LTR) and right-to-left (RTL) layout directions for internationalization.
/**
* Layout direction of a UI, either Left to Right or Right to Left.
*/
enum class LayoutDirection {
Ltr, Rtl
}
/**
* CompositionLocal providing the current layout direction
*/
val LocalLayoutDirection: ProvidableCompositionLocal<LayoutDirection>Usage Examples:
// Access current layout direction
val layoutDirection = LocalLayoutDirection.current
// Conditional behavior based on layout direction
val startPadding = if (layoutDirection == LayoutDirection.Ltr) 16.dp else 8.dp
val endPadding = if (layoutDirection == LayoutDirection.Ltr) 8.dp else 16.dpEssential geometric types for positioning and sizing UI elements.
/**
* An immutable 2D integer offset.
*/
@Immutable
data class IntOffset(val x: Int, val y: Int) {
operator fun plus(other: IntOffset): IntOffset
operator fun minus(other: IntOffset): IntOffset
operator fun unaryMinus(): IntOffset
companion object {
val Zero: IntOffset
}
}
/**
* An immutable 2D integer size.
*/
@Immutable
data class IntSize(val width: Int, val height: Int) {
operator fun times(other: Int): IntSize
companion object {
val Zero: IntSize
}
}
/**
* An immutable 2D floating-point offset.
*/
@Immutable
data class Offset(val x: Float, val y: Float) {
operator fun plus(other: Offset): Offset
operator fun minus(other: Offset): Offset
operator fun times(operand: Float): Offset
operator fun div(operand: Float): Offset
operator fun unaryMinus(): Offset
fun getDistance(): Float
fun getDistanceSquared(): Float
companion object {
val Zero: Offset
val Infinite: Offset
val Unspecified: Offset
}
}
/**
* An immutable 2D floating-point size.
*/
@Immutable
data class Size(val width: Float, val height: Float) {
operator fun times(operand: Float): Size
operator fun div(operand: Float): Size
companion object {
val Zero: Size
val Unspecified: Size
}
}
/**
* An immutable rectangle.
*/
@Immutable
data class Rect(
val left: Float,
val top: Float,
val right: Float,
val bottom: Float
) {
constructor(offset: Offset, size: Size)
constructor(topLeft: Offset, bottomRight: Offset)
val width: Float
val height: Float
val size: Size
val center: Offset
val topLeft: Offset
val topCenter: Offset
val topRight: Offset
val centerLeft: Offset
val centerRight: Offset
val bottomLeft: Offset
val bottomCenter: Offset
val bottomRight: Offset
fun isEmpty(): Boolean
fun isFinite(): Boolean
fun contains(offset: Offset): Boolean
fun overlaps(other: Rect): Boolean
fun intersect(other: Rect): Rect
companion object {
val Zero: Rect
}
}Usage Examples:
// Creating positions and sizes
val position = IntOffset(x = 100, y = 50)
val size = IntSize(width = 200, height = 100)
// Floating point geometry
val center = Offset(150.0f, 75.0f)
val bounds = Size(300.0f, 200.0f)
// Rectangle operations
val rect = Rect(
left = 0.0f,
top = 0.0f,
right = 100.0f,
bottom = 50.0f
)
val contains = rect.contains(Offset(25.0f, 25.0f)) // trueInterface for converting between different measurement units based on screen density.
/**
* A density of the screen. Used for the conversions between [Dp] and pixels.
*/
interface Density {
/**
* The logical density of the display.
*/
val density: Float
/**
* Current user preference for the scaling factor for fonts.
*/
val fontScale: Float
/**
* Convert [Dp] to pixels.
*/
fun Dp.toPx(): Float
/**
* Convert [Sp] to pixels.
*/
fun Sp.toPx(): Float
/**
* Convert pixels to [Dp].
*/
fun Float.toDp(): Dp
/**
* Convert pixels to [Sp].
*/
fun Float.toSp(): Sp
/**
* Convert [Dp] to [Int] pixels.
*/
fun Dp.roundToPx(): Int
/**
* Convert [Sp] to [Int] pixels.
*/
fun Sp.roundToPx(): Int
}
/**
* CompositionLocal providing the current density
*/
val LocalDensity: ProvidableCompositionLocal<Density>Usage Examples:
// Access current density
val density = LocalDensity.current
// Convert between units
with(density) {
val pixels = 16.dp.toPx() // Convert dp to pixels
val dp = 48.0f.toDp() // Convert pixels to dp
val textPixels = 14.sp.toPx() // Convert sp to pixels
}Install with Tessl CLI
npx tessl i tessl/maven-org-jetbrains-compose-ui--ui-uikitsimarm64