0Pricing
Kotlin Multiplatform Academy · บทเรียน

โฮสต์ UI shared บน iOS และเดสก์ท็อป

ฝังคอมโพสิเบิลเดียวกันในแต่ละเป้าหมาย

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

แอปเดิม โฮสต์ใหม่

Composable แอป ที่ใช้ร่วมกันของคุณพร้อมแล้ว ตอนนี้แต่ละแพลตฟอร์มต้องมีจุดเริ่มต้นขนาดเล็กสำหรับนำแอปไปแสดง โค้ด UI เองไม่ต้องเปลี่ยนแปลง

iOS ครอบ Compose ไว้ในตัวควบคุม

บน iOS คุณเปิดให้เข้าถึง Composable ผ่าน ตัวควบคุม UIViewController ฟังก์ชัน ComposeUIViewController จะส่งตัวควบคุมให้ SwiftUI นำไปแสดงได้

fun MainViewController() =
    ComposeUIViewController { App() }

เรียกใช้จาก SwiftUI

จาก SwiftUI คุณครอบตัวควบคุมนั้นด้วย UIViewControllerRepresentable เพื่อให้หน้าจอ Kotlin กลายเป็นมุมมอง SwiftUI ทั่วไป

struct ComposeView: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UIViewController {
        MainViewControllerKt.MainViewController()
    }
}

iOS แสดงผลแบบเนทีฟ

เบื้องหลัง Compose ใช้ Skia วาดลงบนพื้นผิวของ iOS ดังนั้นหน้าจอที่ใช้ร่วมกันจึงให้ความรู้สึกเป็นเนทีฟและใช้ตรรกะร่วมกับ Android ได้อย่างราบรื่น

เดสก์ท็อปใช้หน้าต่าง

บนเดสก์ท็อป คุณเปิดแอปเดิมภายในหน้าต่างแอปพลิเคชัน เพียง Kotlin ไม่กี่บรรทัดก็ได้โปรแกรมเดสก์ท็อปจริง

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        App()
    }
}

เดสก์ท็อปทำงานบน JVM

เป้าหมายเดสก์ท็อปจะคอมไพล์เป็น JVM และแสดงผลด้วย Skia เช่นกัน ดังนั้น Composable เดียวกับที่คุณเขียนสำหรับโทรศัพท์จึงทำงานบน macOS, Windows และ Linux ได้

Composable เดียว โฮสต์สามแบบ

Android ใช้ setContent, iOS ใช้ตัวควบคุมมุมมอง และเดสก์ท็อปใช้หน้าต่าง ทั้งสามแบบเรียกใช้ฟังก์ชัน แอป ที่ใช้ร่วมกันเดียวกัน

ใช้ร่วมกันให้มากขึ้นตั้งแต่ต้น

เนื่องจากการโฮสต์เป็นเพียงส่วนเดียวที่แตกต่างกันตามแพลตฟอร์ม สิ่งที่คุณสร้างเกือบทั้งหมดจึงอยู่ใน commonMain พื้นที่ส่วนแสดงผลที่ใช้ร่วมกันจึงขยายใหญ่ขึ้น

ปรับเฉพาะแพลตฟอร์มเมื่อจำเป็น

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

ทดสอบ UI เพียงครั้งเดียว

UI ที่ใช้ร่วมกันหมายถึงการทดสอบ UI ที่ใช้ร่วมกันใน commonTest คุณจึงตรวจสอบพฤติกรรมเพียงครั้งเดียวและมั่นใจได้ในทุกโฮสต์ที่นำไปเผยแพร่

ส่งมอบสามแอปจากหนึ่งโค้ดเบส

เมื่อเชื่อมต่อโฮสต์แล้ว โค้ดเบส Compose เดียวจะขับเคลื่อนรุ่น Android, iOS และเดสก์ท็อปของคุณ ช่วยลดงาน UI ที่ซ้ำซ้อนลงอย่างมาก 🚢

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

iOS โฮสต์ Composable ที่ใช้ร่วมกันอย่างไร

ทบทวน: โฮสต์ได้ทุกที่

คุณนำ แอป ที่ใช้ร่วมกันเดียวกันไปแสดงบน iOS ผ่านตัวควบคุมมุมมอง และบนเดสก์ท็อปผ่านหน้าต่าง โค้ดเบส Compose เดียว ส่งมอบได้สามแพลตฟอร์ม 🎯

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

บทเรียน “โฮสต์ UI shared บน iOS และเดสก์ท็อป” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “โฮสต์ UI shared บน iOS และเดสก์ท็อป”

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

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

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

บทเรียน “โฮสต์ UI shared บน iOS และเดสก์ท็อป” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เปิดใช้ Compose Multiplatform
  2. เลย์เอาต์ โมดิไฟเออร์ และธีม
  3. สถานะและการจัดองค์ประกอบใหม่ใน UI shared
  4. โฮสต์ UI shared บน iOS และเดสก์ท็อป
← กลับไปที่ Kotlin Multiplatform Academy