Swift Academy · บทเรียน

ตัวปรับแต่ง View: การเชื่อมต่อและตัวปรับแต่งแบบกำหนดเอง

ใช้ตัวปรับแต่งที่มีมาให้ และสร้างชนิด ViewModifier ที่นำกลับมาใช้ซ้ำได้

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

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

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

ตัวปรับแต่งมุมมองใช้แปลงมุมมอง เช่น เปลี่ยนแบบอักษร สี ระยะขอบภายใน ภาพเคลื่อนไหว และอื่น ๆ คุณสามารถเชื่อมต่อตัวปรับแต่งหลายตัวเข้าด้วยกันและสร้างตัวปรับแต่งแบบกำหนดเองที่นำกลับมาใช้ใหม่ได้

ตัวปรับแต่งที่มีมาให้ในระบบ

```swift Text("Hello") .font(.title) .foregroundColor(.blue) .padding() .background(Color.yellow) .cornerRadius(8) ```

ลำดับการเชื่อมต่อตัวปรับแต่งมีความสำคัญ

```swift Text("Hi") .padding() .background(Color.red) // red covers padding area Text("Hi") .background(Color.red) // red only covers text .padding() ```

ViewModifier แบบกำหนดเอง

```swift struct CardStyle: ViewModifier { func body(content: Content) -> some View { content .padding() .background(Color.white) .cornerRadius(10) .shadow(radius: 4) } } extension View { func cardStyle() -> some View { modifier(CardStyle()) } } Text("Card").cardStyle() ```

ตัวปรับแต่งแบบมีเงื่อนไข

```swift Text("Status") .foregroundColor(isError ? .red : .primary) // Or with .modifier: text.modifier(isLarge ? LargeStyle() : SmallStyle()) ```

ตัวปรับแต่งสภาพแวดล้อม

ตัวปรับแต่งบางชนิดส่งต่อไปยังมุมมองสืบทอด: ```swift VStack { Text("One") Text("Two") } .font(.headline) // applies to ALL Text children ```

ตัวปรับแต่งที่รับพารามิเตอร์

```swift struct Bordered: ViewModifier { var color: Color func body(content: Content) -> some View { content.overlay(RoundedRectangle(cornerRadius:8).stroke(color,lineWidth:2)) } } Text("Hi").modifier(Bordered(color:.blue)) ```

ตัวปรับแต่งการเปลี่ยนผ่าน

```swift if show { Text("Appeared") .transition(.slide) // custom appear/disappear animation } ```

.onAppear และ .onDisappear

```swift Text("Hello") .onAppear { print("Appeared") } .onDisappear { print("Disappeared") } ```

ตัวปรับแต่งการช่วยการเข้าถึง

```swift Image("logo") .accessibilityLabel("Company Logo") .accessibilityAddTraits(.isImage) ```

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

ตัวปรับแต่งมุมมองแบบกำหนดเองต้องสอดคล้องกับโพรโทคอลใด

สรุปทบทวน

ประเด็นสำคัญ: • เชื่อมต่อตัวปรับแต่งเพื่อประกอบรูปลักษณ์ • ลำดับมีความสำคัญ ตัวปรับแต่งแต่ละตัวจะห่อหุ้มผลลัพธ์จากตัวก่อนหน้า • ใช้โพรโทคอล `ViewModifier` สำหรับตัวปรับแต่งที่นำกลับมาใช้ใหม่ได้ • ตัวปรับแต่งสภาพแวดล้อมส่งต่อไปยังมุมมองย่อย • ขยาย `View` เพื่อความสะดวกในการเรียกใช้ `.myModifier()` ถัดไป: การแสดงตัวอย่าง
เริ่มต้นได้ฟรี

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

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

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

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

บทเรียน “ตัวปรับแต่ง View: การเชื่อมต่อและตัวปรับแต่งแบบกำหนดเอง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ตัวปรับแต่ง View: การเชื่อมต่อและตัวปรับแต่งแบบกำหนดเอง”

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

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

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

บทเรียน “ตัวปรับแต่ง View: การเชื่อมต่อและตัวปรับแต่งแบบกำหนดเอง” ใช้เวลานานแค่ไหน

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

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

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

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

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