SwiftUI Academy · บทเรียน

การตกแต่งปุ่ม

ใช้รูปแบบปุ่มในตัวและรูปลักษณ์แบบกำหนดเอง

บทเรียน 2 จาก 413 ขั้นตอน

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

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

Default Looks Are Fine

SwiftUI gives every button a sensible default style for the platform. But you can reshape its look in seconds with a single modifier. 🎨

The buttonStyle Modifier

Apply a built-in look with the buttonStyle modifier. It changes the whole appearance without you touching the label or action.

Button("Save") { save() }
    .buttonStyle(.bordered)

Bordered for Soft Buttons

The .bordered style draws a soft, tinted capsule around your label. It is great for secondary actions that should look calm.

Button("Cancel") { dismiss() }
    .buttonStyle(.bordered)

Prominent for the Main Action

Use .borderedProminent to make the primary action pop with a filled background. Reserve it for the one button that matters most.

Button("Continue") { next() }
    .buttonStyle(.borderedProminent)

Tinting a Button

Set the accent color of a styled button with the tint modifier. It changes the fill or border to match your brand.

Button("Delete") { remove() }
    .buttonStyle(.borderedProminent)
    .tint(.red)

Controlling Size

The controlSize modifier scales a button between mini, small, regular, and large, so it fits the importance of the action.

Button("Go") { go() }
    .buttonStyle(.bordered)
    .controlSize(.large)

Rounding the Corners

Want a different shape? Pair a style with buttonBorderShape to switch between capsule, rounded rectangle, and more.

Button("Join") { join() }
    .buttonStyle(.bordered)
    .buttonBorderShape(.capsule)

Styling the Label Yourself

For full control, style the label view directly with padding, background, and color, just like any other SwiftUI view.

Button("Buy") { buy() }
    .padding()
    .background(.blue)
    .foregroundStyle(.white)

Order of Modifiers

Modifier order matters. Padding before background gives roomy color; background before padding leaves an outer margin instead.

Plain and Borderless

For a text-only look with no chrome, reach for the .plain style. It strips decoration so only your label shows.

Button("Skip") { skip() }
    .buttonStyle(.plain)

Keep It Consistent

Pick a few styles and reuse them across your app. Consistency helps people instantly know what is tappable and what is primary.

Quick Check

Time to test your styling instincts.

ตอบคำถามในบทเรียนแบบโต้ตอบ

Recap

Great job! Use buttonStyle for built-in looks, tint and controlSize to refine them, or style the label directly for full control. 🎨

เริ่มต้นได้ฟรี

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

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

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การตกแต่งปุ่ม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตกแต่งปุ่ม”

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

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

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

บทเรียน “การตกแต่งปุ่ม” ใช้เวลานานแค่ไหน

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

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

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

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

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