MENU

【Jetpack Compose】TextButton Composableの使い方 | テキストを含むボタンを作成する

記事内に商品プロモーションが含まれる場合があります

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, // 色を設定している場合はこちらの色が優先される
        )
    }
}

Text コンポーザブルにカラーを指定している場合は、そちらの色が優先されます。

ボタンのサイズを変更する

ボタンのサイズは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) // ボタンの周囲にパディングを追加
        )
    }
}
Share
  • URLをコピーしました!

Comment

コメントする

目次