ร่างเลย์เอาต์การ์ดโปรไฟล์

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

การ์ดโปรไฟล์จะแสดงสิ่งสำคัญบางอย่าง ได้แก่ รูปประจำตัว ชื่อ ประวัติสั้น ๆ สถิติบางรายการ และปุ่มติดตาม รายการนี้คือ รายการเนื้อหาของคุณ

Compose จัดวางสิ่งต่าง ๆ เป็นกล่องซ้อนกัน เนื้อหาแต่ละส่วนอยู่ในพื้นที่ของตัวเอง และพื้นที่เหล่านั้นซ้อนอยู่ในพื้นที่ที่ใหญ่กว่า เริ่มด้วยการวาด กล่องเหล่านั้น

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

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

บรรทัดสถิติแสดงจำนวนต่าง ๆ เคียงข้างกัน ไม่ได้เรียงซ้อนกัน สิ่งที่อยู่ในแนวนอนควรอยู่ใน แถวที่ซ้อนอยู่ภายในคอลัมน์

ร่างแถวที่มีบล็อกเล็ก ๆ สามบล็อก ได้แก่ โพสต์ ผู้ติดตาม และ following แต่ละบล็อกเป็นส่วนเล็ก ๆ ของการ์ดที่แยกจากกัน

ปุ่มติดตามเป็นรายการสุดท้าย กว้างเต็มพื้นที่ด้านล่าง ในภาพร่าง ปุ่มนี้เป็นส่วนประกอบย่อยลำดับสุดท้ายของ คอลัมน์ด้านนอก

ตั้งชื่อให้แต่ละพื้นที่ ได้แก่ ส่วนหัว ประวัติ สถิติ และการทำงาน การตั้งชื่อส่วนต่าง ๆ ตั้งแต่ตอนนี้จะช่วยให้การเปลี่ยนภาพร่างเป็น Composables ในภายหลังทำได้แทบจะอัตโนมัติ ✨

ภาพร่างที่ดีควรระบุระยะห่างด้วย ให้จดตำแหน่งที่ต้องการเว้นระยะรอบการ์ดและระหว่างส่วนต่าง ๆ เพื่อไม่ให้หน้าจอดูอึดอัด

ภาพร่างของคุณแปลงเป็น โครงสร้างต้นไม้ของ Composableได้โดยตรง ได้แก่ คอลัมน์ด้านนอก ตามด้วยส่วนหัว ประวัติ แถวสถิติ และปุ่มตามลำดับ

คุณร่างการ์ดเป็นกล่องซ้อนกัน ได้แก่ คอลัมน์ด้านนอกที่มีส่วนหัว ประวัติ แถวสถิติ และปุ่มติดตาม ขั้นต่อไปคือเปลี่ยนแผนนั้นให้เป็น Composables จริง