สี การจัดแนว และเนื้อหาล้น

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

ส่งค่า color เพื่อเปลี่ยนสีของ Text ใด ๆ คุณสามารถใช้ค่า Color ได้โดยตรง หรือดึงสีเชิงความหมายจาก MaterialTheme เพื่อให้ผลลัพธ์ปรับตามธีม

สีที่เขียนตายตัวอาจทำงานผิดพลาดในโหมดมืด ให้ใช้ MaterialTheme.colorScheme เพื่อให้ข้อความอ่านง่ายบนพื้นหลังทุกแบบ

ควบคุมการจัดแนวในแนวนอนด้วย textAlign จัดชื่อเรื่องให้อยู่กึ่งกลางหรือจัดย่อหน้าให้เต็มแนวได้ แต่จะมีผลเมื่อ Text มีความกว้างให้เติมเต็ม

เพื่อให้ textAlign แสดงผล Text ต้องกว้างกว่าคำของมัน โดยมักใช้ fillMaxWidth หากไม่เช่นนั้น Text จะพอดีกับข้อความและไม่มีอะไรขยับ

ข้อมูลจริงอาจยาวเกินพื้นที่ที่มี หากไม่วางแผน ข้อความอาจดันเค้าโครงหรือถูกตัดอย่างไม่สวยงาม การจัดการ การล้นช่วยแก้ปัญหานี้

จำกัดความสูงด้วยการกำหนด maxLines ข้อความจะแสดงไม่เกินจำนวนบรรทัดนั้นแล้วหยุดอย่างเงียบ ๆ ทำให้แถวมีขนาดคาดเดาได้

ใช้ maxLines คู่กับ overflow = TextOverflow.Ellipsis เพื่อเติมจุดสามจุดท้ายข้อความ เป็นสัญญาณว่ายังมีเนื้อหาให้อ่านต่อ

TextOverflow ยังมี Clip ซึ่งตัดข้อความตรงขอบ และ Visible ซึ่งยอมให้ข้อความล้นออกมา โดย Ellipsis เป็นค่าเริ่มต้นที่เหมาะกับผู้ใช้ที่สุด 🙂

ใช้ minLines เพื่อจองพื้นที่ ป้องกันไม่ให้การ์ดเปลี่ยนความสูงเมื่อรายการหนึ่งมีข้อความสั้นกว่าอีกรายการในรายการ

สีช่วยสื่อความหมายให้ชัดเจน การจัดแนวนำสายตา และกฎการจัดการ การล้นช่วยให้เค้าโครงคงที่ ไม่ว่าข้อมูลจริงจะยาวเพียงใด

คุณได้เรียนรู้การย้อมสีข้อความด้วย color การจัดตำแหน่งด้วย textAlign และการจัดการเนื้อหาที่ยาวด้วย maxLines ร่วมกับ overflow เลย์เอาต์จึงเป็นระเบียบอยู่เสมอ ✨