Main Layouts

• Column: used to stack UI elements vertically. Each child element is placed below the previous one. It takes a list of children and a modifier as input.

Column(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalGravity = Alignment.CenterHorizontally
) {
    Button(
        onClick = { /* Perform action */ },
        text = "Click me!"
    )
    Text("Hello World")
}

• Row: used to stack UI elements horizontally. Each child element is placed next to the previous one. It takes a list of children and a modifier as input.

Row(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    verticalArrangement = Arrangement.Center,
    horizontalGravity = Alignment.CenterHorizontally
) {
    Button(
        onClick = { /* Perform action */ },
        text = "Click me!"
    )
    Text("Hello World")
}

• Box: stacks its children on top of each other. The stacking order is defined by the order in which the children are called within the Box declaration, with the first child positioned at the bottom of the stack. It doesn’t have a background color or shape. It takes a list of children and a modifier as input.

Box(modifier = Modifier.padding(16.dp)) {
    Text("Hello World")
}

• Surface: used to create a container for other UI elements. It adds a background color or an image to the container and can also have a defined shape. It takes a child element and a modifier as input.

Surface(color = Color.Yellow, shape = RoundedCornerShape(10.dp)) {
    Text("Hello World")
}

• Card: used to create a container with a background color and a defined shape, usually with a shadow. It takes a child element and a modifier as input.

Card(elevation = 8.dp) {
    Text("Hello World")
}

• Scaffold: used to create the basic structure of an app, such as a top app bar, bottom navigation bar, and a floating action button. It takes a child element and a modifier as input.

Scaffold(
    topBar = { 
        TopAppBar(title = { Text("My App") })
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = { /* Perform action */ },
            icon = { Icon(Icons.Filled.Add) }
        )
    },
    bodyContent = { 
        Text("Hello World")
    }
)

• List: used to create a scrolling list of items. It takes a list of data and a lambda function as input. The lambda function is used to define how each item in the list should be displayed.

List(data) { item ->
    Text(item.name)
}

Please note that these are basic examples and you can customize the layout and its functionality as per your requirement.