IconButton コンポーザブルは、アイコンにボタン機能が付いたUI部品です。
目次
IconButtonの基本的な使い方
IconButtonコンポーザブルを使ってアイコンボタンを表示するには次のように書きます。
IconButton(
onClick = { /* アイコンをタップした時の処理 */ }
) {
// 表示するアイコン
Icon(
Icons.Filled.Favorite,
contentDescription = "Favorite"
)
}表示するアイコンの箇所にはIconコンポーザブルを定義します。
Iconコンポーザブルの使い方は以下の記事で解説しているので、こちらを参照ください。
Seeds
【Jetpack Compose】Icon Composableの使い方 | アイコンを表示する | Seeds
Icon コンポーザブルは、アプリ内でアイコンを表示するためのUI部品です。 Iconの基本的な使い方 Icon コンポーザブルを使ってアイコンを表示するには、Icon コンポーザブ…
IconButtonを使ったサンプル
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
@Composable
fun IconButtonExample() {
// ボタンの状態を保持するためのState
var isFavorite by remember { mutableStateOf(false) }
Column(
modifier = Modifier.padding(16.dp)
) {
Text(
text = if (isFavorite) "お気に入りです" else "お気に入りではありません",
color = if (isFavorite) Color.Red else Color.Black,
style = MaterialTheme.typography.h5
)
IconButton(
onClick = { isFavorite = !isFavorite },
modifier = Modifier.padding(8.dp)
) {
Icon(
// お気に入りの状態によってアイコンを切り替える
if (isFavorite) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder,
contentDescription = "お気に入り"
)
}
}
}この例では、ハートのアイコンを使ってお気に入りの状態を切り替えます。IconButton をクリックすると、isFavorite の状態が切り替わり、それに応じてアイコンが変化します。
Comment