Skip to main content

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

SpField​

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

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

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

ColorField​

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

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

PreviewLab {
    Box(
        modifier = Modifier
            .size(100.dp)
            .background(fieldValue { ColorField("background", Color.Blue) })
    )
}
.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")
        }
    }
}

ModifierField​

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

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

PreviewLab {
    Button(
        onClick = { },
        modifier = fieldValue { ModifierField("buttonModifier") },
    ) {
        Text("Styled Button")
    }
}
ModifierFieldValue.mark() で視覚的なマーキングを追加する

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

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

ComposableField​

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

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

PreviewLab {
    MyContainer(
        content = fieldValue {
            ComposableField(
                label = "content",
                initialValue = ComposableFieldValue.Red32X32
            )
        },
    )
}
ComposableFieldValue の定義済み値を使用する

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

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