Android?Jetpack?Compose開發(fā)實用小技巧
前言
在Compose開發(fā)的過程中，我們會經(jīng)常遇到一些看起來很簡單卻不知道如何處理的小問題，比如去除點擊陰影、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 {
//點擊事件
}
)
}
運行程序，效果如下圖所示。
從效果圖中可以看出點擊陰影還是非常明顯的，如果我們想去掉陰影效果，只需要設(shè)置indication為null即可，修改后的代碼如下所示。
@Composable
fun UITest() {
Text(text = "點擊我", modifier = Modifier
.background(Color.Red)
.height(60.dp)
.fillMaxWidth()
.clickable(indication = null, interactionSource = remember {
MutableInteractionSource()
}) {
}
)
}
上面實現(xiàn)的Text文字不是垂直居中的，我們該如何使其內(nèi)容垂直居中呢？
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)
}
}
然后應(yīng)用這個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 = "我是標(biāo)題1111")
Button(onClick = {
//取消彈窗顯示
}) {
Text(text = "知道了")
}
}
}
}
運行程序效果如下圖所示。（請忽略他的丑～）
這里代碼中已經(jīng)設(shè)置了寬度為
fillMaxWidth()，Dialog的寬度依然不是全屏的，我們可以設(shè)置Dialog的properties屬性來達到全屏的效果。修改后的代碼如下所示。
Dialog(
onDismissRequest = { },
properties = DialogProperties(
usePlatformDefaultWidth = false
),
)
修改后的效果如下圖所示。
這樣我們就達到Dialog寬度全屏的效果了，但之前有大佬說這種方式修改屏幕寬度后會有不可預(yù)期的問題，但我測試并未發(fā)現(xiàn)這個問題。
如何提升編碼效率
許多開發(fā)者說用Compose寫頁面感覺很慢，這是因為一方面對Compose的掌握不熟悉需要多寫多練，另一方面是沒有合理的利用Compose的Live Templates。
比如我們新建一個Compose函數(shù)，如果你是從@Compose開始寫就會很慢，可以嘗試comp快捷鍵，創(chuàng)建新的函數(shù)，如下圖所示。
還有諸如WR、WC等模版，如圖所示。
更多實時模板可以從Android Studio中查詢
我們也可以根據(jù)自己的編碼習(xí)慣創(chuàng)建自己的模板。
以上就是Android Jetpack Compose開發(fā)實用小技巧的詳細內(nèi)容，更多關(guān)于Android Jetpack Compose開發(fā)技巧的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要給大家介紹了一個吸頂Item的簡單實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Android adb命令中pm工具的作用及用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Android開發(fā)之Parcel機制,實例分析了Parcel機制的原理與實現(xiàn)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了Android編程之動態(tài)壁紙實現(xiàn)方法,以實例形式分析了Android動態(tài)壁紙的原理與實現(xiàn)步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
Android將項目導(dǎo)出為Library并在項目中使用教程
這篇文章主要介紹了Android將項目導(dǎo)出為Library并在項目中使用教程，本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細介紹了Android如何通過自定義View實現(xiàn)水波紋擴散效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-08-08
這篇文章主要介紹了如何在Android studio 中使用單例模式，幫助大家更好的理解和學(xué)習(xí)Android開發(fā)，感興趣的朋友可以了解下2021-03-03
本篇文章主要介紹了詳解Android跨進程IPC通信AIDL機制原理，詳細的介紹了AIDL的概念和使用，具有一定的參考價值，有興趣的可以了解一下2018-01-01
Android實現(xiàn)簡單的popupwindow提示框
這篇文章主要為大家詳細介紹了Android實現(xiàn)簡單的popupwindow提示框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
Android編程實現(xiàn)3D旋轉(zhuǎn)效果實例
這篇文章主要介紹了Android編程實現(xiàn)3D旋轉(zhuǎn)效果的方法,基于Android的Camera類實現(xiàn)坐標(biāo)變換達到圖片3D旋轉(zhuǎn)效果,需要的朋友可以參考下2016-01-01