You can see how the Box Scope is done~
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Compose_BasicsTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
MainScreen()
}
}
}
}
}
@Composable
fun MainScreen(){
Box(modifier = Modifier.size(height = 200.dp, width = 500.dp)){
TextCell("Top Start", Modifier.align(Alignment.TopStart))
TextCell("Top Center", Modifier.align(Alignment.TopCenter))
TextCell("Top End", Modifier.align(Alignment.TopEnd))
TextCell("Center Start", Modifier.align(Alignment.CenterStart))
TextCell("Center", Modifier.align(Alignment.Center))
TextCell("Center End", Modifier.align(Alignment.CenterEnd))
TextCell("Bottom Start", Modifier.align(Alignment.BottomStart))
TextCell("Bottom Center", Modifier.align(Alignment.BottomCenter))
TextCell("Bottom End", Modifier.align(Alignment.BottomEnd))
}
}
@Composable
fun TextCell(text:String,modifier: Modifier = Modifier,fontSize:Int = 20){
val cellModifier = Modifier
.padding(4.dp)
.border(width = 2.dp, color = Color.Green)
Text(text = text, cellModifier.then(modifier),
fontSize = fontSize.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
Compose_BasicsTheme {
MainScreen()
}
}