Compose Value Fields

Compose 固有の値型（Dp、Sp、Color、Offset、Size、Modifier、Composable など）に対応するフィールドです。Compose UI の構築に特化した型を扱います。

DpField

対応する型	`androidx.compose.ui.unit.Dp`
利用頻度	⭐⭐⭐
KDoc	DpField

Compose の Dp（密度非依存ピクセル）値を編集するためのフィールドです。自動的に "dp" サフィックスが付きます。

PreviewLab {
    Box(
        modifier = Modifier
            .padding(fieldValue { DpField("padding", 16.dp) })
    ) {
        Text("Padded Content")
    }
}

DpField Example

SpField

対応する型	`androidx.compose.ui.unit.TextUnit`
利用頻度	⭐⭐⭐
KDoc	SpField

Compose の Sp（スケーラブルピクセル）値を編集するためのフィールドです。フォントサイズなどのテキスト関連の寸法に使用します。自動的に "sp" サフィックスが付きます。

PreviewLab {
    Text(
        text = "Sample Text",
        fontSize = fieldValue { SpField("fontSize", 16.sp) },
    )
}

SpField Example

ColorField

対応する型	`androidx.compose.ui.graphics.Color`
利用頻度	⭐⭐⭐
KDoc	ColorField

Compose の Color を選択するためのフィールドです。インタラクティブなカラーピッカーで HSV スライダーとアルファチャンネルコントロールを使用して色を選択できます。

PreviewLab {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(fieldValue { ColorField("background", Color.Blue) })
    )
}

ColorField Example

.withPredefinedColorHint() でよく使う色をワンタップで選べるようにする

ColorField はカラーピッカーで自由に色を選べますが、Color.Red など Compose が定義している定番色を素早く選びたい場合があります。

その場合は ColorField(...).withPredefinedColorHint() を付けることで、ColorField.predefinedColorNames に定義されている色（例：Color.Red, Color.Blue など）がヒントとして追加され、ワンタップで切り替えできるようになります（内部的には withHint() を使っています）。

含まれる色の例：

Primary: Color.Red, Color.Green, Color.Blue, Color.Black, Color.White
Secondary: Color.Cyan, Color.Magenta, Color.Yellow
Grays: Color.Gray, Color.DarkGray, Color.LightGray
Special: Color.Transparent, Color.Unspecified

PreviewLab {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(
                fieldValue {
                    ColorField("background", Color.Blue)
                        .withPredefinedColorHint()
                }
            )
    )
}

Offset / Size フィールド

座標やサイズを編集するためのフィールドです。各座標や寸法を独立して編集できます。

フィールド	対応する型	利用頻度	KDoc
OffsetField	`androidx.compose.ui.geometry.Offset`	⭐⭐	OffsetField
DpOffsetField	`androidx.compose.ui.unit.DpOffset`	⭐⭐	DpOffsetField
SizeField	`androidx.compose.ui.geometry.Size`	⭐⭐	SizeField
DpSizeField	`androidx.compose.ui.unit.DpSize`	⭐⭐	DpSizeField

PreviewLab {
    Column {
        // OffsetField: Float 単位の座標
        Box(
            modifier = Modifier
                .size(100.dp)
                .graphicsLayer {
                    val offset = fieldValue { OffsetField("position", Offset(50f, 100f)) }
                    translationX = offset.x
                    translationY = offset.y
                }
        )

        // DpOffsetField: Dp 単位の座標
        Text(
            text = "Positioned Text",
            modifier = Modifier
                .offset(fieldValue { DpOffsetField("textOffset", DpOffset(16.dp, 8.dp)) })
        )

        // SizeField: Float 単位のサイズ
        Canvas(
            modifier = Modifier.size(200.dp)
        ) {
            val canvasSize = fieldValue { SizeField("canvasSize", Size(200f, 150f)) }
            drawRect(Color.Blue, size = canvasSize)
        }

        // DpSizeField: Dp 単位のサイズ
        Button(
            onClick = { },
            modifier = Modifier
                .size(fieldValue { DpSizeField("buttonSize", DpSize(120.dp, 48.dp)) })
        ) {
            Text("Sized Button")
        }
    }
}

Offset and Size Field Example

ModifierField

対応する型	`androidx.compose.ui.Modifier`
利用頻度	⭐⭐⭐
KDoc	ModifierField

Compose の Modifier チェーンを構築・編集するためのインタラクティブなフィールドです。ビルダーパターンで複雑な Modifier チェーンを視覚的に構築できます。

PreviewLab {
    Button(
        onClick = { },
        modifier = fieldValue { ModifierField("buttonModifier") },
    ) {
        Text("Styled Button")
    }
}

ModifierField Example

ModifierFieldValue.mark() で視覚的なマーキングを追加する

ModifierFieldValue.mark() を使用すると、視覚的なマーキング（ボーダーと背景）を追加できます。

PreviewLab {
    Button(
        onClick = { },
        modifier = fieldValue {
            ModifierField(
                label = "buttonModifier",
                initialValue = ModifierFieldValue.mark()
            )
        },
    ) {
        Text("Styled Button")
    }
}

ModifierField with Mark Example

ComposableField

対応する型	`@Composable () -> Unit`
利用頻度	⭐⭐
KDoc	ComposableField

定義済みの Composable コンテンツオプションから選択するためのフィールドです。

PreviewLab {
    MyContainer(
        content = fieldValue {
            ComposableField(
                label = "content",
                initialValue = ComposableFieldValue.Red32X32
            )
        },
    )
}

ComposableField Example

ComposableFieldValue の定義済み値を使用する

ComposableFieldValue には、ColorBox、Text、Empty などの定義済み値が用意されています。

PreviewLab {
    MyContainer(
        content = fieldValue {
            ComposableField(
                label = "content",
                initialValue = ComposableFieldValue.Red32X32,
                choices = listOf(
                    ComposableFieldValue.Red32X32,
                    ComposableFieldValue.SimpleText,
                    ComposableFieldValue.Empty
                )
            )
        },
    )
}

ComposableField with Predefined Values Example

DpField​

SpField​

ColorField​

Offset / Size フィールド​

ModifierField​

ComposableField​