【Jetpack Compose】TabRowの背景色がWhiteにならない場合

13816 ワード
Android JetpackCompose Android テキストリンク

問題点

Jetpack ComposeのTabRowのbackgroundにwhiteを指定しているのになぜかグレーになってしまったり、正常に白色にならない場合があります。
例えばこんな感じです。

@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp),
        backgroundColor = Color.White
    ) {
        Tab(
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}

きちんと backgroundColor = Color.White に指定しているにも関わらずグレーになってしまっています。
ここでさらにボーダーの色を変えたいなどでContentColorも指定すると、背景色がそちらに引っ張られてしまいます。

@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier
            .fillMaxWidth()
            .height(50.dp),
        backgroundColor = Color.White
        contentColor = Color.Magenta, // ← 文字色やボーダーの色指定
    ) {
        Tab(
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}

どう見てもbackgroundColorが正常に動作していません。。
ContentColorも、本来は文字色とインジケーターの色などに作用するだけのはずが背景色にも影響してしまっています。
背景色を白にしたいケースは非常に多いと思うのですが、これでは詰んでしまって進みません😭

解決策

StackOverflowの同様の問題のスレッドに解決策を載せてくれている人がいました💡
（自分が見たときは解決策はなかったのですが定期的にチェックしてたら書き込みしてくれている人がいました）

なんと、原因はTabRowのModifierにheightを指定していたことでした（なんで）

先程のコードではTabRowのmodifierの部分で50dpの高さを指定していました。ここが悪さをするみたいです。
試しにこのheightを削除して動作させてみると正常に背景が白になりました！

@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier.fillMaxWidth(), // ここでheightを指定してはいけない
        backgroundColor = Color.White,
        contentColor = Color.Magenta,
    ) {
        Tab(
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}

でもこれだと高さの指定ができていません。
高さの指定をするときはTabRowではなく、Tabのほうに指定すればいいみたいです。

@Composable
fun TabPage() {
    var selectedTabIndex by remember { mutableStateOf(0) }

    TabRow(
        selectedTabIndex = selectedTabIndex,
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = Color.White,
        contentColor = Color.Magenta,
    ) {
        Tab(
            modifier = Modifier.height(100.dp),
            selected = selectedTabIndex == 0,
            onClick = { selectedTabIndex = 0 },
            text = { Text("Tab1") }
        )
        Tab(
            modifier = Modifier.height(100.dp),
            selected = selectedTabIndex == 1,
            onClick = { selectedTabIndex = 1 },
            text = { Text("Tab2") }
        )
    }
}