はじめに

個人開発で 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分でも節約できれば十分かなと思っています。