Android?Jetpack?Compose開(kāi)發(fā)實(shí)用小技巧
前言
在Compose開(kāi)發(fā)的過(guò)程中,我們會(huì)經(jīng)常遇到一些看起來(lái)很簡(jiǎn)單卻不知道如何處理的小問(wèn)題,比如去除點(diǎn)擊陰影、Dialog全屏等問(wèn)題,本文記錄了這些常見(jiàn)小問(wèn)題的處理方式。如有更好方案歡迎大佬們交流探討~

實(shí)用小技巧
如何移除View點(diǎn)擊陰影
這里的View指的是除了Button系列的之外,如Button、TextButton等,也就是自身沒(méi)有onClick屬性的。這個(gè)后面會(huì)再次提到。
我們編寫(xiě)一個(gè)高度為60dp,寬度滿屏的TextView,使用Modifier的clickable屬性為其添加點(diǎn)擊事件
(注意:如果不使用clickable屬性添加,而是使用pointerInput屬性可不處理,但簡(jiǎn)單的點(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文字不是垂直居中的,我們?cè)撊绾问蛊鋬?nèi)容垂直居中呢?
Text文本如何垂直居中
你可能嘗試過(guò)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)擊時(shí)不會(huì)進(jìn)入clickable方法,所以不能使用Text組件的方式去處理。這里以TextButton為例,編寫(xiě)代碼如下所示。
@Composable
fun ButtonTest() {
TextButton(onClick = { }, modifier = Modifier
.height(60.dp)
.fillMaxWidth()
.background(Color.Green)) {
Text(text = "按鈕點(diǎn)擊")
}
}
運(yùn)行程序代碼效果如下所示。

從圖可以看出有明顯水波紋效果。有這個(gè)效果的原因是在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
)
我們修改這個(gè)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)用這個(gè)theme即可,修改代碼如下所示。
ComposeDoTheme {
CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
//
}
}
這樣該主題下的按鈕點(diǎn)擊陰影效果便移除了。
Dialog寬度如何全屏
編寫(xiě)一個(gè)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)行程序效果如下圖所示。(請(qǐng)忽略他的丑~)

這里代碼中已經(jīng)設(shè)置了寬度為
fillMaxWidth(),Dialog的寬度依然不是全屏的,我們可以設(shè)置Dialog的properties屬性來(lái)達(dá)到全屏的效果。修改后的代碼如下所示。
Dialog(
onDismissRequest = { },
properties = DialogProperties(
usePlatformDefaultWidth = false
),
)
修改后的效果如下圖所示。

這樣我們就達(dá)到Dialog寬度全屏的效果了,但之前有大佬說(shuō)這種方式修改屏幕寬度后會(huì)有不可預(yù)期的問(wèn)題,但我測(cè)試并未發(fā)現(xiàn)這個(gè)問(wèn)題。
如何提升編碼效率
許多開(kāi)發(fā)者說(shuō)用Compose寫(xiě)頁(yè)面感覺(jué)很慢,這是因?yàn)橐环矫鎸?duì)Compose的掌握不熟悉需要多寫(xiě)多練,另一方面是沒(méi)有合理的利用Compose的Live Templates。
比如我們新建一個(gè)Compose函數(shù),如果你是從@Compose開(kāi)始寫(xiě)就會(huì)很慢,可以嘗試comp快捷鍵,創(chuàng)建新的函數(shù),如下圖所示。

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

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

我們也可以根據(jù)自己的編碼習(xí)慣創(chuàng)建自己的模板。
以上就是Android Jetpack Compose開(kāi)發(fā)實(shí)用小技巧的詳細(xì)內(nèi)容,更多關(guān)于Android Jetpack Compose開(kāi)發(fā)技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android小知識(shí)之OkHttp的2種請(qǐng)求方式詳解
OkHttp可以說(shuō)是如今最為流行的網(wǎng)絡(luò)請(qǐng)求框架之一,下面這篇文章主要給大家介紹了關(guān)于Android小知識(shí)之OkHttp的2種請(qǐng)求方式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2018-10-10
Gradle學(xué)習(xí)教程之部署上傳項(xiàng)目詳解
這篇文章主要給大家介紹了關(guān)于Gradle學(xué)習(xí)教程之部署上傳項(xiàng)目的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
Android自定義Camera實(shí)現(xiàn)拍照小功能
這篇文章主要為大家詳細(xì)介紹了Android自定義Camera實(shí)現(xiàn)拍照小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
Android編程實(shí)現(xiàn)簡(jiǎn)單文件瀏覽器功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)簡(jiǎn)單文件瀏覽器功能,結(jié)合實(shí)例形式分析了Android文件管理器的布局、文件與目錄的遍歷、權(quán)限控制等相關(guān)操作技巧,需要的朋友可以參考下2018-01-01
Android AsyncTask實(shí)現(xiàn)異步處理任務(wù)的方法詳解
這篇文章主要介紹了Android AsyncTask實(shí)現(xiàn)異步處理任務(wù)的方法詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
android開(kāi)發(fā)教程之wifi開(kāi)發(fā)示例
這篇文章主要介紹了android開(kāi)發(fā)教程之wifi開(kāi)發(fā)示例,需要的朋友可以參考下2014-03-03
eclipse搭建android開(kāi)發(fā)環(huán)境詳細(xì)步驟
本文主要介紹了eclipse搭建android開(kāi)發(fā)環(huán)境詳細(xì)步驟,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03

