How can I put a widget/compose in bottom end corner of Column?
Column(
verticalArrangement = ,
horizontalAlignment =
) { // omitted codes }
I only find horizontal and vertical position to it? IS there a way to put a widget/compose in bottom end?
I can’t find a parameter in column to place widget/compose in bottom end corner
CodePudding user response:
If you want to use a Column
to put a Composable in the bottom end corner you have to use:
Column(
modifier=Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.End
) {
Button(onClick = {}){
Text("Button")
}
}
In general the attributes verticalArrangement
and horizontalAlignment
specify the vertical arrangement and the horizontal alignment of the layout's children according to the space occupied by the Column
.
With:
Column(
modifier=Modifier.fillMaxWidth().height(80.dp).background(Yellow),
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.End
)
CodePudding user response:
For a better understanding of Box, see the example below
@Composable
fun BoxExample2() {
Box(
modifier = Modifier
.background(color = Color.LightGray)
.fillMaxSize()
) {
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.TopStart),
text = "TopStart"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.TopCenter),
text = "TopCenter"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.TopEnd),
text = "TopEnd"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.CenterStart),
text = "CenterStart"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.Center),
text = "Center"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.CenterEnd),
text = "CenterEnd"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.BottomStart),
text = "BottomStart"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.BottomCenter),
text = "BottomCenter"
)
Text(
style = MaterialTheme.typography.h6,
modifier = Modifier
.background(Color.Yellow)
.padding(10.dp)
.align(Alignment.BottomEnd),
text = "BottomEnd"
)
}
}