Platform UI

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.

Exercise Write platformUiInfo

Define fun platformUiInfo(): String. It should return "Desktop/Web". In main, write println(platformUiInfo()).

Show example solution

fun platformUiInfo(): String = "Desktop/Web"
fun main() {
    println(platformUiInfo())
}

Test yourself

Complete the Desktop main line

fun main() = application { Window { ____ } }

Show answer

fun main() = application { Window { App() } }

Which window API does Desktop Compose use?
```
The Desktop window name is Window.
```
- Window
- Activity
- BrowserWindow
- Frame
Show answer

Window — Desktop Compose opens a window with the Window API.
Match the Platform UI parts

Window

Desktop
CanvasBasedWindow

Web
setContent

Android
ComposeUIViewController

iOS

Next lesson: Summary - Compose MP

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies