BoxレイアウトはModifierのAlignを使用して、Composableを描画する場所を指定できます。
テキストを左上、中上、右上、左中、中、右中、左下、中下、右下に配置する例。
Box(modifier = Modifier.fillMaxSize()) {
Text("TopStart", modifier = Modifier.align(Alignment.TopStart))
Text("TopCenter", modifier = Modifier.align(Alignment.TopCenter))
Text("TopEnd", modifier = Modifier.align(Alignment.TopEnd))
Text("CenterStart", modifier = Modifier.align(Alignment.CenterStart))
Text("Center", modifier = Modifier.align(Alignment.Center))
Text("CenterEnd", modifier = Modifier.align(Alignment.CenterEnd))
Text("BottomStart", modifier = Modifier.align(Alignment.BottomStart))
Text("BottomCenter", modifier = Modifier.align(Alignment.BottomCenter))
Text("BottomEnd", modifier = Modifier.align(Alignment.BottomEnd))
}
Boxを上寄せ、下寄せ、右寄せ、左寄せ、中央などにレイアウトする例。
Box(modifier = Modifier.fillMaxSize()) {
Box(modifier = Modifier.align(Alignment.TopCenter).fillMaxWidth().height(50.dp).background(color= Color.Red))
Box(modifier = Modifier.align(Alignment.Center).fillMaxWidth().height(50.dp).background(color= Color.Blue))
Box(modifier = Modifier.align(Alignment.BottomCenter).fillMaxWidth().height(50.dp).background(color= Color.Cyan))
Box(modifier = Modifier.align(Alignment.CenterStart).fillMaxHeight().width(50.dp).background(color= Color.LightGray))
Box(modifier = Modifier.align(Alignment.Center).fillMaxHeight().width(50.dp).background(color= Color.Gray))
Box(modifier = Modifier.align(Alignment.CenterEnd).fillMaxHeight().width(50.dp).background(color= Color.DarkGray))
Box(modifier = Modifier.align(Alignment.Center).size(50.dp).background(color= Color.Black))
}