Compose開發中的一些實用小技巧~

前言

在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中查詢

寫在最後