Compose Samplesコードリーディングメモ

これを読んだメモです

ルートのComposableでWindowsClassを分類し、アプリ上から直接デバイスの値を読まないのがベストプラクティス。

JetNewsはrememberWindowSizeClass()というヘルパー拡張を使ってこれを実現している。

setContent {
    val windowSizeClass = rememberWindowSizeClass()
    JetnewsApp(appContainer, windowSizeClass)
}

横幅	SizeClass
600dp未満	Compact
840dp未満	Medium
それ以上	Expanded

サイズに応じて表示する内容を変えたい場合には、BoxWithConstraintsを注意深く使用する。

quesera2

@Preview("Drawer contents")
@Preview("Drawer contents (dark)", uiMode = Configuration.UI_MODE_NIGHT_YES)

ダークモードも同時にプレビューできて便利。

Previewの取れる引数はSDKバージョンやデバイスの種類など。UI MODEはTVなども想定されている。

fontScaleを指定することで、デバイス側で大きな文字サイズが指定されている場合の予期しないレイアウト崩れなども確認可能

quesera2

Toggleなどボタンの意味合いが変わる場合にアクセシビリティを担保する場合は、Modifier.emantics を使う

modifier = modifier.semantics {
    // Use a custom click label that accessibility services can communicate to the user.
    // We only want to override the label, not the actual action, so for the action we pass null.
    this.onClick(label = clickLabel, action = null)
}

quesera2

UIツリー内はThemeの内容が伝搬するが、これをローカルで上書きしたい場合にはCompositionLocalを使用することができるが、濫用するとアプリのデバッグを困難にするため注意して使う。
（サンプルアプリは alpha 値を上書きするのに使ってるけど…？？？）

quesera2

JetsnackにSwipeToDismiss()のサンプルがあり、どのように使えばいいのか分かりやすいものの、データがダミーなので一度Dismissしたアイテムを再表示したときに起きる不整合の対処法はわからず…