天天看點

Compose 去除點選水波紋陰影效果_局部and全局去除-CompositionLocal執行個體

問題1:compose view 的點選預設有陰影效果,實際開發中要求去除?

問題2:實際開發中,要求去掉點選效果,不單單是一個view,肯定是整個界面,甚至是整個應用,如何全局去除預設的點選效果?

// 舉例代碼,預設有點選陰影效果
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Image(
                    painterResource(R.drawable.ic_toolbar_search),
                    contentDescription = null,
                    modifier = Modifier
                        .size(60.dp)
                        .clickable(
                            onClick = { model.count() })
                )
                Text(
                    text = "compose textView"
                )
                Text(
                    text = "compose textView2"
                )
            }
           

解決辦法:

一:針對單個view,去除點選效果,可以在clickable 中添加indication = null, interactionSource = remember { MutableInteractionSource() }

// 舉例代碼,局部去除點選陰影效果
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                Image(
                    painterResource(R.drawable.ic_toolbar_search),
                    contentDescription = null,
                    modifier = Modifier
                        .size(60.dp)
                        .clickable(
                            onClick = { model.count() },
                            // 去除點選效果
                            indication = null,
                            interactionSource = remember {
                                MutableInteractionSource()
                            })
                )
                Text(
                    text = "compose textView"
                )
                Text(
                    text = "compose textView2"
                )
            }
           

  二:針對整個Activity,你可以在最root的compose裡設定,通過CompositionLocal(讓資料流經界面樹的一種隐式方式),屬性傳遞,把children就全部替換了

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Composable 根源view,一般用來設定主題
            ComposeTheme() {
                // data
                mViewModel = AboutViewModel()
                initData()
                
                //view
                AboutView(this, mViewModel, goBack = { goBack() })
                ShowCustomDialog(mViewModel, startDebug = { mViewModel.startDebug(this) })
            }
        }
    }
           
@Composable
fun ComposeTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(colors = LightColorPalette) {
        
        // 設定全局參數,去除預設點選效果
        CompositionLocalProvider(
            LocalIndication provides NoIndication
        ) {
            ProvideTextStyle(value = MaterialTheme.typography.body1, content = content)
        }
    }
}

// null indication
object NoIndication : Indication {
    private object NoIndicationInstance : IndicationInstance {
        override fun ContentDrawScope.drawIndication() {
            drawContent()
        }
    }

    @Composable
    override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
        return NoIndicationInstance
    }
}
           

參考 

CompositionLocal 簡介_使用