Jetpack Compose按鈕組件使用實例詳細講解

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

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

概述

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

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

1.普通Button按鈕

假設我們需要創(chuàng)建一個顯示文字的Button，代碼如下：

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

運行結果：

假如我們想在按鈕文字的左邊加一個圖標，代碼如下

    @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”的左邊加了一個打勾的圖標了

運行結果：

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

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

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

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

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

上面的代碼實現的是按鈕在通常情況下邊框為紅色，點擊的時候邊框為綠色

運行結果：

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

2.IconButton圖標按鈕

IconButton組件實際上只是Button組件的簡單封裝，它就是一個可以點擊的圖標，它一般用于應用欄中的導航或者其他的行為，我們需要在IconButton組件里面提供一個圖標組件，這個圖標組件的尺寸一般是24x24dp,看下面的例子：

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

運行結果

簡單例子，不多講解

3.FloatingActionButton懸浮按鈕

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

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

運行結果：

懸浮按鈕其實還有一個帶文字的擴展懸浮按鈕ExtendedFloatingActionButton組件，使用方法如下：

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

運行結果：