SwiftUI Academy · บทเรียน

พื้นหลังและรัศมีมุม

ใช้สี การไล่ระดับสี และมุมโค้งมน

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Adding a Background

The background modifier paints behind a view. Drop in a color and the area the view occupies fills in, instantly turning plain text into a tile.

Text("Hello")
    .background(.blue)

Pad First, Then Color

A background hugs the content tightly. Add padding before the background so the color has comfortable space around the text inside.

Text("Pill")
    .padding()
    .background(.blue)

Readable Text on Color

Dark backgrounds need light text. Pair a colored background with foregroundStyle so your label stays crisp and easy to read.

Text("Tag")
    .padding()
    .background(.indigo)
    .foregroundStyle(.white)

Rounding the Corners

Sharp corners can feel harsh. The cornerRadius modifier softens them, clipping the view into a friendly rounded rectangle.

Text("Soft")
    .padding()
    .background(.blue)
    .cornerRadius(12)

Order Makes the Shape

Corner radius rounds whatever it follows, so place it after the background. Rounding before the color would clip the text, not the tile.

Background with a Shape

For more control, pass a shape to background. A RoundedRectangle fills and rounds in one step, the modern way to build cards.

Text("Card")
    .padding()
    .background(RoundedRectangle(cornerRadius: 16).fill(.teal))

Making a Circle

A large radius on a square view yields a circle. Combine an equal frame with clipShape using Circle for round avatars and icon badges.

Text("A")
    .frame(width: 60, height: 60)
    .background(.orange)
    .clipShape(Circle())

Gradients as Backgrounds

Backgrounds are not limited to flat colors. A LinearGradient adds depth, flowing smoothly from one color to another across the view.

Text("Glow")
    .padding()
    .background(LinearGradient(colors: [.pink, .orange], startPoint: .top, endPoint: .bottom))

Materials for Depth

SwiftUI ships translucent Material backgrounds that blur whatever sits behind them, giving cards a native, frosted-glass feel.

Text("Frosted")
    .padding()
    .background(.ultraThinMaterial)

Adding a Border

Pair a background with an overlay stroke to outline a card. The rounded rectangle border traces the same corners as the fill.

Text("Bordered")
    .padding()
    .overlay(RoundedRectangle(cornerRadius: 12).stroke(.gray))

Building a Real Card

Stack these tools and a card appears: padding for room, a background for color, and a corner radius to round it into a polished tile.

Text("Done")
    .padding()
    .background(.green)
    .cornerRadius(10)

Quick Check

Make sure the modifier order clicked for you.

Recap

Awesome! You can now style views with a background, round corners, add gradients, materials, and borders to build clean, reusable cards.

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

บทเรียน “พื้นหลังและรัศมีมุม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นหลังและรัศมีมุม”

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

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

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

บทเรียน “พื้นหลังและรัศมีมุม” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ SwiftUI Academy