如何在 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 {}