0Pricing
Swift Academy · บทเรียน

GeometryReader สำหรับเค้าโครงที่ปรับตามสภาพแวดล้อม

อ่านเรขาคณิตของ View แม่เพื่อสร้าง UI ที่มีสัดส่วนและปรับตามอุปกรณ์

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

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

`GeometryReader` อ่านขนาดพื้นที่ที่มีอยู่จากองค์ประกอบแม่ ทำให้คุณสร้างการจัดวางที่ปรับสัดส่วนตามขนาดหน้าจอหรือขนาดขององค์ประกอบบรรจุได้

การใช้งานพื้นฐาน

```swift GeometryReader { geo in Text("Width: \(Int(geo.size.width))") .frame(width: geo.size.width * 0.8) } ```

คุณสมบัติของ GeometryProxy

`GeometryProxy` มีสิ่งต่อไปนี้ให้ใช้: • `size: CGSize` — ความกว้างและความสูงที่มีอยู่ • `safeAreaInsets: EdgeInsets` — พื้นที่ปลอดภัยของระบบ • `frame(in:)` — กรอบในพื้นที่พิกัดที่กำหนด

การกำหนดขนาดตามสัดส่วน

```swift GeometryReader { geo in HStack(spacing: 0) { Color.blue.frame(width: geo.size.width * 0.6) Color.green } } ```

พื้นที่พิกัด

```swift GeometryReader { outer in VStack { GeometryReader { inner in let f = inner.frame(in: .named("outer")) Text("y: \(Int(f.minY))") } } } .coordinateSpace(name: "outer") ```

พื้นที่ปลอดภัย

```swift GeometryReader { geo in VStack { Spacer() Text("Bottom safe: \(Int(geo.safeAreaInsets.bottom))") .padding(.bottom, geo.safeAreaInsets.bottom) } } ```

เอฟเฟกต์การเลื่อนแบบพารัลแลกซ์

```swift ScrollView { ForEach(items) { item in GeometryReader { geo in let offset = geo.frame(in: .global).minY Image(item.image).offset(y: offset * 0.3) } } } ```

คีย์ค่ากำหนดสำหรับการสื่อสารการจัดวาง

```swift struct HeightKey: PreferenceKey { static var defaultValue: CGFloat = 0 static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) { value = max(value, nextValue()) } } ``` ใช้เพื่อสื่อสารขนาดขององค์ประกอบลูกขึ้นไปตามลำดับชั้นของมุมมอง

เมื่อใดควรหลีกเลี่ยง GeometryReader

`GeometryReader` มีค่าเริ่มต้นเป็นการเติมพื้นที่ทั้งหมดที่มีอยู่ จึงอาจทำให้การจัดวางเสียหายหากใช้อย่างไม่ระมัดระวัง เมื่อเป็นไปได้ ควรเลือกใช้ `.frame(maxWidth:.infinity)` และสแตกแบบยืดหยุ่นแทน

ทางเลือก: โพรโทคอลการจัดวาง

ภาษาสวิฟต์ 5.7 ขึ้นไปเพิ่มโพรโทคอล `Layout` สำหรับอัลกอริทึมการจัดวางแบบกำหนดเองอย่างสมบูรณ์ โดยไม่ต้องมีภาระจาก GeometryReader

ตรวจสอบอย่างรวดเร็ว

`GeometryProxy.size` มีข้อมูลอะไรอยู่

สรุป

ประเด็นสำคัญ: • `GeometryReader { geo in }` อ่านขนาดที่องค์ประกอบแม่จัดเตรียมให้ • `geo.size` — ความกว้างและความสูง ส่วน `geo.safeAreaInsets` — ระยะขอบภายในของระบบ • `frame(in:)` — ตำแหน่งในพื้นที่พิกัดที่ตั้งชื่อไว้หรือพื้นที่พิกัดส่วนกลาง • ใช้ PreferenceKeys เพื่อสื่อสารขนาดขึ้นไปยังองค์ประกอบด้านบน • เมื่อเป็นไปได้ ควรเลือกการจัดวางแบบยืดหยุ่นแทน GeometryReader จบหลักสูตรแล้ว! ถัดไป: การไหลของข้อมูลใน SwiftUI

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

บทเรียน “GeometryReader สำหรับเค้าโครงที่ปรับตามสภาพแวดล้อม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “GeometryReader สำหรับเค้าโครงที่ปรับตามสภาพแวดล้อม”

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

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

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

บทเรียน “GeometryReader สำหรับเค้าโครงที่ปรับตามสภาพแวดล้อม” ใช้เวลานานแค่ไหน

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

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

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

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

  1. พื้นฐาน VStack, HStack และ ZStack
  2. LazyVGrid และ LazyHGrid
  3. ตัวเว้นระยะ Padding และตัวปรับแต่ง Frame
  4. GeometryReader สำหรับเค้าโครงที่ปรับตามสภาพแวดล้อม
← กลับไปที่ Swift Academy