欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android?Jetpack?Compose開發(fā)實(shí)用小技巧

 更新時間:2022年11月18日 10:38:18   作者:黃林晴  
這篇文章主要為大家介紹了Android?Jetpack?Compose開發(fā)中的一些實(shí)用小技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前言

在Compose開發(fā)的過程中,我們會經(jīng)常遇到一些看起來很簡單卻不知道如何處理的小問題,比如去除點(diǎn)擊陰影、Dialog全屏等問題,本文記錄了這些常見小問題的處理方式。如有更好方案歡迎大佬們交流探討~

實(shí)用小技巧

如何移除View點(diǎn)擊陰影

這里的View指的是除了Button系列的之外,如Button、TextButton等,也就是自身沒有onClick屬性的。這個后面會再次提到。

我們編寫一個高度為60dp,寬度滿屏的TextView,使用Modifier的clickable屬性為其添加點(diǎn)擊事件

(注意:如果不使用clickable屬性添加,而是使用pointerInput屬性可不處理,但簡單的點(diǎn)擊事件一般不使用此方法)

代碼如下所示:

@Composable
fun UITest() {
    Text(text = "點(diǎn)擊我", modifier = Modifier
        .background(Color.Red)
        .height(60.dp)
        .fillMaxWidth()
        .clickable {
           //點(diǎn)擊事件
        }
    )
}

運(yùn)行程序,效果如下圖所示。

從效果圖中可以看出點(diǎn)擊陰影還是非常明顯的,如果我們想去掉陰影效果,只需要設(shè)置indication為null即可,修改后的代碼如下所示。

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

上面實(shí)現(xiàn)的Text文字不是垂直居中的,我們該如何使其內(nèi)容垂直居中呢?

Text文本如何垂直居中

你可能嘗試過textAlign屬性,但是很遺憾,textAlign屬性只能達(dá)到水平居中的效果,如果想要達(dá)到垂直居中的效果,需要在其外層包一層父組件,一般推薦Box。代碼如下所示。

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

如何移除Button的點(diǎn)擊陰影

這里的Button指的是具有onClick屬性的組件系列,因?yàn)檫@類組件有自己的onClick屬性,點(diǎn)擊時不會進(jìn)入clickable方法,所以不能使用Text組件的方式去處理。這里以TextButton為例,編寫代碼如下所示。

@Composable
fun ButtonTest() {
    TextButton(onClick = { }, modifier = Modifier
        .height(60.dp)
        .fillMaxWidth()
        .background(Color.Green)) {
        Text(text = "按鈕點(diǎn)擊")
    }
}

運(yùn)行程序代碼效果如下所示。

從圖可以看出有明顯水波紋效果。有這個效果的原因是在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)
    }
}

然后應(yīng)用這個theme即可,修改代碼如下所示。

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

這樣該主題下的按鈕點(diǎn)擊陰影效果便移除了。

Dialog寬度如何全屏

編寫一個Dialog,代碼如下所示。

@Composable
fun DialogDemo() {
    Dialog(
        onDismissRequest = { }
    ) {
        Column(
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
                .background(Color.White)) {
            Text(text = "我是標(biāo)題1111")
            Button(onClick = {
                //取消彈窗顯示
            }) {
                Text(text = "知道了")
            }
        }
    }
}

運(yùn)行程序效果如下圖所示。(請忽略他的丑~)

這里代碼中已經(jīng)設(shè)置了寬度為

fillMaxWidth(),Dialog的寬度依然不是全屏的,我們可以設(shè)置Dialog的properties屬性來達(dá)到全屏的效果。修改后的代碼如下所示。

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

修改后的效果如下圖所示。

這樣我們就達(dá)到Dialog寬度全屏的效果了,但之前有大佬說這種方式修改屏幕寬度后會有不可預(yù)期的問題,但我測試并未發(fā)現(xiàn)這個問題。

如何提升編碼效率

許多開發(fā)者說用Compose寫頁面感覺很慢,這是因?yàn)橐环矫鎸ompose的掌握不熟悉需要多寫多練,另一方面是沒有合理的利用Compose的Live Templates。

比如我們新建一個Compose函數(shù),如果你是從@Compose開始寫就會很慢,可以嘗試comp快捷鍵,創(chuàng)建新的函數(shù),如下圖所示。

還有諸如WR、WC等模版,如圖所示。

更多實(shí)時模板可以從Android Studio中查詢

我們也可以根據(jù)自己的編碼習(xí)慣創(chuàng)建自己的模板。

以上就是Android Jetpack Compose開發(fā)實(shí)用小技巧的詳細(xì)內(nèi)容,更多關(guān)于Android Jetpack Compose開發(fā)技巧的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論