Swift Academy · บทเรียน

พรีวิวและ Preview Provider

ใช้ #Preview และ PreviewProvider เพื่อดูการเปลี่ยนแปลงใน Xcode ได้ทันที

บทเรียน 4 จาก 412 ขั้นตอน

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

ยินดีต้อนรับ

การแสดงตัวอย่างของ Xcode ช่วยให้คุณเห็นการเปลี่ยนแปลงของ SwiftUI ได้ทันทีโดยไม่ต้องเปิดตัวจำลอง โดยกำหนดด้วย `#Preview` (Swift 5.9 ขึ้นไป) หรือ `PreviewProvider`

แมโคร #Preview (Swift 5.9 ขึ้นไป)

```swift #Preview { ContentView() } ``` คำจำกัดความการแสดงตัวอย่างที่เรียบง่ายที่สุด ใช้เพียงหนึ่งบรรทัด และ Xcode จะแสดงผลในพื้นที่แสดงตัวอย่าง

PreviewProvider (รูปแบบเดิม)

```swift struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } ```

การแสดงตัวอย่างหลายแบบ

```swift #Preview("Dark Mode") { ContentView().preferredColorScheme(.dark) } #Preview("iPad") { ContentView().previewDevice("iPad Air (5th generation)") } ```

การกำหนดข้อมูลตัวอย่าง

```swift #Preview { let model = ViewModel() model.items = ["One","Two","Three"] return ListView(model: model) } ```

previewDisplayName

```swift struct Previews: PreviewProvider { static var previews: some View { Group { ContentView().previewDisplayName("Light") ContentView().preferredColorScheme(.dark).previewDisplayName("Dark") } } } ```

สภาพแวดล้อมในการแสดงตัวอย่าง

```swift #Preview { ContentView() .environment(\.locale, .init(identifier:"tr")) .environment(\.sizeCategory, .accessibilityLarge) } ```

@EnvironmentObject ในการแสดงตัวอย่าง

```swift #Preview { ContentView().environmentObject(AppModel()) } ```

เคล็ดลับด้านประสิทธิภาพของการแสดงตัวอย่าง

• การแสดงตัวอย่างทำงานในโพรเซสแยกต่างหาก • เก็บข้อมูลตัวอย่างให้มีขนาดเล็ก • แยกข้อมูลเฉพาะสำหรับการแสดงตัวอย่างไว้ใน `extension PreviewProvider` • หลีกเลี่ยงการเรียกเครือข่ายในโค้ดการแสดงตัวอย่าง

การแสดงตัวอย่างแบบสด

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

แมโครใดของ Swift 5.9 ขึ้นไปที่สร้างการแสดงตัวอย่าง SwiftUI

สรุปทบทวน

ประเด็นสำคัญ: • `#Preview { }` — การแสดงตัวอย่างแบบบรรทัดเดียวใน Swift 5.9 ขึ้นไป • `PreviewProvider` — แนวทางแบบโพรโทคอลสำหรับรุ่นเก่า • การแสดงตัวอย่างหลายแบบด้วยชื่อ อุปกรณ์ และชุดสีที่แตกต่างกัน • แทรกสภาพแวดล้อมและ environmentObject ในการแสดงตัวอย่าง • การแสดงตัวอย่างแบบสดช่วยให้ทดสอบแบบโต้ตอบได้โดยไม่ต้องเปิดแอป จบบทเรียนแล้ว! ถัดไป: การจัดวางใน SwiftUI
เริ่มต้นได้ฟรี

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

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

คอร์ส
122
บทเรียน
409

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

บทเรียน “พรีวิวและ Preview Provider” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พรีวิวและ Preview Provider”

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

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

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

บทเรียน “พรีวิวและ Preview Provider” ใช้เวลานานแค่ไหน

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

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

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

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

  1. โพรโทคอล View และคุณสมบัติ Body
  2. @State: สถานะที่เปลี่ยนแปลงได้ภายใน View
  3. ตัวปรับแต่ง View: การเชื่อมต่อและตัวปรับแต่งแบบกำหนดเอง
  4. พรีวิวและ Preview Provider
← กลับไปที่ Swift Academy