Row ใน Jetpack Compose: คืออะไร คุณสมบัติ composable และวิธีการทำงาน

Row ใน Jetpack Compose คืออะไร

Row คือฟังก์ชัน composable ที่วางองค์ประกอบย่อยในลำดับแนวนอน ในลำดับชั้นเค้าโครงของ Compose Row อยู่ในตำแหน่งคอนเทนเนอร์พื้นฐานร่วมกับ Column และ Box

Row ไม่ต้องการการระบุขนาด — มันปรับตัวตามเนื้อหาโดยอัตโนมัติ ความกว้างของ Row เท่ากับผลรวมของความกว้างขององค์ประกอบย่อยรวมถึงการเติม เว้นแต่จะมีการระบุ Modifier.fillMaxWidth หรือขนาดคงที่

องค์ประกอบย่อยของ Row สามารถมีตัวปรับแต่งของตัวเองที่ส่งผลต่อตำแหน่งภายในคอนเทนเนอร์ ตัวอย่างเช่น Modifier.weight ช่วยให้องค์ประกอบ占用พื้นที่ตามสัดส่วนของพื้นที่ว่าง

ตาม Android Developers Blog, 2024 Row ประมวลผลองค์ประกอบย่อยตามลำดับ โดยคำนวณขนาดตามกฎการวัดของ Compose: ขั้นแรกวัดองค์ประกอบที่ไม่มี weight จากนั้นพื้นที่ที่เหลือจะถูกกระจายระหว่างองค์ประกอบที่มี weight

ไวยากรณ์และลายเซ็นพื้นฐานของ Row

ลายเซ็นพื้นฐานของ Row ประกอบด้วยพารามิเตอร์ modifier, horizontalArrangement และ verticalAlignment องค์ประกอบย่อยทั้งหมดจะถูกส่งในบล็อกแลมบ์ดา content สุดท้าย

@Composable
fun RowExample() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "หนึ่ง")
        Text(text = "สอง")
        Text(text = "สาม")
    }
}

คุณสมบัติของ Row: horizontalArrangement และ verticalAlignment

พารามิเตอร์ horizontalArrangement กำหนดว่าองค์ประกอบย่อยจะกระจายไปตามแกนแนวนอนภายใน Row อย่างไร ค่าที่มีได้แก่ Start, End, Center, SpaceBetween, SpaceAround และ SpaceEvenly จากคลาส Arrangement

Arrangement.Start วางองค์ประกอบที่จุดเริ่มต้นของคอนเทนเนอร์ Arrangement.End — ที่ท้าย และ Arrangement.Center — ที่กึ่งกลาง ค่าเหล่านี้ทำงานคล้ายกับคุณสมบัติ justify-content ใน CSS Flexbox

Arrangement.SpaceBetween กระจายองค์ประกอบอย่างเท่าเทียม โดยวางองค์ประกอบแรกที่จุดเริ่มต้น องค์ประกอบสุดท้ายที่จุดสิ้นสุด และส่วนที่เหลือมีระยะห่างเท่ากันระหว่างกัน ตาม Material Design Guidelines, 2025 SpaceBetween เหมาะสมที่สุดสำหรับแถบเครื่องมือและแถวนำทาง

พารามิเตอร์ verticalAlignment จัดแนวองค์ประกอบในแนวตั้ง ค่าที่มีได้แก่ Alignment.Top, Alignment.CenterVertically และ Alignment.Bottom คุณสมบัตินี้มีประโยชน์เมื่อองค์ประกอบ Row มีความสูงต่างกัน — ตัวอย่างเช่น ไอคอนข้างข้อความหลายบรรทัด

ตารางค่า Arrangement

การกระจายพื้นที่ด้วย Modifier.weight

Modifier.weight คือตัวปรับแต่งที่ใช้ได้เฉพาะภายใน Row และ Column เท่านั้น ซึ่งกระจายพื้นที่ว่างระหว่างองค์ประกอบย่อยตามสัดส่วนของค่าที่ระบุ หากองค์ประกอบหนึ่งมีน้ำหนัก 1.0f และอีกองค์ประกอบมี 2.0f องค์ประกอบที่สองจะใช้พื้นที่เป็นสองเท่า

องค์ประกอบที่ไม่มี weight จะใช้พื้นที่ที่จำเป็นสำหรับเนื้อหา พื้นที่ที่เหลือจะถูกกระจายระหว่างองค์ประกอบที่มี weight ตามสัดส่วนน้ำหนัก พฤติกรรมนี้คล้ายกับคุณสมบัติ flex-grow ใน CSS Flexbox

ตาม Android Developer Documentation, 2025 weight ทำงานเฉพาะภายใน Row, Column และ BoxWithConstraints เมื่อใช้ weight ใน Row องค์ประกอบย่อยทั้งหมดจะถูกวัดในสองรอบ: รอบแรกองค์ประกอบที่ไม่มี weight จากนั้นองค์ประกอบที่มี weight

@Composable
fun WeightExample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Text(
            text = "ซ้าย",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "ขวา")
    }
}

ตัวอย่างโค้ดกับ Row

ตัวอย่างแรกสาธิต Row ด้วยไอคอนและข้อความ — สถานการณ์ทั่วไปสำหรับรายชื่อผู้ติดต่อหรือการตั้งค่า Icon และ Text ถูกห่อใน Row โดยมี verticalAlignment อยู่กึ่งกลาง

@Composable
fun IconWithText() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(8.dp)
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = "เพิ่มในรายการโปรด")
    }
}

ตัวอย่างที่สองแสดง Row ด้วยปุ่มและการกระจายเท่าเทียม SpaceEvenly รับประกันระยะห่างเท่ากันระหว่างปุ่มทั้งหมดและขอบของคอนเทนเนอร์

@Composable
fun ButtonRow() {
    Row(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Button(onClick = {}) { Text("ยกเลิก") }
        Button(onClick = {}) { Text("บันทึก") }
    }
}

ตัวอย่างที่สาม — Row ภายใน Card สำหรับแสดงคะแนน Row ที่ซ้อนกันด้วย Modifier.weight ช่วยให้ดาวคะแนนและค่าตัวเลขใช้พื้นที่คงที่

@Composable
fun RatingRow(rating: Float) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            text = "คะแนน:",
            modifier = Modifier.weight(1.0f)
        )
        Text(text = "$rating / 5.0")
    }
}

คุณสมบัติของ Row ในเค้าโครงแบบปรับตัว

Row ต้องการการควบคุมความกว้างในเค้าโครงแบบปรับตัว หากเนื้อหาของ Row เกินความกว้างหน้าจอที่มี องค์ประกอบอาจล้นขอบเขตคอนเทนเนอร์ เพื่อป้องกันนี้ ให้ใช้ Modifier.horizontalScroll หรือเปลี่ยนเป็น Column

เมื่อรวม Row กับ Modifier.weight สิ่งสำคัญคือต้องตั้งค่า fillMaxWidth ให้กับ Row หลัก — มิฉะนั้น weight จะกระจายพื้นที่ที่ไม่มีอยู่ ตาม Material Design Guidelines, 2025 Row ที่มี weight โดยไม่มี fillMaxWidth ถือเป็นการกำหนดค่าที่ไม่ถูกต้อง

สำหรับอินเทอร์เฟซแบบปรับตัว แนะนำให้รวม Row กับ Box หรือใช้ Arrangement.SpaceBetween สำหรับการกระจายองค์ประกอบอัตโนมัติบนขนาดหน้าจอที่แตกต่างกัน ซึ่งให้ความยืดหยุ่นโดยไม่ต้องใช้ Media Queries

• Modifier.horizontalScroll — เพิ่มการเลื่อนเมื่อ Row ล้น
• Modifier.weight — กระจายพื้นที่ตามสัดส่วน
• Arrangement.SpaceBetween — การกระจายแบบปรับตัวพร้อมการยึดที่ขอบ