2021年4月22日木曜日

Modifier の width と requiredWidth と wrapContentWidth

↑の3番目について

wrapContentWith() を指定すると、そのコンテンツの計測したサイズが指定された minWidth よりも小さい場合、minWidth の幅の中に align(デフォルトでは Alignment.CenterHorizontal) で配置される。
↑の3番目では、"Hello" の横幅が指定された minWidth の 70.dp よりも小さいので、70.dp の幅の真ん中に Text が配置されている。

50.dp の Box の中に Text を配置している。

1番目は Text に width として 50.dp よりも大きい 100.dp を指定しているが、parent の maxWidth である 50.dp が利用される。

2番目は requiredWidth で 100.dp を指定しているので、parent の maxWidth によらずそれが利用される。

3番目は wrapContentWidth() を指定していて、かつ "Hello World" の幅が 50.dp よりも大きいが unbounded が false(デフォルトは false) なので parent の maxWidth が利用される。

4〜6番目は wrapContentWidth() を指定していて、かつ "Hello World" の幅が 50.dp よりも大きく unbounded が true なので "Hello World" の幅が利用され、align の指定にそって配置される。 Box( Modifier .size(50.dp) .background(Color.LightGray) ) { GrayText( "Hello Android", modifier = Modifier .width(100.dp) ) } Spacer(Modifier.height(24.dp)) Box( Modifier .size(50.dp) .background(Color.LightGray) ) { GrayText( "Hello Android", modifier = Modifier .requiredWidth(100.dp) ) } Spacer(Modifier.height(24.dp)) Box( Modifier .size(50.dp) .background(Color.LightGray) ) { GrayText( "Hello Android", modifier = Modifier .wrapContentWidth() ) } Spacer(Modifier.height(24.dp)) Box( Modifier .size(50.dp) .background(Color.LightGray) ) { GrayText( "Hello Android", modifier = Modifier .wrapContentWidth(align = Alignment.Start, unbounded = true) ) } Spacer(Modifier.height(24.dp)) Box( Modifier .size(50.dp) .background(Color.LightGray) ) { GrayText( "Hello Android", modifier = Modifier .wrapContentWidth(align = Alignment.CenterHorizontally, unbounded = true) ) } Spacer(Modifier.height(24.dp)) Box( Modifier .size(50.dp) .background(Color.LightGray) ) { GrayText( "Hello Android", modifier = Modifier .wrapContentWidth(align = Alignment.End, unbounded = true) ) }



0 件のコメント:

コメントを投稿