Composable Text
มีพารามิเตอร์ที่ไม่บังคับหลายรายการเพื่อจัดรูปแบบเนื้อหา
ด้านล่างนี้เราได้แสดงรายการพารามิเตอร์ที่ครอบคลุมกรณีการใช้งานที่พบบ่อยที่สุดที่มีข้อความ
สำหรับพารามิเตอร์ทั้งหมดของ Text
โปรดดูเขียนข้อความ
ซอร์สโค้ด
เมื่อใดก็ตามที่คุณตั้งค่าพารามิเตอร์ตัวใดตัวหนึ่งเหล่านี้ คุณกำลังนำสไตล์ไปใช้กับทั้งพารามิเตอร์ ข้อความ ถ้าคุณจำเป็นต้องใช้รูปแบบหลายแบบภายในบรรทัดเดียวกัน หรือ ย่อหน้า โปรดดูส่วนของ ในบรรทัดหลายบรรทัด รูปแบบ
การจัดรูปแบบข้อความทั่วไป
ส่วนต่อไปนี้อธิบายวิธีทั่วไปในการจัดรูปแบบข้อความ
เปลี่ยนสีข้อความ
@Composable fun BlueText() { Text("Hello World", color = Color.Blue) }
เปลี่ยนขนาดข้อความ
@Composable fun BigText() { Text("Hello World", fontSize = 30.sp) }
ทำให้ข้อความเป็นตัวเอียง
ใช้พารามิเตอร์ fontStyle
เพื่อทำให้ข้อความเป็นตัวเอียง (หรือตั้งค่าข้อความอื่น
FontStyle
)
@Composable fun ItalicText() { Text("Hello World", fontStyle = FontStyle.Italic) }
ทำให้ข้อความเป็นตัวหนา
ใช้พารามิเตอร์ fontWeight
เพื่อทำให้ข้อความเป็นตัวหนา (หรือตั้งค่า FontWeight
อื่น)
@Composable fun BoldText() { Text("Hello World", fontWeight = FontWeight.Bold) }
เพิ่มเงา
พารามิเตอร์ 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 ) ) ) }
เพิ่มรูปแบบหลายอย่างในข้อความ
วิธีตั้งค่าสไตล์ต่างๆ ภายใน 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") } ) }
เปิดใช้การจัดรูปแบบขั้นสูงด้วย 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 ) ) )
![ใช้ฟังก์ชัน "LinearGradient" ของ Brush API กับรายการสีที่กำหนด](https://developer.android.com/static/develop/ui/compose/images/text-designmain.png?authuser=5&hl=th)
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.") } )
![ใช้แปรงเริ่มต้นที่มีการไล่ระดับสีแบบเส้นตรงเป็นรูปแบบสำหรับข้อความ](https://developer.android.com/static/develop/ui/compose/images/text-style.png?authuser=5&hl=th)
linearGradient
เป็นรูปแบบสำหรับ Text
ความทึบแสงในช่วงของข้อความ
หากต้องการปรับความทึบแสงของข้อความช่วงใดช่วงหนึ่ง ให้ใช้พารามิเตอร์ 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 ❤️") } }
![ใช้พารามิเตอร์อัลฟ่าของ createAnnotatedString และ SpanStyle ร่วมกับ LinearGradient เพื่อเพิ่มความทึบแสงให้กับช่วงข้อความ](https://developer.android.com/static/develop/ui/compose/images/text-opacity.png?authuser=5&hl=th)
buildAnnotatedString
และ SpanStyle
ร่วมกับ linearGradient
เพื่อเพิ่มความทึบแสงให้กับข้อความแหล่งข้อมูลเพิ่มเติม
สำหรับตัวอย่างการปรับแต่งเพิ่มเติม โปรดดูที่การแปรงข้อความขึ้นเขียน
การใส่สีบล็อกโพสต์ หากคุณสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับ
วิธีที่ 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 ) } }
รูปที่ 6 ใช้ตัวแก้ไข basicMarquee
กับข้อความแล้ว
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- จัดรูปแบบย่อหน้า
- ดีไซน์ Material 2 ใน Compose
- ตัวปรับแต่งกราฟิก