PricingLoginStart free
Jetpack Compose Academy · บทเรียน

Column: เรียงสิ่งต่าง ๆ ในแนวตั้ง

จัดวางองค์ประกอบลูกจากบนลงล่าง

บทเรียน 1 จาก 413 ขั้นตอน

Column: เรียงสิ่งต่าง ๆ ในแนวตั้ง เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

เรียงซ้อนในแนวตั้ง

เมื่อคุณต้องการให้รายการลูกเรียงจากบนลงล่าง ให้ใช้ คอลัมน์ นี่คือเค้าโครงหลักของ Compose สำหรับการเรียงซ้อนในแนวตั้ง 📚

คอลัมน์แรกของคุณ

คอลัมน์รับแลมบ์ดาต่อท้าย คอมโพสิเบิลทุกตัวที่คุณเรียกใช้ภายในจะกลายเป็นรายการลูก และถูกวาดตามลำดับที่เขียน

Column {
    Text("First")
    Text("Second")
}

ลำดับจากบนลงล่าง

รายการลูกจะเรียงตามลำดับในซอร์สโค้ด คอมโพสิเบิลตัวแรกอยู่ด้านบน ตัวถัดไปอยู่ด้านล่าง และเรียงต่อไปตามหน้าจอ

ผสมรายการลูกหลายชนิด

คอลัมน์รองรับคอมโพสิเบิลทุกชนิด ไม่ใช่แค่ข้อความ ปุ่ม รูปภาพ และแม้แต่คอลัมน์อื่น ๆ ก็เรียงซ้อนอยู่ภายในได้

Column {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

การกำหนดขนาดเริ่มต้น: ห่อหุ้มเนื้อหา

โดยค่าเริ่มต้น คอลัมน์จะมีความสูงและกว้างเท่าที่รายการลูกต้องการเท่านั้น คอลัมน์จะหดให้พอดีกับเนื้อหา เว้นแต่คุณจะกำหนดเป็นอย่างอื่น

เติมเต็มความกว้าง

เพิ่ม Modifier เพื่อเปลี่ยนขนาด fillMaxWidth ทำให้คอลัมน์ขยายเต็มความกว้างของหน้าจอ

Column(modifier = Modifier.fillMaxWidth()) {
    Text("Wide column")
}

ระยะห่างระหว่างรายการลูก

ใช้ verticalArrangement ร่วมกับ spacedBy เพื่อสร้างช่องว่างเท่ากันระหว่างรายการลูกทุกตัว โดยไม่ต้องกำหนดระยะขอบด้านในให้แต่ละรายการด้วยตนเอง

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

จัดแนวรายการลูกในแนวนอน

กำหนด horizontalAlignment เพื่อจัดรายการลูกให้อยู่ในแนวเดียวกัน CenterHorizontally จะดึงรายการทั้งหมดมาไว้กึ่งกลางความกว้างของคอลัมน์

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("Centered")
}

คอลัมน์ยังเลื่อนไม่ได้

คอลัมน์ธรรมดาไม่สามารถเลื่อนได้ หากรายการลูกยาวเกินหน้าจอ รายการที่เกินจะถูกตัด จึงเหมาะกับรายการสั้นและมีจำนวนคงที่

เพิ่มการเลื่อนเมื่อจำเป็น

สำหรับเนื้อหาที่ยาวขึ้น ให้เพิ่ม verticalScroll ในตัวปรับแต่งของคอลัมน์ ตอนนี้รายการที่เรียงซ้อนทั้งหมดจะเลื่อนไปพร้อมกันเป็นชิ้นเดียว

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text("Long content")
}

ซ้อนเค้าโครงสำหรับหน้าจอจริง

หน้าจอจริงมักซ้อนคอลัมน์ไว้ภายในคอลัมน์ คอลัมน์ด้านนอกเก็บส่วนต่าง ๆ และแต่ละส่วนก็เป็นคอลัมน์ย่อยที่เก็บรายละเอียดของตัวเอง

ตรวจสอบอย่างรวดเร็ว

มาทบทวนกันว่าคอลัมน์จัดเรียงรายการลูกอย่างไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน: คอลัมน์

คุณได้เรียนรู้เรื่องคอลัมน์: คอลัมน์เรียงรายการลูกจากบนลงล่างตามลำดับ ห่อหุ้มเนื้อหาโดยค่าเริ่มต้น และใช้การจัดวาง การจัดแนว และตัวปรับแต่งเพื่อกำหนดขนาดและระยะห่าง

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120
เริ่มเรียนฟรีดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “Column: เรียงสิ่งต่าง ๆ ในแนวตั้ง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Column: เรียงสิ่งต่าง ๆ ในแนวตั้ง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Column: เรียงสิ่งต่าง ๆ ในแนวตั้ง”

จัดวางองค์ประกอบลูกจากบนลงล่าง คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “Column: เรียงสิ่งต่าง ๆ ในแนวตั้ง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. Column: เรียงสิ่งต่าง ๆ ในแนวตั้ง
  2. Row: วางสิ่งต่าง ๆ เคียงข้างกัน
  3. Box: ซ้อนและทับซ้อน
  4. การจัดเรียงและการจัดแนว
← กลับไปที่ Jetpack Compose Academy