更改 Jetpack Compose 中选定的选项卡底线颜色

Question

我正在使用 Kotlin for Android 开发 Jetpack Compose 项目，并且使用 ScrollableTabRow 实现了选项卡布局。选项卡有底线，我想将所选选项卡的颜色更改为红色。 这是我当前的代码：

var selectedTab by remember { mutableIntStateOf(0) }

Column(modifier = Modifier.fillMaxSize()) {
    ScrollableTabRow(
        modifier = Modifier.fillMaxWidth(),
        selectedTabIndex = selectedTab,
        edgePadding = 0.dp,
        indicator = { _: List<TabPosition> ->
            Modifier.background(Color.Red)
        },
        tabs = {
            tabs.forEachIndexed { index, title ->
                Tab(
                    text = { Text(text = title) },
                    selected = selectedTab == index,
                    onClick = { selectedTab = index },
                )
            }
        }
    )

    TabContent(
        tabTitle = tabs[selectedTab],
        book = books
    )
}

Answer 1

可以通过使用

indicator

覆盖

ScrollableTabRow

的

TabRowDefaults.Indicator()

参数并指定指示器偏移量和颜色来更改所选选项卡指示器的颜色：

ScrollableTabRow(
    selectedTabIndex = selectedTab,
    /// ...
    indicator = { tabPositions ->
        if (selectedTab < tabPositions.size) {
            TabRowDefaults.Indicator(
                modifier = Modifier.tabIndicatorOffset(tabPositions[selectedTab]),
                color = Color.Red
            )
        }
    }
) /// ...