【Android】Jetpack ComposeのButtonあれこれ【Kotlin】

目次

• Button
• FilledTonalButton
• TextButton
• OutlinedButton
• ElevatedButton
• IconButton
• FloatingActionButton
• RadioButton

Button

        Button(onClick = {}) {
            Text("Button")
        }

デフォルトで背景色がついているボタン

FilledTonalButton

   FilledTonalButton(onClick = {}) {
            Text("FilledTonalButton")
        }

デフォルトの背景色がSecondaryColorによって設定されている

TextButton

        TextButton(onClick = {}) {
            Text("TextButton")
        }

特に装飾のないTextにClick処理をつけられる

OutlinedButton

        OutlinedButton(onClick = {}) {
            Text("Outlined Button")
        }

Textの周りにボーダーラインがついている
他のButtonでもborder（外枠線）をつけられるので、あんまり使わないかも

ElevatedButton

        ElevatedButton(onClick = {}) {
            Text("Elevated Button")
        }

デフォルトでelevation(高さ)が設定されてる
他のButtonでもelevationが設定できるので、あんまり使わないかも

IconButton

        IconToggleButton(
            checked = true,
            onCheckedChange = {}
        ) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "ハート",
            )
        }

画像にClick処理をつけられる

FloatingActionButton

        FloatingActionButton(onClick = {}) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "ハート",
            )
        }

よく使うアクションなどを設定して、画面上に常に出ているボタンなどに使う

RadioButton

        RadioButton(
            selected = true,
            onClick = {}
        )

選択式の入力フォームなどで使う

プレビュー

参考