快捷導(dǎo)航

Jetpack Compose按鈕組件使用實(shí)例詳細(xì)講解

更新時(shí)間：2023年04月17日 10:39:13 作者：海塔燈

這篇文章主要介紹了Jetpack Compose按鈕組件使用實(shí)例，按鈕組件Button是用戶和系統(tǒng)交互的重要組件之一，它按照Material Design風(fēng)格實(shí)現(xiàn)，我們先看下Button的參數(shù)列表，通過參數(shù)列表了解下Button的整體功能

概述

按鈕組件Button是用戶和系統(tǒng)交互的重要組件之一，它按照Material Design風(fēng)格實(shí)現(xiàn)，我們先看下Button的參數(shù)列表，通過參數(shù)列表了解下Button的整體功能

@Composable
fun Button(
    onClick: () -> Unit, // 點(diǎn)擊按鈕時(shí)的回調(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組件的第一個(gè)參數(shù)onClick是必填項(xiàng)，這是按鈕組件最重要的功能，通過回調(diào)響應(yīng)用戶的點(diǎn)擊事件，最后一個(gè)參數(shù)content也是必填項(xiàng)，展示按鈕的內(nèi)容。Compose 的Button組件默認(rèn)沒有任何UI，它僅僅是一個(gè)響應(yīng)onClick的容器，它的UI需要在content中通過其他組件實(shí)現(xiàn)

1.普通Button按鈕

假設(shè)我們需要?jiǎng)?chuàng)建一個(gè)顯示文字的Button，代碼如下：

  @Composable
    fun ButtonDemo()
    {
        Button(onClick = { /*TODO*/ }) {
            Text(text = "OK")
        }
    }

運(yùn)行結(jié)果：

假如我們想在按鈕文字的左邊加一個(gè)圖標(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”的左邊加了一個(gè)打勾的圖標(biāo)了

運(yùn)行結(jié)果：

在傳統(tǒng)的Button中，有一個(gè)很好用的功能，就是selector，即點(diǎn)擊按鈕的時(shí)候，可以自定義按鈕的點(diǎn)擊效果，在Compose中當(dāng)然也可以，Button中的參數(shù)interactionSource就是做這個(gè)事情的。interactionSource通過以下的桑格函數(shù)獲取當(dāng)前組件的狀態(tài)的：

interactionSource.collectIsPressedAsState()：判斷是否是按下狀態(tài)

interactionSource.collectIsFocusedAsState()：判斷是否是獲取焦點(diǎn)的狀態(tài)

interactionSource.collectIsDraggedAsState()：判斷是否拖動(dòng)

我們可以通過實(shí)例來看下如何使用interacrtionSource來實(shí)現(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")
        }
    }

上面的代碼實(shí)現(xiàn)的是按鈕在通常情況下邊框?yàn)榧t色，點(diǎn)擊的時(shí)候邊框?yàn)榫G色

運(yùn)行結(jié)果：

Button 并非唯一的可點(diǎn)擊組件，理論上任何Compose組件都可以通過Modifier.clickable修飾符制作成可點(diǎn)擊組件，而當(dāng)Button被點(diǎn)擊的時(shí)候，需要額外進(jìn)行一些事件響應(yīng)處理，比如水波紋的處理，Button 的onClick在底層是通過覆蓋Modifier.clickable實(shí)現(xiàn)的，所以我們使用button時(shí)不要為Button覆蓋Modifier.clickable.

2.IconButton圖標(biāo)按鈕

IconButton組件實(shí)際上只是Button組件的簡(jiǎn)單封裝，它就是一個(gè)可以點(diǎn)擊的圖標(biāo)，它一般用于應(yīng)用欄中的導(dǎo)航或者其他的行為，我們需要在IconButton組件里面提供一個(gè)圖標(biāo)組件，這個(gè)圖標(biāo)組件的尺寸一般是24x24dp,看下面的例子：

   @Composable
    fun IconButtonDemo()
    {
        IconButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Filled.Favorite,
                contentDescription = null)
        }
    }

運(yùn)行結(jié)果

簡(jiǎn)單例子，不多講解

3.FloatingActionButton懸浮按鈕

FloatingActionButton懸浮按鈕代表當(dāng)前頁(yè)面的主要行為，它也需要我們提供一個(gè)Icon組件，代碼如下：

    @Composable
    fun FloatButtonDemo()
    {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null)
        }
    }

運(yùn)行結(jié)果：

懸浮按鈕其實(shí)還有一個(gè)帶文字的擴(kuò)展懸浮按鈕ExtendedFloatingActionButton組件，使用方法如下：

   @Composable
    fun ExtFloatButtonDemo(){
        ExtendedFloatingActionButton(icon = {Icon(imageVector = Icons.Filled.Favorite, contentDescription = null ) },
            text = { Text(text = "我喜歡的") },
            onClick = { /*TODO*/ })
    }

運(yùn)行結(jié)果：