Column: การจัดเรียงแนวตั้งและการกำหนดค่าคอนเทนเนอร์ใน Compose

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

Column คือฟังก์ชัน Composable ที่รับพารามิเตอร์แบบเลือกได้: modifier, verticalArrangement, horizontalAlignment และ content — แลมบ์ดาที่มี ColumnScope ภายใน Column ฟังก์ชัน Composable ลูกจะถูกจัดเรียงจากบนลงล่างตามลำดับการประกาศ ความสูงของ Column เท่ากับผลรวมของความสูงขององค์ประกอบลูกบวกกับพื้นที่ที่ระบุโดย Arrangement ความกว้างเท่ากับความกว้างสูงสุดขององค์ประกอบลูกโดยพิจารณาจาก Alignment

Column เป็นคอนเทนเนอร์ที่มองไม่เห็น: ไม่มีพื้นหลังหรือขอบเขตตามค่าเริ่มต้น หากคุณต้องการพื้นหลัง ให้เพิ่ม Modifier.background() ไปที่ Column โดยตรง แตกต่างจาก LazyColumn ตรงที่ Column จะเรนเดอร์องค์ประกอบลูกทั้งหมดพร้อมกันและไม่รองรับการทำเวอร์ช่วลไลเซชัน ซึ่งหมายความว่า Column เหมาะสำหรับชุดข้อมูลขนาดเล็กเท่านั้น — สูงสุด 10-15 องค์ประกอบ สำหรับรายการยาว ให้ใช้ LazyColumn

ColumnScope คือ receiver สำหรับแลมบ์ดา content ของ Column โดยให้มอดิฟายเออร์เพิ่มเติมที่ทำงานเฉพาะภายใน Column: weight(), align(), alignByBaseline() มอดิฟายเออร์เหล่านี้ไม่มีความหมายนอก Column เนื่องจากขึ้นอยู่กับลักษณะเฉพาะของการจัดวางแนวตั้ง ตัวอย่างเช่น Modifier.align(Alignment.CenterHorizontally) จัดแนวองค์ประกอบลูกไปยังกึ่งกลางของ Column ในแนวนอน

พารามิเตอร์ของ Column: Arrangement, Alignment, Modifier

VerticalArrangement กำหนดว่าพื้นที่แนวตั้งระหว่างองค์ประกอบจะถูกกระจายอย่างไร ค่าที่มี: Arrangement.Top (ค่าเริ่มต้น), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround หากความสูงของ Column มากกว่าผลรวมของความสูงขององค์ประกอบ Arrangement จะกระจายพื้นที่ว่าง หากองค์ประกอบกินพื้นที่ความสูงทั้งหมด Arrangement จะไม่มีผล

HorizontalAlignment กำหนดการจัดแนวแนวนอนของแต่ละองค์ประกอบลูก Alignment.Start (ค่าเริ่มต้นสำหรับ LTR), CenterHorizontally, End Alignment ทำงานกับแต่ละองค์ประกอบอย่างอิสระ: หากองค์ประกอบหนึ่งแคบและอีกองค์ประกอบกว้าง องค์ประกอบแรกจะถูกจัดแนว องค์ประกอบที่สองอาจเลยขอบเขตของ Column Alignment ทำงานเฉพาะเมื่อ Column มีความกว้างคงที่หรือ fillMaxWidth

Modifier สำหรับ Column: Column รับ Modifier ที่ใช้กับคอนเทนเนอร์เอง Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — มอดิฟายเออร์มาตรฐานทั้งหมดทำงาน หมายเหตุพิเศษ: Modifier.height(IntrinsicSize.Min) บังคับให้ Column คำนวณความสูงต่ำสุดตามองค์ประกอบลูกโดยใช้การวัด Intrinsic

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("บน", modifier = Modifier.background(Color.Cyan))
        Text("กลาง", modifier = Modifier.background(Color.Magenta))
        Text("ล่าง", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize: Column ปรับความสูงตามเนื้อหา
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("ข้อความสั้น")
        Text("ข้อความที่ยาวมากซึ่งจะถูกตัดในคอลัมน์")
    }
}

Column weight: การกระจายพื้นที่ระหว่างองค์ประกอบ

Modifier.weight() เป็นมอดิฟายเออร์ ColumnScope ที่กระจายพื้นที่ว่างแนวตั้งระหว่างองค์ประกอบ Column ตามสัดส่วนของน้ำหนักที่ระบุ หาก Column ครอบครองความสูง 400dp และองค์ประกอบลูกทั้งหมด 100dp ส่วนที่เหลือ 300dp จะถูกแบ่งระหว่างองค์ประกอบที่มี weight องค์ประกอบที่มี weight(2f) จะได้รับพื้นที่เป็นสองเท่าขององค์ประกอบที่มี weight(1f)

fill — พารามิเตอร์ที่สองของ weight: weight(weight: Float, fill: Boolean = true) หาก fill = true (ค่าเริ่มต้น) องค์ประกอบจะยืดออกจนเต็มความสูงที่มี หาก fill = false องค์ประกอบจะใช้ความสูงภายในเท่านั้น และพื้นที่ที่เหลือจะว่างเปล่า ซึ่งมีประโยชน์เมื่อองค์ประกอบต้องชิดด้านใดด้านหนึ่ง แต่ weight กำหนดเพียงสัดส่วนการกระจายพื้นที่ว่าง

ข้อจำกัดของ weight: weight ทำงานเฉพาะใน Column ที่มีความสูงคงที่หรือ fillMaxHeight() หากความสูงของ Column ถูกกำหนดโดยองค์ประกอบลูก (wrap content) น้ำหนักจะไม่มีความหมาย — ไม่มีพื้นที่ว่างให้กระจาย นอกจากนี้ ไม่สามารถรวม weight กับ Modifier.height() บนองค์ประกอบเดียวกันได้ — ขัดแย้งกัน และ weight จะถูกละเว้น

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // กินพื้นที่ 1/6 ของความสูง (weight 1 จากผลรวม 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // กินพื้นที่ 2/6 ของความสูง
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // กินพื้นที่ 3/6 ของความสูง
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn: เมื่อใดควรใช้อะไร

Column เรนเดอร์องค์ประกอบลูกทั้งหมดทันที หากมีมากกว่า 10-15 องค์ประกอบ Column จะสร้างภาระหนักให้กับการคอมโพสิชันและการวัด LazyColumn ในทางกลับกัน จะเรนเดอร์เฉพาะองค์ประกอบที่มองเห็นและนำองค์ประกอบที่มองไม่เห็นกลับมาใช้ใหม่ สำหรับรายการยาว รายการที่มีองค์ประกอบนับพัน รายการไม่สิ้นสุด หรือแชท — จำเป็นต้องใช้ LazyColumn

เมื่อใด Column ดีกว่า: หน้าจอฟอร์ม (3-10 ฟิลด์), การ์ดโปรไฟล์, คอลัมน์แนวตั้งพร้อมไอคอน, เมนู Column ยังรองรับ IntrinsicSize ซึ่งมีประโยชน์สำหรับความสูงแบบปรับตัวได้ นอกจากนี้ Column ยังดีบักง่ายกว่า — ไม่มีการทำเวอร์ช่วลไลเซชัน องค์ประกอบทั้งหมดมองเห็นได้ใน Layout Inspector สำหรับ UI แบบคงที่ Column เป็นตัวเลือกที่ถูกต้อง

LazyColumn ให้: การแคชไอเท็ม, การระบุตัวตนตามคีย์, แอนิเมชันการเพิ่ม/ลบ (animateItemPlacement), ส่วนหัวแบบติดหนึบ (sticky headers) หากรายการมีองค์ประกอบประเภทต่างกัน (viewType ต่างกัน) ให้ใช้ LazyColumn กับ sealed class ใน items Column ไม่รองรับ sticky headers (ต้องจำลองผ่าน Column ที่เลื่อนได้) นอกจากนี้ LazyColumn ยังรองรับ LazyVerticalGrid เมื่อใช้ GridCells

ตัวอย่างการใช้งาน Column เชิงปฏิบัติ

มาดูหน้าจอ โปรไฟล์ผู้ใช้ ที่ใช้ Column เป็นคอนเทนเนอร์หลักสำหรับรูปประจำตัว ชื่อ ประวัติย่อ และปุ่มดำเนินการ ที่นี่ Column ที่มี IntrinsicSize.Min ปรับตามเนื้อหา และ weight ใช้เพื่อกระจายพื้นที่ระหว่างส่วนต่างๆ

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // รูปประจำตัว
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // ชื่อ
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // ประวัติย่อ
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // ปุ่มดำเนินการ
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("ข้อความ") }
                OutlinedButton(onClick = { }) { Text("ติดตาม") }
            }
        }
    }
}

ในตัวอย่าง Column ใช้ Arrangement.spacedBy(8.dp) เพื่อให้มีระยะห่างเท่ากันระหว่างองค์ประกอบ horizontalAlignment = CenterHorizontally จัดกึ่งกลางรูปประจำตัว ชื่อ และประวัติย่อ Row ภายใน Column เป็นคอนเทนเนอร์ซ้อนสำหรับปุ่มในหนึ่งแถว การรวมกันของ Column (การจัดวางแนวตั้ง) และ Row (การจัดวางแนวนอน) เป็นรูปแบบการสร้าง UI ทั่วไปใน Compose