如何在 Jetpack Compose 中禁用 TabRow 或 Tab 中的漣漪效應？

Question

我想使用 TabRow，但是當我單擊背景時會出現我不想要的漣漪效果。 有沒有辦法改變這個？ 我有選項卡的 selectedContectColor 等於頁面的相同背景顏色，但我仍然看到白色波紋效果。

TabRow(
   modifier = Modifier.height(20.dp),
   selectedTabIndex = selectedIndex,
   indicator = { tabPositions ->
      TabRowDefaults.Indicator(
       modifier = Modifier.customTabIndicatorOffset(
         currentTabPosition = tabPositions[lazyListState.firstVisibleItemIndex]
         tabWidths[lazyListState.firstVisibleItemIndex]
       ),
         color = RED
      )
   },
   backgroundColor = BLACK
) {
    tabList.forEachIndexed{ index, tab ->
     val selected = (selectedIndex == index)
     Tab(
      modifier = Modifier
// Have tried different solutions here where there is a .clickable
// and the indication = null, and set interactionSource = remember{  
//MutableInteractionSource()}
      selected = selected,
      selectedContentColor = BLACK,
      onClick = { 
         animateScrollToItem(selectedIndex)
      },
      text = {
        Text("Text Code")
      }
     )

}

}

您可以在這些文檔中看到 selectedContentColor 會影響波紋

Answer 1

波紋是在Tab內定義的selectable修飾符中實現的。

您不能禁用它，但可以更改基於RippleTheme的波紋的外觀。 您可以定義自定義RippleTheme並使用LocalRippleTheme應用於您的可組合。

CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
    //..TabRow()
}

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f,0.0f,0.0f,0.0f)
}

Answer 2

微光效果由指示屬性處理。 把它放在可點擊的部分。

您可以創建一個擴展 function

inline fun Modifier.noRippleClickable(crossinline onClick: ()->Unit): Modifier = composed {
    clickable(indication = null,
        interactionSource = remember { MutableInteractionSource() }) {
        onClick()
    }
}

然后只需將 Modifier.clickable {} 替換為 Modifier.noRippleClickable {}