Jetpack Composeの知見メモ
ここのえCompose for Desktopを触ってアプリを製作する上で、必要そうなJetpack Composeの知見をまとめていく…
ここのえModifierの適用順
Modifierはメソッドチェーンの呼び出し順に基づいて処理されるので、呼び出す関数が同じでも呼び出し順によってUIの表示が異なる。
例：背景色とpadding
Text(
modifier = Modifier
.background(Color.Black)
.padding(30.dp),
text = "Text 1",
color = Color.White
)
Text(
modifier = Modifier
.padding(30.dp)
.background(Color.Black),
text = "Text 2",
color = Color.White
)
参考：
ここのえModifierの抽出・再利用
アニメーション等でコンポーザブルの状態が頻繁に変化する場合、Modifier を変数として切って抽出・再利用できるようにするべき。
val textModifier = Modifier
.background(Color.Black)
.padding(30.dp)
また、抽出された Modifier に更に要素を追加することも可能。.then() を使う。
val textModifier = Modifier.padding(30.dp)
// ...
Text(
text = "Hello world",
modifier = textModifier.then(Modifier.background(Color.Black)),
color = Color.White
)
使える単位
Jetpack Composeで出てくる単位。使うのは dp と sp の二種類。
dp
dpはdensity-independent pixels。最もよく使う単位。スマートフォン・タブレットのdpiは端末によって異なるが、それに依存しないピクセルサイズ。各種レイアウトのサイズ指定に使用する。
sp
spはscale-independent pixels。フォントの指定に使用する。ユーザが選択したテキストサイズ（デバイスのフォントサイズ設定？）に基づいているため、文字のサイズ調整はこちら。その他のレイアウトサイズにspを使うべきではない。
ここのえ
size と requiredSize
size
size はコンテンツの推奨サイズを宣言するためのmodifier。
あくまで推奨サイズを宣言するものであり、外側の要素によりサイズに制約がある場合、指定したサイズの中で限りなく近い値になる（つまり大きすぎる場合、可能な限り大きくするが指定したサイズにはならない）。
// 外側Box (100 x 300)
Box(
Modifier
.background(Color.Green)
.size(100.dp, 300.dp)
) {
// 内側Box (500 x 500)
Box(
Modifier
.background(Color.Blue)
.size(500.dp, 500.dp)
)
}
requiredSize
一方 requiredSize は "正確なサイズ" としてレイアウトのサイズを要求する。これは 親要素の制約を無視する 。
// 外側Box (100 x 300)
Box(
Modifier
.background(Color.Blue)
.size(100.dp, 300.dp)
) {
// 内側Box (500 x 500)
Box(
Modifier
.background(Color.Black)
.requiredSize(500.dp, 500.dp)
)
}
重ねてみると分かりやすい。青がsize, 黒がrequiredSize