TextButton コンポーザブルは、テキストを含むボタンを生成するためのUI部品です。
目次
TextButtonの使い方
TextButton コンポーザブルを使ってボタンを表示するには、次のように書きます。
TextButton(onClick = { /* ボタンがクリックされたときの処理 */ }) {
Text(text = "ボタンに表示したいテキスト")
}onClick パラメータには、ボタンがクリックされたときに実行される処理を渡します。
Text にはボタンに表示されるテキストを記入します。
以下、ボタンを使った簡単な例です。
@Composable
fun TextButtonComposable() {
TextButton(
onClick = {
Log.d("ButtonClicked", "ボタンが押されました")
},
) {
Text(
text = "詳細を表示",
color = Color.Gray,
)
}
}
この例では、ボタンを押すとログとして「ボタンが押されました」と表示されます。
ボタンの装飾方法
ボタンの背景色やテキストカラーを設定する
TextButton の外観をカスタマイズするには、 ButtonDefaults.textButtonStyle を使用して既定のスタイルを変更することができます。
@Composable
fun TextButtonComposable() {
TextButton(
onClick = {
Log.d("ButtonClicked", "ボタンが押されました")
},
colors = ButtonDefaults.textButtonColors(
backgroundColor = Color.DarkGray, // ボタンの色
contentColor = Color.Yellow // テキストカラー
)
) {
Text(
text = "詳細を表示",
// color = Color.White, // 色を設定している場合はこちらの色が優先される
)
}
}
ボタンのサイズを変更する
ボタンのサイズはmodifierを使うと変更できます。
@Composable
fun TextButtonComposable() {
TextButton(
modifier = Modifier.fillMaxWidth(),
onClick = {
Log.d("ButtonClicked", "ボタンが押されました")
},
colors = ButtonDefaults.textButtonColors(
backgroundColor = Color.DarkGray,
contentColor = Color.Yellow
)
) {
Text(
text = "詳細を表示",
)
}
}
ボタンの角を丸める
ボタンの角を丸めるには、shape プロパティを使用して、角丸の形状を指定します。
具体的にはRoundedCornerShape を使用して、ボタンの角を丸めるます。
@Composable
fun TextButtonComposable() {
TextButton(
onClick = {
Log.d("ButtonClicked", "ボタンが押されました")
},
colors = ButtonDefaults.textButtonColors(
backgroundColor = Color.DarkGray,
contentColor = Color.Yellow
),
shape = RoundedCornerShape(20.dp), // 角を丸める半径を指定
) {
Text(
text = "詳細を表示",
modifier = Modifier.padding(start = 16.dp, end = 16.dp) // ボタンの周囲にパディングを追加
)
}
}
Comment