您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Jetpack Compose按鈕組件如何使用”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
按鈕組件Button是用戶和系統(tǒng)交互的重要組件之一,它按照Material Design風格實現(xiàn),我們先看下Button的參數(shù)列表,通過參數(shù)列表了解下Button的整體功能
@Composable fun Button( onClick: () -> Unit, // 點擊按鈕時的回調(diào) modifier: Modifier = Modifier, // 修飾符 enabled: Boolean = true, // 是否啟用按鈕 interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, elevation: ButtonElevation? = ButtonDefaults.elevation(), // 按鈕的陰影 shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = ButtonDefaults.buttonColors(), contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit )
Button組件的第一個參數(shù)onClick是必填項,這是按鈕組件最重要的功能,通過回調(diào)響應(yīng)用戶的點擊事件,最后一個參數(shù)content也是必填項,展示按鈕的內(nèi)容。Compose 的Button組件默認沒有任何UI,它僅僅是一個響應(yīng)onClick的容器,它的UI需要在content中通過其他組件實現(xiàn)
假設(shè)我們需要創(chuàng)建一個顯示文字的Button,代碼如下:
@Composable fun ButtonDemo() { Button(onClick = { /*TODO*/ }) { Text(text = "OK") } }
運行結(jié)果:
假如我們想在按鈕文字的左邊加一個圖標,代碼如下
@Composable fun ButtonIconDemo(){ Button(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize)) Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) Text(text = "OK") } }
這樣就在文字“OK”的左邊加了一個打勾的圖標了
運行結(jié)果:
在傳統(tǒng)的Button中,有一個很好用的功能,就是selector,即點擊按鈕的時候,可以自定義按鈕的點擊效果,在Compose中當然也可以,Button中的參數(shù)interactionSource就是做這個事情的。interactionSource通過以下的桑格函數(shù)獲取當前組件的狀態(tài)的:
interactionSource.collectIsPressedAsState(): 判斷是否是按下狀態(tài)
interactionSource.collectIsFocusedAsState():判斷是否是獲取焦點的狀態(tài)
interactionSource.collectIsDraggedAsState():判斷是否拖動
我們可以通過實例來看下如何使用interacrtionSource來實現(xiàn)類似傳統(tǒng)button的selector效果,代碼如下:
@Composable fun InteractionButtonDemo() { val interact = remember { MutableInteractionSource() } val pressState = interact.collectIsPressedAsState() val borderColor = if(pressState.value) Color.Green else Color.Red Button(onClick = { /*TODO*/ }, border = BorderStroke(2.dp, color = borderColor), interactionSource = interact ) { Text(text = "Long click") } }
上面的代碼實現(xiàn)的是按鈕在通常情況下邊框為紅色,點擊的時候邊框為綠色
運行結(jié)果:
Button 并非唯一的可點擊組件,理論上任何Compose組件都可以通過Modifier.clickable修飾符制作成可點擊組件,而當Button被點擊的時候,需要額外進行一些事件響應(yīng)處理,比如水波紋的處理,Button 的onClick在底層是通過覆蓋Modifier.clickable實現(xiàn)的,所以我們使用button時不要為Button覆蓋Modifier.clickable.
IconButton組件實際上只是Button組件的簡單封裝,它就是一個可以點擊的圖標,它一般用于應(yīng)用欄中的導(dǎo)航或者其他的行為,我們需要在IconButton組件里面提供一個圖標組件,這個圖標組件的尺寸一般是24x24dp,看下面的例子:
@Composable fun IconButtonDemo() { IconButton(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.Favorite, contentDescription = null) } }
運行結(jié)果
簡單例子,不多講解
FloatingActionButton懸浮按鈕代表當前頁面的主要行為,它也需要我們提供一個Icon組件,代碼如下:
@Composable fun FloatButtonDemo() { FloatingActionButton(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null) } }
運行結(jié)果:
懸浮按鈕其實還有一個帶文字的擴展懸浮按鈕ExtendedFloatingActionButton組件,使用方法如下:
@Composable fun ExtFloatButtonDemo(){ ExtendedFloatingActionButton(icon = {Icon(imageVector = Icons.Filled.Favorite, contentDescription = null ) }, text = { Text(text = "我喜歡的") }, onClick = { /*TODO*/ }) }
運行結(jié)果:
“Jetpack Compose按鈕組件如何使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。