はじめに
個人開発で Jetpack Compose + Material3 のアプリを作っています。
UIを整え始めた段階で、Tabs を使おうとして完全にハマりました。
今振り返ると原因は単純です。
ただ、その「単純な原因」に辿り着くまでに、想像以上に時間を使いました。
同じところで時間を溶かす人が一人でも減れば、というメモです。
起きたこと
Tab を Material3 で実装していて、見た目を揃えようとしたときのコードです。
Tab(
selected = tabIndex == i,
onClick = { onTabChange(i) },
colors = TabDefaults.tabColors(
selectedContentColor = MaterialTheme.colorScheme.onSurface,
unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant
),
text = { Text(t) }
)
「よくあるやつ」だと思っていました。
しかし build が通りません。
出たエラー
None of the following candidates is applicable:
fun Tab(
selected: Boolean,
onClick: () -> Unit,
...
)
候補がズラッと出る、あの嫌なやつです。
引数も合っているように見える。
型もおかしくない。
でもコンパイルできない。
原因
結論から言うと、
Material3 の Tab には colors パラメータが存在しません。
完全に Material2 の記憶 で書いていました。
TabDefaults.tabColors() が存在するので、
「渡せば使えるだろう」と無意識に思い込んでいたのが原因です。
正しい修正
Material3 では、色は直接指定します。
Tab(
selected = tabIndex == i,
onClick = { onTabChange(i) },
selectedContentColor = MaterialTheme.colorScheme.onSurface,
unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant,
text = { Text(t) }
)
これで build は通ります。
なぜハマったのか（後出し反省）
今なら理由ははっきりしています。
TabDefaults.tabColors が存在する
Material2 では似た書き方をしていた
「便利そうなAPIはとりあえず使う」癖が出た
この3つが重なって、
API定義をちゃんと確認しなかった。
エラー文も「colorsが無い」とは言ってくれないので、
余計に遠回りしました。
再発防止として決めたこと
この一件以降、個人ルールを決めました。
Material3 の Composable は 公式定義を一度見る
Defaults 系は「存在＝使える」と思わない
build が不安定な時期は UIの作り込みを凍結
見た目を整えるより、
まず「壊れない状態」を優先した方が、結果的に早いです。
おわりに
小さなミスですが、
個人開発だとこういうところで集中力と時間を持っていかれます。
同じ Compose / Material3 周りで、
「地味に時間を奪われた話」をいくつか記録しています。
誰かの検索に引っかかって、
5分でも節約できれば十分かなと思っています。