👏

【超初心者向け】Modifierとは！？

2025/04/09に公開

結論

Modifierとは部品にスタイルやレイアウトを設定するためのもの。
主に以下のような設定ができます。

幅・高さ(widht,height)
余白（padding）
背景色(background)
クリックイベントの追加(clicable)
配置(align)

使い方

まずは、Modiferを設定しないパターンを見てみましょう！
以下は、縦にテキストを3つ並べるだけのコードです。

@Composable    
fun TestApp() {
    Column {
        Text("box1")
        Text("box2")
        Text("box3")
    }
}
@Preview(showBackground = true) //プレビュー画面に表示
@Composable
fun TestAppPreview() {
    TestApp()
}

プレビューすると普通にbox1～3までが縦に3つ並んでます。

では、box1にだけModifier設定します。
背景色を赤色にしてから16の余白を設定を設定するものです。

@Composable     
fun TestApp() {
    Column{
        Text(text="box1",
+            modifier = Modifier.background(Color.Red).padding(16.dp)
        )
        Text(text="box2")
        Text(text="box3")
    }
}

box1の見た目が変わりました！
このような感じで、部品の見た目を変えたい！ようなときにModifierを使います。

関数の引数にModifierを設定する

引数とは？

引数とは関数のかっこの中身のことで、変数の仲間です。
変数がよくわからないなという方は、こちらの記事を見てね！

コンポーザブル関数を作ったら、おまじないのように引数にModifierを設定しましょう。
fun TestApp(modifier:Modifier=Modifier){}
という感じです。
わかりやすくするため、TestAppのかっこの中の引数はmodにしています。
（modにするとワーニングが出ます。後でmodifierにしておきましょう。）
そして、box2とbox3のModifierにmodを渡します。
コードは緑の部分が変更になってます。

@Composable     //以下の関数はコンポーザブル関数（画面表示用の部品）です、という意味
+fun TestApp(mod: Modifier = Modifier) {
    Column{
        Text(text="box1",
            modifier = Modifier.background(Color.Red).padding(16.dp)
        )
        Text(
            text = "box2",
+            modifier = mod
        )
        Text(
            text = "box3",
+            modifier = mod
        )
    }
}

まだ何も変化はないです。
プレビュー用のTestAppPreview関数からTestAppを呼び出していますが、引数に何も入れていないからです。

では、プレビューからTestApp関数の呼び出し時に、引数modに設定値を入れてみましょう。
背景色＝緑、横幅＝画面いっぱい
という設定にしています。

@Preview(showBackground = true) //プレビュー画面に表示
@Composable
fun TestAppPreview() {
+    TestApp(mod = Modifier.background(Color.Green).fillMaxWidth())
}

box2とbox3の見た目が変わりました！

modという変数の動きは以下のようになっています。
プレビューの呼び出しに設定したものが、box2とbox3の両方に適用されました。
box1もmodifier=modとすると変化します。

次の実験に移ります。
box3をさらに変化させます。
余白を32にして、背景色を黄色という設定を追加します。
コードは以下の通りです。

@Composable     //以下の関数はコンポーザブル関数（画面表示用の部品）です、という意味
fun TestApp(mod: Modifier = Modifier) {
    Column{
        //省略
        Text(
            text = "box3",
+            modifier = mod.padding(32.dp).background(Color.Yellow)
        )
    }
}

見た目こうなりました。

box3に適用されているModifierは、以下４つあり、先に設定したものから順番に適用されていくのです。

TestAppPreview関数の中で設定したもの
1. 背景色＝緑
2. 横幅いっぱいに広げる
Text(box3自身）で設定したもの
3. 余白＝32
4. 背景色＝黄色

まとめ

Modifierは部品（TextとかColumnのこと）の見た目を、かっこよくするもの
Modifierには適用の順番があり、先に設定されたものから適用されていく
関数の引数にmodifier変数を設定すると、元の設定値が引き継がれて便利

Modifierを使いこなすと、めっちゃCOOLな画面とか作れます。
おしゃれ画面作ってみたーい＞＜

結論

使い方

関数の引数にModifierを設定する

まとめ

Discussion