Kotlin Compose 标准组件

package com.anguomob.jecpack.activity.compose


@Composable
fun PhotographerCard(modifier: Modifier = Modifier) {
    Row(
        modifier = modifier
            .clip(RoundedCornerShape(4.dp))
            .background(color = MaterialTheme.colors.surface)
            .clickable(onClick = {})
            .padding(16.dp)

    ) {
        Surface(
            modifier = Modifier.size(50.dp),
            shape = CircleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            Image(
                painter = painterResource(id = R.mipmap.cute),
                contentDescription = null
            )
        }
        Column(modifier = Modifier.padding(start = 8.dp)) {
            Text(text = "Alfred Sisley", fontWeight = FontWeight.Bold)
            CompositionLocalProvider(values = arrayOf(LocalContentAlpha.provides(ContentAlpha.medium))) {
                //里面都是中等透明度 ContentAlpha.medium
                Text(text = "3 minutes ago", style = MaterialTheme.typography.body2)
            }

        }
    }
}

其效果

如果改为这样的话

      .background(color = MaterialTheme.colors.surface)
            .padding(16.dp)

            .clickable(onClick = {})

点击后有水波纹效果但是不是全局的

这需要注意代码的调用顺序

这样才是对的

       modifier = modifier
            .clip(RoundedCornerShape(4.dp))
            .background(color = MaterialTheme.colors.surface)
            .clickable(onClick = {})
            .padding(16.dp)

 

 这里用到了

CompositionLocalProvider

这个是相当于html的css 渲染在外面后 里面所有的投透明度都会被影响掉

 非常的好玩。