Compose For DesktopのBoxレイアウトでAlignを使用する

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))
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください