0Pricing
Jetpack Compose Academy · บทเรียน

AnnotatedString: ข้อความผสมแบบมีรูปแบบ

กำหนดรูปแบบช่วงข้อความภายในบล็อก Text เดียว

AnnotatedString: ข้อความผสมแบบมีรูปแบบ เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

ข้อความเดียว หลายรูปแบบ

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

ทำไมไม่ใช้ Text สองรายการ

คุณอาจแยกคำออกเป็น Text หลายรายการได้ แต่การตัดบรรทัดอาจดูไม่เป็นธรรมชาติ AnnotatedString ช่วยให้ทุกอย่างอยู่ในบรรทัดข้อความเดียวที่ไหลต่อเนื่องและตัดบรรทัดได้อย่างเป็นธรรมชาติ

สร้างด้วย buildAnnotatedString

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

val s = buildAnnotatedString {
    append("Hello ")
}

เพิ่มข้อความปกติ

ใช้ append เพื่อเพิ่มอักขระปกติ การเรียกใช้แต่ละครั้งจะต่อกันตามลำดับ ดังนั้นข้อความสุดท้ายจึงอ่านตามลำดับที่คุณเพิ่มไว้อย่างแม่นยำ

append("Welcome, ")
append("friend")

กำหนดรูปแบบให้ช่วงข้อความ

ครอบส่วนหนึ่งของข้อความด้วย withStyle และกำหนด SpanStyle ให้กับส่วนนั้น ทุกสิ่งที่เพิ่มภายในบล็อกดังกล่าวจะใช้รูปแบบนั้น

withStyle(SpanStyle(fontWeight = FontWeight.Bold)) {
    append("important")
}

ตัวเลือกของ SpanStyle

SpanStyle สามารถกำหนด color, fontWeight, fontStyle, fontSize และค่าอื่น ๆ ได้ ทำให้แต่ละช่วงข้อความมีรูปลักษณ์แตกต่างจากข้อความข้างเคียงได้อย่างชัดเจน

SpanStyle(color = Color.Blue,
          fontWeight = FontWeight.Bold)

แสดงผลใน Text

ส่ง AnnotatedString ที่สร้างเสร็จแล้วให้กับ Text ได้โดยตรง เช่นเดียวกับสตริงปกติ Compose จะแสดงผลแต่ละช่วงข้อความตามรูปแบบในตำแหน่งนั้น

Text(text = annotatedGreeting)

ผสมตัวหนาและสี

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

ParagraphStyle สำหรับบล็อกข้อความ

สำหรับการเปลี่ยนแปลงระดับบรรทัด เช่น การจัดตำแหน่งหรือระยะห่าง ให้ใช้ ParagraphStyle แทน SpanStyle เพราะจะกำหนดรูปแบบให้ทั้งย่อหน้า ไม่ใช่แค่คำเดียว

ทำให้คำกดได้

คุณสามารถแนบ LinkAnnotation เพื่อทำให้ข้อความบางส่วนแตะได้ เหมาะอย่างยิ่งสำหรับลิงก์ในบรรทัดเดียวหรือบรรทัดข้อกำหนดการให้บริการ

ข้อความรูปแบบหลากหลาย ในองค์ประกอบเดียว

AnnotatedString ช่วยให้คุณใช้รูปแบบ ลิงก์ และการเน้นหลายแบบภายใน Text เดียว นี่คือวิธีสร้างข้อความที่เป็นธรรมชาติและสื่ออารมณ์ได้ดี

ตรวจสอบความเข้าใจ

คุณต้องการให้คำหนึ่งเป็นตัวหนาภายในประโยคปกติที่อยู่ใน Text เดียว คุณจะใช้สิ่งใด

สรุปทบทวน

คุณสร้างข้อความรูปแบบหลากหลายด้วย buildAnnotatedString และกำหนดรูปแบบให้ช่วงข้อความผ่าน withStyle และ SpanStyle ได้แล้ว Text เดียวจึงรองรับรูปลักษณ์ได้หลายแบบพร้อมกัน 🎉

คำถามที่พบบ่อย

บทเรียน “AnnotatedString: ข้อความผสมแบบมีรูปแบบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “AnnotatedString: ข้อความผสมแบบมีรูปแบบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “AnnotatedString: ข้อความผสมแบบมีรูปแบบ”

กำหนดรูปแบบช่วงข้อความภายในบล็อก Text เดียว คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “AnnotatedString: ข้อความผสมแบบมีรูปแบบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. Composable Text
  2. ขนาด น้ำหนัก และรูปแบบตัวอักษร
  3. สี การจัดแนว และเนื้อหาล้น
  4. AnnotatedString: ข้อความผสมแบบมีรูปแบบ
← กลับไปที่ Jetpack Compose Academy