แน่นอนว่านี่คือภาพรวมโดยละเอียดเกี่ยวกับวิธีเปลี่ยนขนาดของสวิตช์ SwiftUI ใน Swift
SwiftUI เป็นเฟรมเวิร์กของ Apple ในการสร้างอินเทอร์เฟซผู้ใช้บนแพลตฟอร์ม Apple ทั้งหมดด้วยประสิทธิภาพของ Swift บางครั้ง นักพัฒนาอาจจำเป็นต้องปรับขนาดของส่วนประกอบ UI บางอย่าง เช่น สวิตช์ ตามค่าเริ่มต้น SwiftUI ไม่อนุญาตให้เปลี่ยนขนาดของสวิตช์โดยตรง แต่เราสามารถใช้วิธีแก้ปัญหาบางอย่างเพื่อให้บรรลุเป้าหมายนี้ได้
มาดำดิ่งลงสู่แนวทางแก้ไขปัญหา
การสร้างสวิตช์แบบกำหนดเองใน SwiftUI
หากต้องการปรับขนาดสวิตช์ใน SwiftUI วิธีหนึ่งคือการสร้างสวิตช์แบบกำหนดเอง สิ่งนี้ช่วยให้คุณควบคุมรูปลักษณ์และขนาดของสวิตช์ได้อย่างสมบูรณ์
นี่คือตัวอย่างโค้ดที่สร้างสวิตช์แบบกำหนดเอง:
struct CustomSwitch: View { @Binding var isOn: Bool var body: some View { Button(action: { self.isOn.toggle() }) { Rectangle() .fill(self.isOn ? Color.green : Color.gray) .frame(width: 50, height: 30) .overlay(Circle() .fill(Color.white) .offset(x: self.isOn ? 10 : -10), alignment: self.isOn ? .trailing : .leading) .cornerRadius(15) .animation(.spring()) } } }
ทำความเข้าใจกับรหัสสวิตช์แบบกำหนดเอง
มาดูรายละเอียดว่าโค้ดนี้ทำอะไร:
- โครงสร้าง CustomSwitch: สิ่งนี้จะกำหนดมุมมอง SwiftUI ที่กำหนดเองของเรา มันมีการเชื่อมโยงกับค่าบูลีน - สถานะของสวิตช์
- การทำงานของปุ่ม: บล็อกโค้ด Swift นี้ระบุลักษณะการทำงานเมื่อกดปุ่ม ที่นี่เพียงสลับสถานะ "isOn"
- สี่เหลี่ยมผืนผ้า: ตัวอย่างของโครงสร้างสี่เหลี่ยมผืนผ้าของ SwiftUI ซึ่งกำหนดคุณสมบัติของรูปร่าง
- เติมสี: สีของสี่เหลี่ยมผืนผ้าขึ้นอยู่กับว่า “isOn” เป็นจริงหรือเท็จ
- กรอบ: ตัวแก้ไขเฟรมในที่นี้ระบุความกว้างและความสูงของสวิตช์แบบกำหนดเอง
- ซ้อนทับ: ตัวแก้ไขการซ้อนทับช่วยให้คุณสามารถวางมุมมอง SwiftUI อื่นทับซ้อนกับมุมมองที่มีอยู่ - ที่นี่คือวงกลมสีขาวที่ทำหน้าที่เป็นปุ่มหมุน
- ออฟเซ็ต: ตัวแก้ไขออฟเซ็ตถูกใช้ที่นี่เพื่อย้ายวงกลม โดยขึ้นอยู่กับว่า "isOn" เป็นจริงหรือเท็จ ทำให้เกิดภาพลวงตาว่าสวิตช์กำลังสลับอยู่
- รัศมีมุม: ใช้การปัดเศษที่มุมของสี่เหลี่ยมผืนผ้าด้านล่าง
- ภาพเคลื่อนไหว: ตัวปรับแต่งภาพเคลื่อนไหวจะใช้ภาพเคลื่อนไหว spring() กับปุ่มทั้งหมด ดังนั้นเมื่อคุณสลับ มันจะสลับได้อย่างราบรื่น
ห่อขึ้น
การมีความสามารถในการปรับแต่งขนาดของสวิตช์ SwiftUI ถือเป็นข้อได้เปรียบในการปรับแต่งอินเทอร์เฟซผู้ใช้ให้ตรงกับความต้องการของแอปพลิเคชันเฉพาะ เราได้เรียนรู้แนวทางหนึ่งในการบรรลุเป้าหมายนี้โดยการสร้างสวิตช์แบบกำหนดเอง ขอให้มีความสุขในการเขียนโค้ด!
จำเอาไว้: SwiftUI ค่อนข้างยืดหยุ่นและปรับแต่งได้ คุณสามารถปรับค่าและคุณสมบัติในโค้ดด้านบนได้ตามใจชอบ เพื่อให้เหมาะกับโครงการและความต้องการด้านการออกแบบของคุณมากขึ้น หากคุณต้องการเปลี่ยนขนาดขององค์ประกอบ UI อื่นๆ วิธีการสร้างแบบกำหนดเองสามารถนำไปใช้ในลักษณะเดียวกันได้