ทำอย่างไรดี เมื่อ Jetpack Compose ไม่มี Margin ให้ใช้

ในสมัยที่เราใช้ View System จะคุ้นเคยกับการกำหนด Attribute สำหรับ Margin และ Padding เพื่อเว้นระยะห่างระหว่าง UI Component ตามที่ต้องการ แต่พอเปลี่ยนมาใช้ Jetpack Compose เราก็จะพบว่าไม่มี Margin ให้ใช้อีกต่อไปแล้ว

ซึ่งเหตุผลหลักก็คงจะเป็นเพราะว่ามีวิธีอื่นให้ใช้และได้ผลลัพธ์ที่เหมือนกับ Margin นั่นเอง

วิธีที่ 1 – ใช้ Padding นั่นแหละ

สำหรับ UI บางรูปแบบที่เราคุ้นชินกับการใช้ Margin มาตลอด ถ้าเปลี่ยนมุมมองนิดหน่อยก็จะพบว่าเราสามารถเปลี่ยนมาใช้ Padding แทนได้นะ

ยกตัวอย่างเช่น จากเดิมที่จะกำหนด Margin ใน Child Component เพื่อให้เกิดระยะห่างจาก Parent Component ก็ให้เปลี่ยนมากำหนด Padding ที่ Parent Component แทน

@Composable
fun AppScreen() {
    Box(
        modifier = Modifier
            .size(/* ... */)
            .padding(
                top = 16.dp,
                start = 16.dp,
            )
    ) {
        // Child Component
    }
}

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

และนั่นจึงเป็นที่มาของวิธีถัดไป

วิธีที่ 2 – ใช้ Spacer แทน

เนื่องจาก Spacer เป็น UI Component ที่ไม่แสดงผลอะไรจึงนิยมนำมาใช้ร่วมกับ Modifier เพื่อกำหนดขนาดและใช้เป็นระยะหว่าง UI Component เพื่อทำหน้าที่แบบเดียวกับ Margin

@Composable
fun AppScreen() {
    Row {
        FirstChild()
        Spacer(modifier = Modifier.width(128.dp)
        SecondChild()
    }
}

@Composable
fun FirstChild() { /* ... */ }

@Composable
fun SecondChild() { /* ... */ }

และการใช้ Spacer จะไม่ต้องกังวลว่าใช้เยอะจนเกินไปแล้วจะส่งผลต่อ Render Performance แบบ View System จึงทำให้นักพัฒนาสามารถใช้ Spacer ได้มากเท่าที่ต้องการ

สรุป

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

ส่วนหนึ่งก็ต้องยอมรับการว่าใช้ Spacer นั้นมีความสะดวกมากกว่า เพราะไม่ต้องกำหนดไว้ที่ UI Component ตัวใดตัวหนึ่งแบบ View System ทำให้นักพัฒนาสามารถนำ UI Component ตัวนั้นไปใช้ซ้ำได้ง่าย ไม่ต้องกังวลว่าจะมีค่า Margin ติดไปด้วย