Jetpack Compose按鈕組件使用實例詳細(xì)講解
概述
按鈕組件Button是用戶和系統(tǒng)交互的重要組件之一,它按照Material Design風(fēng)格實現(xiàn),我們先看下Button的參數(shù)列表,通過參數(shù)列表了解下Button的整體功能
@Composable fun Button( onClick: () -> Unit, // 點(diǎn)擊按鈕時的回調(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)用戶的點(diǎn)擊事件,最后一個參數(shù)content也是必填項,展示按鈕的內(nèi)容。Compose 的Button組件默認(rèn)沒有任何UI,它僅僅是一個響應(yīng)onClick的容器,它的UI需要在content中通過其他組件實現(xiàn)
1.普通Button按鈕
假設(shè)我們需要創(chuàng)建一個顯示文字的Button,代碼如下:
@Composable fun ButtonDemo() { Button(onClick = { /*TODO*/ }) { Text(text = "OK") } }
運(yùn)行結(jié)果:
假如我們想在按鈕文字的左邊加一個圖標(biāo),代碼如下
@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”的左邊加了一個打勾的圖標(biāo)了
運(yùn)行結(jié)果:
在傳統(tǒng)的Button中,有一個很好用的功能,就是selector,即點(diǎn)擊按鈕的時候,可以自定義按鈕的點(diǎn)擊效果,在Compose中當(dāng)然也可以,Button中的參數(shù)interactionSource就是做這個事情的。interactionSource通過以下的桑格函數(shù)獲取當(dāng)前組件的狀態(tài)的:
interactionSource.collectIsPressedAsState(): 判斷是否是按下狀態(tài)
interactionSource.collectIsFocusedAsState():判斷是否是獲取焦點(diǎn)的狀態(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)的是按鈕在通常情況下邊框為紅色,點(diǎn)擊的時候邊框為綠色
運(yùn)行結(jié)果:
Button 并非唯一的可點(diǎn)擊組件,理論上任何Compose組件都可以通過Modifier.clickable修飾符制作成可點(diǎn)擊組件,而當(dāng)Button被點(diǎn)擊的時候,需要額外進(jìn)行一些事件響應(yīng)處理,比如水波紋的處理,Button 的onClick在底層是通過覆蓋Modifier.clickable實現(xiàn)的,所以我們使用button時不要為Button覆蓋Modifier.clickable.
2.IconButton圖標(biāo)按鈕
IconButton組件實際上只是Button組件的簡單封裝,它就是一個可以點(diǎn)擊的圖標(biāo),它一般用于應(yīng)用欄中的導(dǎo)航或者其他的行為,我們需要在IconButton組件里面提供一個圖標(biāo)組件,這個圖標(biāo)組件的尺寸一般是24x24dp,看下面的例子:
@Composable fun IconButtonDemo() { IconButton(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.Favorite, contentDescription = null) } }
運(yùn)行結(jié)果
簡單例子,不多講解
3.FloatingActionButton懸浮按鈕
FloatingActionButton懸浮按鈕代表當(dāng)前頁面的主要行為,它也需要我們提供一個Icon組件,代碼如下:
@Composable fun FloatButtonDemo() { FloatingActionButton(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null) } }
運(yùn)行結(jié)果:
懸浮按鈕其實還有一個帶文字的擴(kuò)展懸浮按鈕ExtendedFloatingActionButton組件,使用方法如下:
@Composable fun ExtFloatButtonDemo(){ ExtendedFloatingActionButton(icon = {Icon(imageVector = Icons.Filled.Favorite, contentDescription = null ) }, text = { Text(text = "我喜歡的") }, onClick = { /*TODO*/ }) }
運(yùn)行結(jié)果:
總結(jié)
以上就是今天的內(nèi)容,本文主要介紹了按鈕組件的使用,以及圖標(biāo)按鈕和懸浮按鈕,這些按鈕在開發(fā)中調(diào)試和實現(xiàn)實際的需求都很有用,建議讀者多做練習(xí)。慢慢使用到自己的項目當(dāng)中去
到此這篇關(guān)于Jetpack Compose按鈕組件使用實例詳細(xì)講解的文章就介紹到這了,更多相關(guān)Jetpack Compose按鈕組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android?AIDL通信DeadObjectException解決方法示例
這篇文章主要為大家介紹了Android?AIDL通信DeadObjectException解決的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03詳解Android的網(wǎng)絡(luò)數(shù)據(jù)存儲
LeanCloud是一種簡單高效的數(shù)據(jù)和文件存儲服務(wù),本文主要介紹了利用LeanCloud來進(jìn)行網(wǎng)絡(luò)數(shù)據(jù)的存儲的實現(xiàn)方法。具有很好的參考價值,需要的朋友一起來看下吧2016-12-12Gradle?Build?Cache引發(fā)的Task緩存編譯問題
這篇文章主要為大家介紹了Gradle?Build?Cache引發(fā)的Task緩存編譯問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-06-06Android ListView ImageView實現(xiàn)單選按鈕實例
這篇文章主要介紹了Android ListView ImageView實現(xiàn)單選按鈕的相關(guān)資料,需要的朋友可以參考下2016-10-10Android 使用FragmentTabHost實現(xiàn)底部菜單功能
這篇文章主要介紹了Android 使用FragmentTabHost實現(xiàn)底部菜單功能,詳細(xì)給大家介紹了FragmentTabHost配合Fragment的使用方法,需要的朋友可以參考下2017-12-12