จัดระยะห่างด้วย Padding
ใช้ Modifier เพื่อจัดระยะห่าง
จัดระยะห่างด้วย Padding เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
Padding คืออะไร
Padding คือพื้นที่ว่างที่เพิ่มรอบเนื้อหาของ composable ช่วยดันเนื้อหาออกจากขอบ เพื่อไม่ให้ดูอึดอัด
ใน Compose คุณเพิ่ม padding ผ่าน Modifier
Text(
text = "Hello",
modifier = Modifier.padding(16.dp)
)หน่วย dp
ขนาดของ padding ใช้หน่วย dp ซึ่งย่อมาจากพิกเซลที่ไม่ขึ้นกับความหนาแน่น โดย dp จะมีขนาดทางกายภาพใกล้เคียงกันบนทุกหน้าจอ
เขียนตัวเลขตามด้วย .dp เช่น 8.dp หรือ 24.dp
Modifier.padding(8.dp)Modifier คืออะไร
Modifier อธิบายลักษณะและพฤติกรรมของ composable เช่น ขนาด padding พื้นหลัง และอื่น ๆ
คุณสร้าง modifier โดยเชื่อมฟังก์ชันเข้าด้วยกันด้วยจุด
Modifier
.padding(16.dp)
.background(Color.Yellow)Padding ทุกด้าน
การเรียกใช้ padding(16.dp) ด้วยค่าเดียวจะเพิ่มพื้นที่เท่ากันทั้งสี่ด้าน ได้แก่ ด้านบน ด้านล่าง ด้านเริ่มต้น และด้านสิ้นสุด
นี่เป็นวิธีที่รวดเร็วที่สุดในการเพิ่มพื้นที่ให้เนื้อหาดูโปร่งขึ้น
Box(
modifier = Modifier.padding(16.dp)
) {
Text("Inside")
}Padding แนวนอนและแนวตั้ง
คุณสามารถกำหนดด้านต่าง ๆ แยกกันได้ด้วยพารามิเตอร์ horizontal และ vertical
แนวนอนครอบคลุมด้านเริ่มต้นและด้านสิ้นสุด ส่วนแนวตั้งครอบคลุมด้านบนและด้านล่าง
Modifier.padding(
horizontal = 24.dp,
vertical = 8.dp
)กำหนด Padding ด้านเดียว
หากต้องการกำหนดขอบเพียงด้านเดียว ให้ระบุชื่อด้านนั้น ได้แก่ start, top, end หรือ bottom
วิธีนี้ช่วยให้คุณปรับระยะห่างได้อย่างละเอียดตรงตำแหน่งที่ต้องการ
Modifier.padding(
start = 16.dp,
top = 4.dp
)ลำดับมีความสำคัญ
ลำดับของ Modifier เปลี่ยนผลลัพธ์ได้ หากวาง padding ก่อนพื้นหลัง พื้นที่ของ padding จะไม่ถูกระบายสี แต่หากวางไว้หลังพื้นหลัง พื้นหลังก็จะเติมเต็มพื้นที่ padding
อ่าน modifier จากบนลงล่างเหมือนการซ้อนเลเยอร์
Modifier
.background(Color.Cyan)
.padding(16.dp)ระยะห่างระหว่างรายการ
ภายใน Column หรือ Row ให้ใช้ Arrangement.spacedBy เพื่อเพิ่มช่องว่างเท่ากันระหว่างรายการย่อยโดยอัตโนมัติ
วิธีนี้สะอาดกว่าการกำหนด padding ให้รายการย่อยแต่ละรายการด้วยตนเอง
Column(
verticalArrangement = Arrangement.spacedBy(12.dp)
) {
Text("One")
Text("Two")
}Spacer สำหรับสร้างช่องว่าง
Spacer คือ composable ว่างที่ใช้ดันรายการให้แยกออกจากกัน กำหนดขนาดให้กับมันด้วย Modifier
เหมาะสำหรับสร้างช่องว่างคงที่ระหว่างองค์ประกอบสองรายการ
Column {
Text("Top")
Spacer(Modifier.height(16.dp))
Text("Bottom")
}Padding กับ Margin
Compose ไม่มี margin แยกต่างหาก คุณสร้างพื้นที่ด้านนอกโดยวาง padding ไว้ก่อนในสาย modifier ก่อนขนาดหรือพื้นหลัง
ดังนั้น เครื่องมือเดียวอย่าง padding จึงจัดการได้ทั้งระยะห่างด้านในและด้านนอก โดยขึ้นอยู่กับลำดับ
Modifier
.padding(16.dp)
.background(Color.LightGray)
.padding(8.dp)ระยะห่างที่สม่ำเสมอ
แอปที่ดีมักใช้ค่าซ้ำกันไม่กี่ค่า เช่น 4, 8, 16 และ 24 dp ซึ่งช่วยให้เลย์เอาต์เป็นระเบียบและคาดเดาได้
หลีกเลี่ยงตัวเลขแบบสุ่ม ให้เลือกค่าจากชุดขนาดเล็ก ๆ
Modifier.padding(16.dp)ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับ padding ของคุณ
สรุปทบทวน
Padding เพิ่มพื้นที่รอบเนื้อหาโดยใช้ Modifier.padding พร้อมค่าหน่วย dp คุณสามารถกำหนด padding ให้ทุกด้าน แนวนอนหรือแนวตั้ง หรือขอบด้านใดด้านหนึ่งได้
ลำดับของ Modifier มีความสำคัญ และ Arrangement.spacedBy หรือ Spacer ใช้จัดการช่องว่างระหว่างรายการ
ถัดไป คุณจะสำรวจสีและ MaterialTheme
คำถามที่พบบ่อย
บทเรียน “จัดระยะห่างด้วย Padding” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “จัดระยะห่างด้วย Padding” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “จัดระยะห่างด้วย Padding”
ใช้ Modifier เพื่อจัดระยะห่าง คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “จัดระยะห่างด้วย Padding” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม
ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- จัดรูปแบบข้อความ
- ปุ่มและการคลิก
- จัดระยะห่างด้วย Padding
- สีและ MaterialTheme