【Jetpack Compose】Modifierの種類と使い方！カスタムで作成する方法

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    // 〜〜〜〜〜省略
)

Text(
    "Hello World！！",
    // 横幅と高さを200dpにする
    Modifier.width(200.dp).height(200.dp)
)

@Stable
fun Modifier.width(width: Dp) = this.then(
    SizeElement(
        minWidth = width,
        maxWidth = width,
        enforceIncoming = true,
        inspectorInfo = debugInspectorInfo {
            name = "width"
            value = width
        }
    )
)

infix fun then(other: Modifier): Modifier =
    if (other === Modifier) this else CombinedModifier(this, other)

Modifier.size(100.dp)               // 幅と高さを100dpに設定
Modifier.width(200.dp)              // 横幅を200dpに設定
Modifier.height(50.dp)              // 高さを50dpに設定
Modifier.fillMaxSize()              // 親要素のサイズまで広がる
Modifier.wrapContentSize()          // 要素の内容に応じたサイズに調整

Modifier.padding(16.dp)               // 内側の余白を設定
Modifier.offset(x = 10.dp, y = 20.dp) // 任意の位置にオフセット
Modifier.align(Alignment.Center)      // 親の中央に配置（Box内など）

Modifier.background(Color.Blue)     // 背景色を設定

Modifier. graphicsLayer(alpha = 0.5f)     //  透明度を設定

Modifier.border(2.dp, Color.Red)    // 赤い枠線を追加

Modifier.border(2.dp, Color.Red, shape = RoundedCornerShape(16.dp))

Modifier.clip(CircleShape)          // 円形に切り抜き
Modifier.clip(RoundedCornerShape(8.dp)) // 角丸四角形に切り抜き

Modifier.shadow(8.dp)               // ドロップシャドウを追加

// クリックイベントを追加
Modifier.clickable { 
    println("Clicked!") 
}

@Preview(showBackground = true)
@Composable
fun DraggableExample() {
    var offsetX = remember { mutableStateOf(0f) } // X座標だけを管理

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Red)
            .offset { IntOffset(offsetX.value.toInt(), 0) } // ドラッグした位置にビューを移動
            .draggable(
                state = rememberDraggableState { delta ->
                    // deltaはドラッグの移動量
                    offsetX.value += delta // 水平方向のみ更新
                },
                orientation = Orientation.Horizontal // 水平方向にのみドラッグ
            )
    ) {
        Text(text = "HELLO", color = Color.White, modifier = Modifier.align(Alignment.Center))
    }
}

fun Modifier.customPadding(value: Dp): Modifier = this.then(
    Modifier.padding(value * 2)
)