Teks gaya

Composable Text memiliki beberapa parameter opsional untuk mengatur gaya kontennya. Di bawah ini, kami telah mencantumkan parameter yang mencakup kasus penggunaan paling umum dengan teks. Untuk semua parameter Text, lihat dokumentasi Compose Text kode sumber Anda.

Setiap kali Anda menetapkan salah satu parameter ini, Anda menerapkan gaya ke seluruh nilai teks. Jika Anda perlu menerapkan beberapa gaya dalam baris atau paragraf yang sama, lihat bagian beberapa gaya inline.

Gaya teks umum

Bagian berikut menjelaskan cara umum untuk menata gaya teks Anda.

Mengubah warna teks

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

Mengubah ukuran teks

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

Membuat teks miring

Gunakan parameter fontStyle untuk memiringkan teks (atau menyetel FontStyle lain).

@Composable
fun ItalicText() {
    Text("Hello World", fontStyle = FontStyle.Italic)
}
TextSnippets.kt

Mencetak tebal teks

Gunakan parameter fontWeight untuk menebalkan teks (atau menyetel FontWeight lain).

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

Tambahkan bayangan

Parameter style memungkinkan Anda menetapkan objek dengan jenis TextStyle dan mengkonfigurasi beberapa parameter, misalnya bayangan. Shadow menerima warna untuk bayangan, offset, atau lokasinya dalam kaitannya dengan Text dan radius blur, yaitu seberapa blur tampilannya.

@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
            )
        )
    )
}
TextSnippets.kt

Menambahkan beberapa gaya dalam teks

Untuk menetapkan gaya yang berbeda dalam Text yang sama gunakan AnnotatedString, string yang bisa dianotasi dengan gaya anotasi arbitrer.

AnnotatedString adalah class data yang berisi:

• Nilai Text
• List dari SpanStyleRange, setara dengan gaya inline dengan rentang posisi dalam nilai teks
• List dari ParagraphStyleRange, yang menentukan perataan teks, arah teks, tinggi baris, dan gaya indentasi teks

TextStyle digunakan untuk composable Text, sedangkan SpanStyle dan ParagraphStyle digunakan untuk AnnotatedString. Untuk informasi selengkapnya tentang beberapa gaya dalam membuat paragraf, lihat Menambahkan beberapa gaya dalam paragraf.

AnnotatedString memiliki jenis aman pembuat untuk mempermudah pembuatan: buildAnnotatedString.

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("H")
            }
            append("ello ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("W")
            }
            append("orld")
        }
    )
}
TextSnippets.kt

Mengaktifkan gaya visual lanjutan dengan Brush

Untuk mengaktifkan gaya visual teks yang lebih canggih, Anda dapat menggunakan Brush API dengan TextStyle dan SpanStyle. Di tempat mana pun di mana Anda biasanya gunakan TextStyle atau SpanStyle, Anda juga sekarang dapat menggunakan Brush.

Perhatian: Penggunaan Brush API saat ini di TextStyle bersifat eksperimental. API eksperimental dapat berubah di masa mendatang.

Menggunakan kuas untuk gaya visual teks

Konfigurasikan teks menggunakan kuas bawaan dalam TextStyle. Sebagai contoh, Anda dapat mengonfigurasi kuas linearGradient ke teks Anda sebagai berikut:

val gradientColors = listOf(Cyan, LightBlue, Purple /*...*/)

Text(
    text = text,
    style = TextStyle(
        brush = Brush.linearGradient(
            colors = gradientColors
        )
    )
)
TextSnippets.kt

Gambar 2. Menggunakan fungsi linearGradient Brush API dengan daftar warna yang ditentukan.

Anda tidak terbatas pada skema warna atau gaya pewarnaan tertentu ini. Meskipun kami telah memberikan contoh sederhana untuk menyoroti, menggunakan salah satu kuas atau bahkan hanya SolidColor untuk menyempurnakan teks.

Integrasi

Karena Anda dapat menggunakan Brush bersama dengan TextStyle dan SpanStyle, integrasi dengan TextField dan buildAnnotatedString berjalan lancar.

Untuk informasi selengkapnya tentang cara menggunakan API kuas dalam TextField, lihat Input gaya dengan Brush API.

Gaya visual tambahan menggunakan SpanStyle

Menerapkan kuas ke rentang teks

Jika Anda hanya ingin mengoleskan kuas ke bagian teks, gunakan buildAnnotatedString dan SpanStyle API, beserta kuas Anda dan gradien pilihan.

Text(
    text = buildAnnotatedString {
        append("Do not allow people to dim your shine\n")
        withStyle(
            SpanStyle(
                brush = Brush.linearGradient(
                    colors = rainbowColors
                )
            )
        ) {
            append("because they are blinded.")
        }
        append("\nTell them to put some sunglasses on.")
    }
)
TextSnippets.kt

Gambar 4. Menggunakan kuas default dengan linearGradient sebagai gaya untuk Text.

Opasitas dalam rentang teks

Untuk menyesuaikan opasitas rentang teks tertentu, gunakan fungsi SpanStyle parameter alpha opsional. Gunakan kuas yang sama untuk kedua bagian teks, dan ubah parameter alfa di span yang sesuai. Dalam contoh kode, rentang teks pertama ditampilkan dengan opasitas setengah (alpha =.5f) sedangkan yang kedua ditampilkan dengan opasitas penuh (alpha = 1f).

val brush = Brush.linearGradient(colors = rainbowColors)

buildAnnotatedString {
    withStyle(
        SpanStyle(
            brush = brush, alpha = .5f
        )
    ) {
        append("Text in ")
    }
    withStyle(
        SpanStyle(
            brush = brush, alpha = 1f
        )
    ) {
        append("Compose ❤️")
    }
}
TextSnippets.kt

Gambar 5. Menggunakan parameter alfa buildAnnotatedString dan SpanStyle, beserta linearGradient untuk menambahkan opasitas ke rentang teks.

Referensi lainnya

Untuk contoh penyesuaian tambahan, lihat postingan blog Mempertajam Pewarnaan Teks Compose. Jika Anda tertarik untuk mempelajari lebih lanjut cara Brush berintegrasi dengan Animations API kami, lihat Menganimasikan warna Teks kuas di Compose.

Menerapkan efek marquee ke teks

Anda dapat menerapkan pengubah basicMarquee ke composable apa pun untuk menghasilkan efek scroll animasi. Efek marquee terjadi jika konten terlalu lebar untuk menampung batasan yang tersedia. Secara default, basicMarquee telah menetapkan konfigurasi tertentu (seperti kecepatan dan penundaan awal), tetapi Anda dapat mengubah parameter ini untuk menyesuaikan efek.

Cuplikan berikut menerapkan efek marquee dasar pada composable Text:

@Composable
fun BasicMarqueeSample() {
    // Marquee only animates when the content doesn't fit in the max width.
    Column(Modifier.width(400.dp)) {
        Text(
            "Learn about why it's great to use Jetpack Compose",
            modifier = Modifier.basicMarquee(),
            fontSize = 50.sp
        )
    }
}
TextSnippets.kt

Gambar 6. Pengubah basicMarquee yang diterapkan ke teks.