เลย์เอาต์ โมดิไฟเออร์ และธีม
สร้างหน้าจอ shared ที่ปรับตามสภาพแวดล้อมด้วย Material
เลย์เอาต์ โมดิไฟเออร์ และธีม เป็นบทเรียน Kotlin Multiplatform Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Kotlin Multiplatform Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Kotlin Multiplatform Academy มีบทเรียนทั้งหมด 4 บทเรียน
องค์ประกอบพื้นฐานของเค้าโครงสามชนิด
หน้าจอเกือบทุกหน้าสร้างจาก Column, Row และ Box โดย Column เรียงองค์ประกอบลูกในแนวตั้ง Row วางไว้เคียงข้างกัน และ Box ซ้อนองค์ประกอบเหล่านั้น
Column {
Text("Top")
Text("Bottom")
}Row วางองค์ประกอบเคียงข้างกัน
Row จัดเรียงองค์ประกอบลูกในแนวนอน ใช้เมื่อคุณต้องการวางป้ายกำกับกับค่า หรือไอคอนถัดจากข้อความในบรรทัดเดียวกัน
Row {
Text("Price:")
Text("$9")
}ใช้ Box สำหรับการซ้อน
Box ซ้อนองค์ประกอบลูกไว้ในตำแหน่งเดียวกัน เหมาะสำหรับวางป้ายกำกับบนรูปประจำตัว หรือวางข้อความกึ่งกลางทับรูปภาพ
Box {
Image(painter, null)
Text("New")
}ตัวปรับเปลี่ยนกำหนดรูปร่างทุกอย่าง
ตัวปรับเปลี่ยนจะปรับขนาด ระยะห่าง พื้นหลัง และอื่น ๆ คุณเรียกใช้ต่อกันเป็นลำดับ และลำดับนั้นเปลี่ยนผลลัพธ์จริง
Text(
"Hi",
modifier = Modifier.padding(16.dp)
)ลำดับมีความสำคัญในสายการเรียก
ตัวปรับเปลี่ยนมีผลจากบนลงล่าง การใช้ padding ก่อน background จะร่นสีเข้าไปด้านใน ขณะที่การใช้ background ก่อน padding จะเติมสีไว้ด้านหลัง padding อ่านลำดับเหล่านี้เหมือนขั้นตอนต่าง ๆ
Modifier
.background(Blue)
.padding(8.dp)เติมพื้นที่และกำหนดขนาด
ใช้ fillMaxWidth, fillMaxSize หรือขนาดคงที่ เพื่อควบคุมว่าคอมโพสสิเบิลจะใช้พื้นที่ภายในเค้าโครงหลักมากเพียงใด
Column(Modifier.fillMaxSize()) {
Text("Stretched")
}การจัดวางและการจัดแนว
พารามิเตอร์ของเค้าโครง เช่น Arrangement และ Alignment ใช้กำหนดตำแหน่งขององค์ประกอบลูก เช่น จัด Row ไว้กึ่งกลางหรือเว้นระยะองค์ประกอบให้เท่ากัน
Row(
horizontalArrangement = Arrangement.SpaceBetween
) { }กำหนดชุดรูปแบบด้วย MaterialTheme
ห่อแอปของคุณด้วย MaterialTheme เพื่อจัดเตรียมชุดสี ตัวอักษร และรูปร่าง คอมโพเนนต์ Material ทุกตัวจะอ่านค่าจากชุดรูปแบบนี้โดยอัตโนมัติ
MaterialTheme(colorScheme = darkColorScheme()) {
App()
}อ่านค่าชุดรูปแบบได้ทุกที่
ภายในชุดรูปแบบ คุณเข้าถึงโทเค็นผ่าน MaterialTheme.colorScheme และตัวอักษร ทำให้การกำหนดรูปแบบสอดคล้องกันในทุกหน้าจอที่ใช้ร่วมกัน
Text(
"Title",
color = MaterialTheme.colorScheme.primary
)ปรับให้เหมาะกับแต่ละแพลตฟอร์ม
โค้ดเค้าโครงเดียวกันทำงานได้ทุกที่ แต่คุณสามารถแยกการทำงานตามขนาดหรือแพลตฟอร์ม เพื่อให้หน้าจอ ปรับตามบริบทสำหรับโทรศัพท์ แท็บเล็ต และเดสก์ท็อป
สอดคล้องกันตั้งแต่แรก
เนื่องจากเค้าโครง ตัวปรับเปลี่ยน และชุดรูปแบบล้วนใช้ร่วมกัน หน้าจอ Android และ iOS ของคุณจึงดูเหมือนกันโดยไม่ต้องมีใครทำงานด้าน การกำหนดรูปแบบซ้ำ
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ตัวปรับเปลี่ยนทำหน้าที่อะไร
สรุป: เค้าโครง ปรับแต่ง และกำหนดชุดรูปแบบ
คุณจัดวางส่วนติดต่อผู้ใช้ด้วย Column, Row และ Box กำหนดรูปร่างด้วยตัวปรับเปลี่ยนที่เรียกต่อกัน และใช้ MaterialTheme ร่วมกัน เพื่อให้ทุกแพลตฟอร์มมีความสอดคล้องกัน 🎨
เรียนรู้ Kotlin ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 30
- บทเรียน
- 120
คำถามที่พบบ่อย
บทเรียน “เลย์เอาต์ โมดิไฟเออร์ และธีม” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เลย์เอาต์ โมดิไฟเออร์ และธีม” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Kotlin Multiplatform Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Kotlin Multiplatform Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เลย์เอาต์ โมดิไฟเออร์ และธีม”
สร้างหน้าจอ shared ที่ปรับตามสภาพแวดล้อมด้วย Material คุณปฏิบัติ Kotlin Multiplatform Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Kotlin Multiplatform Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Kotlin Multiplatform Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “เลย์เอาต์ โมดิไฟเออร์ และธีม” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Kotlin Multiplatform Academy นี้ได้ไหม
ได้ บทเรียน Kotlin Multiplatform Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เปิดใช้ Compose Multiplatform
- เลย์เอาต์ โมดิไฟเออร์ และธีม
- สถานะและการจัดองค์ประกอบใหม่ใน UI shared
- โฮสต์ UI shared บน iOS และเดสก์ท็อป