Jetpack CoposeでTextのStyleを変更する

Overview

https://developer.android.com/jetpack/compose/text?hl=ja

Jetpack Coposeでテキストの表示は、Textを使うことでできます。
このようにやります。

@Composable
fun SimpleText() {
    Text("Hello World")
}

今回は、テキストのスタイルを変更して見た目を変更するのをやっていきましょう!

summary

色を変更する
公式のリファレンスを参考にテキストのカラーを変更するには、colorというパラメーターを使用します。

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}

文字サイズを変更する
文字のサイズを変更するには、fontSizeというパラメーターを使用します。

@Composable
fun BigText() {
  Text("Hello World", fontSize = 30.sp)
}

テキストを太字にする
テキストを太字にするには、fontWeight パラメータを使用します（または別の FontWeight を設定します）。

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}

シャドウをつける
テキストに影をつけることもできます。公式によると...

style パラメータを使用すると、TextStyle 型のオブジェクトを設定し、複数のパラメータ（シャドウなど）を構成できます。Shadow は、シャドウの色、オフセット、Text に対するシャドウの相対位置、ぼかしの程度を表すぼかし半径を受け取ります。

@Preview(showBackground = true)
@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue,
                offset = offset,
                blurRadius = 3f
            )
        )
    )
}

全体のコード
解説したテキストを画面に表示するとこんなコードになります。スクリーショットも貼っておきますので、みんなも試してみてね!

package com.example.basicbodelab

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.basicbodelab.ui.theme.BasicBodelabTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicBodelabTheme {
                // A surface container using the 'background' color from the theme
                Surface(
//                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting()
                }
            }
        }
    }
}

@Composable
fun Greeting() {
    Column {
        BlueText()
        Spacer(modifier = androidx.compose.ui.Modifier.height(16.dp))
        BigText()
        Spacer(modifier = androidx.compose.ui.Modifier.height(16.dp))
        BoldText()
        Spacer(modifier = androidx.compose.ui.Modifier.height(16.dp))
        TextShadow()
    }
}

@Composable
fun BlueText() {
    Text("Hello World", color = Color.Blue)
}

@Composable
fun BigText() {
    Text("Hello World", fontSize = 30.sp)
}

@Composable
fun BoldText() {
    Text("Hello World", fontWeight = FontWeight.Bold)
}

@Composable
fun TextShadow() {
    val offset = Offset(5.0f, 10.0f)
    Text(
        text = "Hello world!",
        style = TextStyle(
            fontSize = 24.sp,
            shadow = Shadow(
                color = Color.Blue,
                offset = offset,
                blurRadius = 3f
            )
        )
    )
}

@Preview(showBackground = true, name = "Text preview")
@Composable
fun GreetingPreview() {
    BasicBodelabTheme {
        Greeting()
    }
}

thoughts

お疲れ様でした!
今回は、Jetpack Coposeのテキストの設定を変えてみるのをやってみました。イタリックだけ使えないのが気になった？？？
多分古いのかな？