Introduction:
We will talk about Column and Row and Spacer today.
Column:
@Composable
inline fun Column(
modifier: Modifier = Modifier,
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
content: ColumnScope.() -> Unit
): @Composable Unit
A layout composable that places its children in a vertical sequence.
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Top,
)
{
Box(Modifier.size(100.dp).background(Color.Magenta))
Box(Modifier.size(100.dp).background(Color.Yellow))
Box(Modifier.size(100.dp).background(Color.Green))
}
horizontalAlignment:
The horizontalAlignment can be:
horizontalAlignment = Alignment.Start,
Or
horizontalAlignment = Alignment.CenterHorizontally,
Or
horizontalAlignment = Alignment.End,
verticalArrangement:
The verticalArrangement can be:
verticalArrangement = Arrangement.Top,
Or
verticalArrangement = Arrangement.Center,
Or
verticalArrangement = Arrangement.Bottom,
Or
verticalArrangement = Arrangement.SpaceBetween,
Or
verticalArrangement = Arrangement.SpaceAround,
Or
verticalArrangement = Arrangement.SpaceEvenly,
Finally, most or may be even all of Modifier Function apply to Column and Row and all Composable.
Row:
@Composable
inline fun Row(
modifier: Modifier = Modifier,
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
verticalAlignment: Alignment.Vertical = Alignment.Top,
content: RowScope.() -> Unit
): @Composable Unit
A layout composable that places its children in a horizontal sequence. It is the same as Column except everything is the opposite and horizontal.
Row(
modifier = Modifier.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
)
{
Box(Modifier.size(100.dp).background(Color.Magenta))
Box(Modifier.size(100.dp).background(Color.Yellow))
Box(Modifier.size(100.dp).background(Color.Green))
}
Spacer:
@Composable
fun Spacer(modifier: Modifier): @Composable Unit
Component that represents an empty space layout, whose size can be defined using Modifier.width, Modifier.height, Modifier.size and Modifier.weight modifiers.
Column {
Box(Modifier.size(100.dp).background(Color.Red))
Spacer(Modifier.weight(2f))
Box(Modifier.size(100.dp).background(Color.Magenta))
Spacer(Modifier.weight(1f))
Box(Modifier.size(100.dp).background(Color.Green))
}
Finally:
Next class we will talk about some most used Composable that follow Google material design.
See you 😄
================================================
You can join us in the discord server
https://discord.gg/TWnnBmS
and ask me any questions in (#kotlin-and-compose) channel.
Top comments (0)