Skip to content
🤔 Documentation issue? Report or edit

Compose for SwiftUI Developers

SwiftUI Compose
Button Button
Text Text
TextEditor TextField
Image Image
HStack Row
VStack Column
ZStack Box
LazyVStack LazyColumn
LazyHStack LazyRow
ScrollView LazyColumn

What is the equivalent of a View?

In “Jetpack Compose” Views are called Composable. They are Kotlin functions that are annotated with @Composable.

@Composable fun ComposableDemo(){
    Text("Hello, World")
}

How to define a state?

In SwiftUI you can use the @State property wrapper to create a state.

//SwiftUI
@State var isActiveState = false

In Compose you use mutableStateOf()

//Compose
var isActiveState = mutableStateOf(false)

But this will only create the state. When you want to remember the value of your state in every recomposition, you have to put your state inside remember

//Compose
 val isActiveState = remember { mutableStateOf(false) }

What is the equivalent of a ViewModifier?

//SwiftUI
struct ContentView: View {
    var body : some View {
        Text("Hello, World!").background(Color.Red).padding(100)
    }
}

In Compose a ViewModifier is called Modifier. You can’t directly append it to a View, you need to apply your modifier as a parameter to a Composable that expects a modifier.

//Compose
Text("Hello, World", modifier = Modifier.background(Color.Red).padding(100.dp))

What is the equivalent of EnvironmentObject?

For data that should be shared with all views in your entire app, in SwiftUI you can use EnvironmentObject. In Compose this can be done with CompositionLocal


Last update: August 16, 2021
Back to top