Platform UI
- Kotlin course
- Expert
- Lesson 35/47
- 5 min
Learn platform UI with Compose (Desktop, Web).
Platform UI
Compose MP offers a target-specific entry point. Window on Desktop, CanvasBasedWindow on Web, setContent on Android, ComposeUIViewController on iOS.
Shared @Composable functions are called from these entry points. Desktop example: fun main() = application { Window { App() } }. The same App() composable can be called on Web too. This gives one UI code base with platform-specific window management. The platformUiInfo model in this lesson shows the concept.
Web and iOS targets
The Web target draws Compose UI onto a canvas with CanvasBasedWindow. The iOS target wraps the composable into a UIKit controller with ComposeUIViewController.
Both targets call the same shared composables. On Web a browser canvas is used, on iOS a UIKit view. This shows the power of one UI code base: write once, run on four platforms. Performance is tuned per platform.
Practice Write platformUiInfo
Define fun platformUiInfo(): String. It should return "Desktop/Web". In main, write println(platformUiInfo()).
Starter code
// add the platformUiInfo function
fun main() {
// print the platform UI info
}Sample solution
fun platformUiInfo(): String = "Desktop/Web"
fun main() {
println(platformUiInfo())
}Expected output
Desktop/Web
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Complete the Desktop main line
fun main() = application { Window { ____ } }fun main() = application { Window { App() } }Explanation: The App() composable sits inside the Window.
2 Which window API does Desktop Compose use?
The Desktop window name is Window.- Window Correct answer
- Activity
- BrowserWindow
- Frame
Explanation: Desktop Compose opens a window with the Window API.
3 Match the Platform UI parts
| Term | Meaning |
|---|---|
Window |
Desktop |
CanvasBasedWindow |
Web |
setContent |
Android |
ComposeUIViewController |
iOS |