前语

在Compose开发的过程中，咱们会常常遇到一些看起来很简略却不知道怎么处理的小问题，比方去除点击暗影、Dialog全屏等问题，本文记录了这些常见小问题的处理方式。如有更好计划欢迎大佬们交流探讨～

实用小技巧

怎么移除View点击暗影

这儿的View指的是除了Button系列的之外，如Button、TextButton等，也就是自身没有onClick特点的。这个后面会再次提到。

咱们编写一个高度为60dp，宽度满屏的TextView，运用Modifier的clickable特点为其添加点击事情

（留意：假如不运用clickable特点添加，而是运用pointerInput特点可不处理，但简略的点击事情一般不运用此办法）

代码如下所示：

@Composable
fun UITest() {
    Text(text = "点击我", modifier = Modifier
        .background(Color.Red)
        .height(60.dp)
        .fillMaxWidth()
        .clickable {
           //点击事情
        }
    )
}

运转程序，作用如下图所示。

从作用图中能够看出点击暗影还是非常明显的，假如咱们想去掉暗影作用，只需要设置indication为null即可，修正后的代码如下所示。

@Composable
fun UITest() {
    Text(text = "点击我", modifier = Modifier
        .background(Color.Red)
        .height(60.dp)
        .fillMaxWidth()
        .clickable(indication = null, interactionSource = remember {
            MutableInteractionSource()
        }) {
        }
    )
}

上面实现的Text文字不是笔直居中的，咱们该怎么使其内容笔直居中呢？

Text文本怎么笔直居中

你或许尝试过textAlign特点，可是很惋惜，textAlign特点只能到达水平居中的作用，假如想要到达笔直居中的作用，需要在其外层包一层父组件，一般引荐Box。代码如下所示。

@Composable
fun UITest() {
    Box(contentAlignment = Alignment.Center,
        modifier = Modifier
            .height(60.dp)
            .fillMaxWidth()) {
        Text(
            text = "点击我",
            modifier = Modifier
                .background(Color.Red)
                .align(Alignment.Center)
        )
    }
}

怎么移除Button的点击暗影

这儿的Button指的是具有onClick特点的组件系列，由于这类组件有自己的onClick特点，点击时不会进入clickable办法，所以不能运用Text组件的方式去处理。这儿以TextButton为例，编写代码如下所示。

@Composable
fun ButtonTest() {
    TextButton(onClick = { }, modifier = Modifier
        .height(60.dp)
        .fillMaxWidth()
        .background(Color.Green)) {
        Text(text = "按钮点击")
    }
}

运转程序代码作用如下所示。

从图能够看出有明显水波纹作用。有这个作用的原因是在MaterialTheme主题中LocalRippleTheme运用了MaterialRippleTheme的作用，源码如下所示。

CompositionLocalProvider(
    LocalColors provides rememberedColors,
    LocalContentAlpha provides ContentAlpha.high,
    LocalIndication provides rippleIndication,
    LocalRippleTheme provides MaterialRippleTheme,
    LocalShapes provides shapes,
    LocalTextSelectionColors provides selectionColors,
    LocalTypography provides typography
) 

咱们修正这个Theme即可，自定义Theme名为NoRippleTheme代码如下所示。

object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor(): Color {
        return Color.Transparent
    }
    @Composable
    override fun rippleAlpha(): RippleAlpha {
        return RippleAlpha(0f, 0f, 0f, 0f)
    }
}

然后使用这个theme即可，修正代码如下所示。

ComposeDoTheme {
    CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
       //
    }
}

这样该主题下的按钮点击暗影作用便移除了。

Dialog宽度怎么全屏

编写一个Dialog，代码如下所示。

@Composable
fun DialogDemo() {
    Dialog(
        onDismissRequest = { }
    ) {
        Column(
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
                .background(Color.White)) {
            Text(text = "我是标题1111")
            Button(onClick = {
                //取消弹窗显示
            }) {
                Text(text = "知道了")
            }
        }
    }
}

运转程序作用如下图所示。（请疏忽他的丑～）

这儿代码中已经设置了宽度为

fillMaxWidth()，Dialog的宽度仍然不是全屏的，咱们能够设置Dialog的properties特点来到达全屏的作用。修正后的代码如下所示。

Dialog(
    onDismissRequest = { },
    properties = DialogProperties(
        usePlatformDefaultWidth = false
    ),
)

修正后的作用如下图所示。

这样咱们就到达Dialog宽度全屏的作用了，但之前有大佬说这种方式修正屏幕宽度后会有不行预期的问题，但我测试并未发现这个问题。

怎么提高编码效率

许多开发者说用Compose写页面感觉很慢，这是由于一方面对Compose的掌握不熟悉需要多写多练，另一方面是没有合理的利用Compose的Live Templates。

比方咱们新建一个Compose函数，假如你是从@Compose开端写就会很慢，能够尝试comp快捷键，创立新的函数，如下图所示。

还有比如WR、WC等模版，如图所示。

更多实时模板能够从Android Studio中查询

咱们也能够依据自己的编码习惯创立自己的模板。

写在最后

来新公司快三个月了，学到了许多，也成长了许多，送给自己一句常说的话：但行好事莫问前程～