Padding , Margin ใน Android Compose

บทความนี้รีบมาโพสเลย สวัสดีครับ พอดีว่าผมลองเล่น Jetpack Compose ไปได้สักหน่อยหนึ่ง พบว่า Margin / Padding เซตกันยังไง เป็นเรื่องง่ายๆ แต่ก็ เจอความแปลก สำหรับ การ เซต Margin /Padding ครับ

โดย Android แบบเดิม เวลาเราใส่ style แล้ว เซต margin /padding เราจะทำแบบนี้

หมายความว่ายังไงครับ ??   margin เอาตัวมันห่างจาก layout ไป 16 นะ padding เอาข้างในตัวมัน ห่างออกไป 16 นะ

แล้วใน Jetpack Compose หละ เขาใส่ Style กันยังไง

อ่าวก็ เซต Padding ง่ายดีนิ แต่ว่าพอผมจะ เซต Margin เท่านั่นแหละ

ไม่มีให้ผม เซต Margin ซะงั้นครับ ผมจึงไปค้นหา พบว่า Jetpack Compose มันใช้ Padding นั่นแหละ ในการทำ Margin มันคือยังไงนะหรอ ลองไปดูโค๊ดนี้กันครับ

modifier = Modifier
            .padding(16.dp)
            .background(
                color = Color.LightGray
            )
            .padding(8.dp),

สังเกตว่า ตัว Preview จะมี กรอบขึ้นมา ก็คือกรอบ margin นั่นเอง ต่อไป ผมจะอธิบายตามความเข้าใจของผมนะครับ

คือ modifier จะทำงานได้ทีละ step ตามที่เรากำหนด

1. นำของที่อยู่ข้างในห่างออกมา 16
2. ใส่สีในของที่อยู่ข้างในตัวมัน
3. ใส่ นำของที่อยู่ข้างในตัวของมันอีกที ออกมา 16

เราก็จะได้ View ตามที่แสดงครับ

ถ้าใครอยากจะศึกษาต่อผมจะให้ลิงค์ ที่ผมไปหาวิธีมาไว้ด้านล่างนะครับ ยังไงก็ขอขอบคุณผู้อ่านที่เข้ามาอ่านกันนะครับ

How to Set Padding & Margin in Android Jetpack Compose

Learn how to set padding and margin in Android Jetpack Compose. Also, how to add an empty space using Spacer() composable.

SemicolonSpaceKumar