หน้านี้ได้รับการแปลโดย Cloud Translation API

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

คอมโพสิเบิล 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 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 แบบคอมโพสิเบิลเดียวกัน ให้ใช้ AnnotatedString ซึ่งเป็นสตริงที่สามารถกำกับเนื้อหาด้วยรูปแบบของคำอธิบายประกอบแบบใดก็ได้

AnnotatedString คือคลาสข้อมูลที่ประกอบด้วยข้อมูลต่อไปนี้

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

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

AnnotatedString มีตัวสร้าง ที่ปลอดภัยต่อประเภทเพื่อช่วยให้คุณสร้าง 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 ตอนนี้คุณใช้ Brush ได้ในตำแหน่งที่ปกติจะใช้ TextStyle หรือ SpanStyle

ใช้แปรงสำหรับจัดรูปแบบข้อความ

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

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

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

การใช้ฟังก์ชัน `linearGradient` ของ Brush API กับรายการสีที่กําหนด — **รูปที่ 2** การใช้ฟังก์ชัน `linearGradient` ของ Brush API ที่มีรายการสีที่กําหนดไว้

คุณไม่จำเป็นต้องใช้รูปแบบสีหรือสไตล์การระบายสีนี้โดยเฉพาะ แม้ว่าเราจะแสดงตัวอย่างการไฮไลต์ง่ายๆ ไว้ให้แล้ว แต่คุณก็ใช้แปรงที่มีให้ในตัวหรือแม้แต่ 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

การใช้แปรงเริ่มต้นที่มี linearGradient เป็นรูปแบบของข้อความ — **รูปที่ 4** ใช้แปรงเริ่มต้นที่มี `linearGradient` เป็นสไตล์สำหรับ `Text`

ความทึบแสงของข้อความ

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

การใช้พารามิเตอร์ alpha ของ buildAnnotatedString และ SpanStyle พร้อมกับ linearGradient เพื่อเพิ่มความทึบของข้อความ — **รูปที่ 5** ใช้พารามิเตอร์อัลฟ่าของ `buildAnnotatedString` และ `SpanStyle` พร้อมกับ `linearGradient` เพื่อเพิ่มความทึบให้กับช่วงข้อความ

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

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

ใช้เอฟเฟกต์ข้อความไฮไลต์กับข้อความ

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

ข้อมูลโค้ดต่อไปนี้ใช้เอฟเฟกต์ข้อความไฮไลต์แบบพื้นฐานในคอมโพสิชัน 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

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

แนะนำสำหรับคุณ

หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
รูปแบบย่อหน้า
Material Design 2 ในเครื่องมือเขียน
ตัวแก้ไขกราฟิก