พรีวิวแบบสดด้วย @Preview
ปรับแก้ส่วนติดต่อผู้ใช้โดยไม่ต้องสร้างแอปทั้งหมดใหม่
พรีวิวแบบสดด้วย @Preview เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ
See UI Without Running
Rebuilding the whole app to check one button is slow. The @Preview annotation renders your Composable right inside Android Studio. ⚡
Add the Annotation
Put @Preview above a Composable that takes no required parameters. Android Studio then shows it in the design pane beside your code.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Previews Need No Arguments
A previewed Composable must be callable with no arguments. That is why you usually make a small wrapper that supplies sample data.
Wrap Your Real Composable
Keep your real Composable parameterized, then write a tiny preview wrapper that calls it with fixed values for the design pane.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Name It With a Title
Add name to label the preview in the panel. Helpful when one file shows several previews at once.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Show System Decorations
Set showSystemUi to true to render the status bar and full device frame, so you see the Composable in a realistic phone shell.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Just the Background
If you only want a surface behind your UI, use showBackground instead. It adds a plain backdrop without the whole device chrome.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Many Previews at Once
Stack several @Preview annotations on one function to compare states side by side, like light and dark or small and large fonts.
Preview Different Sizes
Pass widthDp and heightDp to test how your Composable looks on narrow or wide screens without launching an emulator.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Interactive Preview
Click the interactive mode icon in the preview pane to tap and scroll your UI without a full app run. Great for quick checks.
Previews Stay Out of the App
Code under @Preview is for tooling only. It never ships in your released app, so add as many previews as you find useful.
Quick Check
A quick check on how previews work.
Recap
You can now iterate fast: add @Preview, supply sample data in a wrapper, and tune name, sizes, and backgrounds to see your UI instantly. 🎨
คำถามที่พบบ่อย
บทเรียน “พรีวิวแบบสดด้วย @Preview” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พรีวิวแบบสดด้วย @Preview” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พรีวิวแบบสดด้วย @Preview”
ปรับแก้ส่วนติดต่อผู้ใช้โดยไม่ต้องสร้างแอปทั้งหมดใหม่ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “พรีวิวแบบสดด้วย @Preview” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เขียนฟังก์ชัน @Composable
- พรีวิวแบบสดด้วย @Preview
- เรียกใช้ Composable จาก Composable
- setContent: จุดเริ่มต้นของส่วนติดต่อผู้ใช้