ตัวอย่างและการโหลดซ้ำแบบทันที
ปรับปรุงงานอย่างรวดเร็วด้วยตัวอย่าง Compose
ตัวอย่างและการโหลดซ้ำแบบทันที เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
พรีวิวขณะออกแบบ
หนึ่งในฟีเจอร์ที่ดีที่สุดของ Compose คือ @Preview ซึ่งช่วยให้คุณเห็นคอมโพสเซเบิลที่เรนเดอร์ภายใน Android Studio ได้ โดยไม่ต้องเรียกใช้แอปบนอุปกรณ์หรือโปรแกรมจำลอง
แอนโนเทชัน @Preview
เพิ่ม @Preview ไว้เหนือฟังก์ชัน @Composable แล้ว Android Studio จะแสดงผลฟังก์ชันนั้นในแผงออกแบบ
@Preview
@Composable
fun GreetingPreview() {
Greeting(name = "Preview")
}พรีวิวไม่รับพารามิเตอร์
ฟังก์ชันพรีวิวต้องเรียกใช้ได้โดยไม่ต้องส่ง อาร์กิวเมนต์ ดังนั้นให้สร้างคอมโพสเซเบิลตัวห่อที่จัดเตรียมข้อมูลตัวอย่าง แล้วแสดงพรีวิวของตัวห่อนั้น
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada", followers = 42)
}การตั้งชื่อฟังก์ชันพรีวิว
ตามธรรมเนียม ตัวห่อพรีวิวจะตั้งชื่อตามคอมโพสเซเบิลและเติมท้ายด้วย Preview เช่น GreetingPreview วิธีนี้ช่วยให้ค้นหาได้ง่ายและสื่อว่าฟังก์ชันเหล่านี้ไม่ได้ใช้ในระบบจริง
พารามิเตอร์ของพรีวิว
@Preview รับอาร์กิวเมนต์เพื่อปรับการเรนเดอร์ได้ เช่น showBackground, name และ widthDp
@Preview(showBackground = true, name = "Light")
@Composable
fun GreetingPreview() {
Greeting(name = "Hi")
}showBackground
โดยค่าเริ่มต้น พรีวิวจะมีพื้นหลังโปร่งใส ให้ส่ง showBackground = true เพื่อเรนเดอร์พื้นผิวทึบแสง ซึ่งช่วยให้มองเห็นข้อความได้ง่ายขึ้นขณะออกแบบ
พรีวิวหลายรายการ
คุณสามารถวางแอนโนเทชัน @Preview หลายรายการไว้บนฟังก์ชันเดียวกัน เพื่อดูการกำหนดค่าที่แตกต่างกันเคียงข้างกันได้ เช่น ความกว้างขนาดเล็กและขนาดใหญ่
@Preview(name = "Phone", widthDp = 360)
@Preview(name = "Tablet", widthDp = 720)
@Composable
fun ScreenPreview() {
HomeScreen()
}พรีวิวแบบโต้ตอบ
Android Studio มี โหมดโต้ตอบ สำหรับพรีวิว ซึ่งช่วยให้คุณคลิกปุ่มและทำให้สถานะเปลี่ยนแปลงได้โดยตรงในพรีวิว โดยไม่ต้องติดตั้งแอป
การแก้ไขแบบสด / โหลดใหม่ทันที
เมื่อใช้ การแก้ไขแบบสด การแก้ไขเนื้อหาของคอมโพสเซเบิลจะปรากฏในพรีวิวแทบจะทันที และยังปรากฏบนอุปกรณ์ที่กำลังเรียกใช้งานอยู่ได้ด้วย โดยไม่ต้องสร้างโปรเจกต์ใหม่ทั้งหมด วิธีนี้ช่วยเร่งวงจรการออกแบบได้อย่างมาก
พรีวิวไม่มีค่าใช้จ่าย
ฟังก์ชันพรีวิวจะถูกตัดออกจากบิลด์สำหรับเผยแพร่ ดังนั้นการเพิ่มพรีวิวจำนวนมากจึงไม่เพิ่มค่าใช้จ่ายขณะเรียกใช้ ใช้พรีวิวได้อย่างเต็มที่เพื่อบันทึกคำอธิบายและทดสอบคอมโพสเซเบิลแต่ละรายการด้วยภาพ
ตัวอย่างฉบับสมบูรณ์
นี่คือตัวอย่างคอมโพสเซเบิลพร้อมพรีวิว เปิดแผงออกแบบเพื่อดูการเรนเดอร์ได้ทันที
@Composable
fun Badge(label: String) {
Text(text = label, color = Color.White)
}
@Preview(showBackground = true)
@Composable
fun BadgePreview() {
Badge(label = "NEW")
}ตรวจสอบอย่างรวดเร็ว
เหตุใดฟังก์ชัน @Preview จึงต้องไม่รับพารามิเตอร์
ทบทวน
พรีวิวช่วยให้การพัฒนา Compose รวดเร็วขึ้น:
- เพิ่ม
@Previewไว้เหนือคอมโพสเซเบิลที่ไม่รับอาร์กิวเมนต์ - ใช้ตัวเลือกต่าง ๆ เช่น
showBackgroundและwidthDp - วางพรีวิวหลายรายการซ้อนกัน และใช้ โหมดโต้ตอบ กับ การแก้ไขแบบสด เพื่อปรับแก้ได้อย่างรวดเร็ว
คำถามที่พบบ่อย
บทเรียน “ตัวอย่างและการโหลดซ้ำแบบทันที” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวอย่างและการโหลดซ้ำแบบทันที” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวอย่างและการโหลดซ้ำแบบทันที”
ปรับปรุงงานอย่างรวดเร็วด้วยตัวอย่าง Compose คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ตัวอย่างและการโหลดซ้ำแบบทันที” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม
ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Jetpack Compose คืออะไร
- Composable แรกของคุณ
- ข้อความ รูปภาพ และปุ่ม
- ตัวอย่างและการโหลดซ้ำแบบทันที