จัดรูปแบบข้อความ

Composable Text มีพารามิเตอร์ที่ไม่บังคับหลายรายการเพื่อจัดรูปแบบเนื้อหา ด้านล่างนี้เราได้แสดงรายการพารามิเตอร์ที่ครอบคลุมกรณีการใช้งานที่พบบ่อยที่สุดที่มีข้อความ สำหรับพารามิเตอร์ทั้งหมดของ Text โปรดดูเขียนข้อความ ซอร์สโค้ด

เมื่อใดก็ตามที่คุณตั้งค่าพารามิเตอร์ตัวใดตัวหนึ่งเหล่านี้ คุณกำลังนำสไตล์ไปใช้กับทั้งพารามิเตอร์ ข้อความ ถ้าคุณจำเป็นต้องใช้รูปแบบหลายแบบภายในบรรทัดเดียวกัน หรือ ย่อหน้า โปรดดูส่วนของ ในบรรทัดหลายบรรทัด รูปแบบ

การจัดรูปแบบข้อความทั่วไป

ส่วนต่อไปนี้อธิบายวิธีทั่วไปในการจัดรูปแบบข้อความ

เปลี่ยนสีข้อความ

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

เปลี่ยนขนาดข้อความ

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

ทำให้ข้อความเป็นตัวเอียง

ใช้พารามิเตอร์ fontStyle เพื่อทำให้ข้อความเป็นตัวเอียง (หรือตั้งค่าข้อความอื่น FontStyle)

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

ทำให้ข้อความเป็นตัวหนา

ใช้พารามิเตอร์ fontWeight เพื่อทำให้ข้อความเป็นตัวหนา (หรือตั้งค่า FontWeight อื่น)

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

เพิ่มเงา

พารามิเตอร์ style ให้คุณตั้งค่าออบเจ็กต์ประเภท TextStyle และกำหนดค่าพารามิเตอร์หลายรายการ เช่น "เงา" Shadow ได้รับสี สำหรับเงา ออฟเซ็ต หรือตำแหน่งที่เกี่ยวข้องกับ Text และ รัศมีการเบลอ หมายถึงระดับความเบลอ

@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

เพิ่มรูปแบบหลายอย่างในข้อความ

วิธีตั้งค่าสไตล์ต่างๆ ภายใน Text เดียวกัน Composable ให้ใช้ AnnotatedString สตริงที่สามารถใส่คำอธิบายประกอบด้วยสไตล์ของคำอธิบายประกอบที่กำหนดเอง

AnnotatedString เป็นคลาสข้อมูลที่มีสิ่งต่อไปนี้

• ค่า Text
• List เท่ากับ SpanStyleRange เทียบเท่ากับการจัดรูปแบบอินไลน์ที่มีตำแหน่ง ภายในช่วงในค่าข้อความ
• List จาก ParagraphStyleRange ระบุการจัดข้อความ ข้อความ ทิศทาง ความสูงของบรรทัด และการจัดรูปแบบการเยื้องข้อความ

TextStyle มีไว้เพื่อการใช้งาน ใน Text Composable ในขณะที่ SpanStyle และ ParagraphStyle สำหรับใช้ใน AnnotatedString สำหรับข้อมูลเพิ่มเติมเกี่ยวกับรูปแบบต่างๆ ใน ย่อหน้า โปรดดูหัวข้อเพิ่มสไตล์หลายรูปแบบในย่อหน้า

AnnotatedString มีประเภท type-safe เครื่องมือสร้าง เพื่อให้สร้างได้ง่ายขึ้น: 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

เปิดใช้การจัดรูปแบบขั้นสูงด้วย Brush

หากต้องการเปิดใช้การจัดรูปแบบข้อความขั้นสูงขึ้น คุณสามารถใช้ Brush API กับ TextStyle และ SpanStyle ในที่ที่คุณมักจะ ใช้ TextStyle หรือ SpanStyle ตอนนี้คุณสามารถใช้ Brush ได้ด้วย

ใช้แปรงเพื่อจัดรูปแบบข้อความ

กำหนดค่าข้อความโดยใช้แปรงในตัวภายใน TextStyle ตัวอย่างเช่น คุณสามารถ สามารถกำหนดค่าแปรง linearGradient ให้กับข้อความได้ดังนี้

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

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

วันที่

คุณไม่ได้จำกัดเฉพาะรูปแบบสีหรือรูปแบบของสีนี้เท่านั้น ขณะที่ เราได้ยกตัวอย่างง่ายๆ ที่จะไฮไลต์ไว้ ให้ใช้แท็ก แปรงหรือแค่ SolidColor เพื่อปรับแต่งข้อความ

การผสานรวม

เนื่องจากคุณใช้ Brush ร่วมกับทั้ง TextStyle และ SpanStyle ได้ การผสานรวมกับ TextField และ buildAnnotatedString ได้อย่างราบรื่น

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ Brush API ใน TextField ได้ที่ ป้อนข้อมูลรูปแบบด้วย Brush API

การจัดรูปแบบเพิ่มเติมโดยใช้ SpanStyle

ใช้แปรงกับช่วงข้อความ

หากต้องการใช้แปรงกับข้อความบางส่วนเท่านั้น ให้ใช้ buildAnnotatedString และ SpanStyle API รวมถึงแปรง และการไล่ระดับสี ที่ต้องการ

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

วันที่

ความทึบแสงในช่วงของข้อความ

หากต้องการปรับความทึบแสงของข้อความช่วงใดช่วงหนึ่ง ให้ใช้พารามิเตอร์ SpanStyle พารามิเตอร์ alpha ที่ไม่บังคับ ใช้แปรงเดียวกันสำหรับ ข้อความทั้ง 2 ส่วน แล้วเปลี่ยนพารามิเตอร์อัลฟ่าในช่วงที่เกี่ยวข้อง ในตัวอย่างโค้ด ข้อความช่วงแรกจะแสดงแบบความทึบแสงครึ่งหนึ่ง (alpha =.5f) ในขณะที่รายการที่ 2 แสดงแบบความทึบแสงสูงสุด (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

วันที่

แหล่งข้อมูลเพิ่มเติม

สำหรับตัวอย่างการปรับแต่งเพิ่มเติม โปรดดูที่การแปรงข้อความขึ้นเขียน การใส่สีบล็อกโพสต์ หากคุณสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับ วิธีที่ Brush ผสานรวมกับ Animations API ของเรา โปรดดูการทำให้สีข้อความของแปรงเคลื่อนไหว ในการเขียน

ใช้เอฟเฟกต์เส้นมาร์คีกับข้อความ

คุณสามารถใช้ตัวแก้ไข basicMarquee กับ Composable ใดก็ได้กับ จะทำให้เกิดเอฟเฟกต์การเลื่อนแบบเคลื่อนไหว เอฟเฟกต์เส้นมาร์คีจะเกิดขึ้นหากเนื้อหา กว้างเกินกว่าที่จะใช้กับข้อจำกัดที่มีอยู่ โดยค่าเริ่มต้น basicMarquee มี มีการกำหนดค่าบางอย่าง (เช่น อัตราความเร็วและการหน่วงเวลาแรก) ไว้ แต่คุณสามารถ แก้ไขพารามิเตอร์เหล่านี้เพื่อปรับแต่งเอฟเฟกต์

ข้อมูลโค้ดต่อไปนี้ใช้เอฟเฟกต์เส้นมาร์คีพื้นฐานใน Composable Text

@OptIn(ExperimentalFoundationApi::class)
@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

รูปที่ 6 ใช้ตัวแก้ไข basicMarquee กับข้อความแล้ว