Jetpack Compose - Button

技術標籤：Jetpack-Compose Jetpack Compose Button IconButton OutlindButton

Jetpack Compose - Button

關於Button官方給出了很多種樣式，有Button、IconButton、IconToggleButton、TextButton、OutlinedButton等，還有一個RadioButton我們會單獨開文章去講解。

1、Button

1.1、屬性一覽

我們先來看下 Button 的屬性，連結在這裡：

@Composable fun Button(
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    enabled: Boolean = true, 
    interactionState: InteractionState = remember { InteractionState() }, 
    elevation: ButtonElevation? = ButtonConstants.defaultElevation(), 
    shape: Shape = MaterialTheme.shapes.small, 
    border: BorderStroke? = null, 
    colors: ButtonColors = ButtonConstants.defaultButtonColors(), 
    contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding, 
    content: RowScope.() -> Unit
): Unit

onClick: () -> Unit
單擊按鈕的事件回撥，如果不提供該回調，那麼按鈕將變為禁用狀態；
modifier: Modifier = Modifier
修飾符
enabled: Boolean = true
控制按鈕的啟用狀態。如果為false，則該按鈕將不可單擊；
interactionState: InteractionState = remember { InteractionState() }
表示互動的狀態資訊，也就是相當於我們之前給按鈕設定的各種selector，來實現普通、點選效果等，下文程式碼詳解；
elevation: ButtonElevation? = ButtonConstants.defaultElevation()

按鈕的陰影大小效果，設定為null不顯示陰影效果，一般我們開發中應該也不會使用這種陰影效果。
shape: Shape = MaterialTheme.shapes.small
定義按鈕的形狀及陰影等效果；
border: BorderStroke? = null
設定按鈕的邊框（目前alpha07版本的設定border後效果並不好，按鈕四個角落還會顯示出來部分按鈕預設的背景色）；
colors: ButtonColors = ButtonConstants.defaultButtonColors()
用於在不同狀態下設定按鈕的背景色以及內容色；
contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding
容器和控制元件之間的距離值
content: RowScope.() -> Unit
關於這個引數官方文件居然沒有講解，這個是按鈕的內容，什麼意思呢？你想想看按鈕包含文字資訊對吧，也可能包含圖示資訊吧，所以這個引數就是讓你組合你需要的控制元件的，注意它是橫向的。

1.2、使用示例

首先顯示一個最簡單的Button程式碼如下，該按鈕應用的都是預設配置項：

@Composable
fun ButtonDemo() {
    Button(
        onClick = { },
    ) {
        Text(
            text = "這是一個按鈕",
        )
    }
}

在這裡插入圖片描述
這就是一個組合了一個簡單文字的按鈕，平常我們開發的時候需要的都是有點選效果的啊，還有圓角啊各種的，下面就一起來解決。
首先根據上文的屬性，我們需要知道按鈕當前的狀態，是預設狀態還是點選狀態，對的，就是InteractionState()這個東西，目前只有預設、Dragged和Pressed幾種狀態。具體用法請看下文程式碼val interactionState = remember { InteractionState() }，目前官方寫法是這樣的，但是不清楚api是否還會有變更。我們拿到這個狀態後需要“列舉”這些狀態值，根據不同的狀態設定不同的文字，文字顏色，按鈕顏色等。所以我們新建了一個data類來記錄這些屬性不同狀態下按鈕的各種值。
data類如下：

data class ButtonState(var text: String, var textColor: Color, var buttonColor: Color)

然後在列舉這些值的時候，我們建立相應的按鈕狀態物件，下面是kotlin的解構用法，僅為示例效果，大家可以採用其他方式實現。

給按鈕設定顏色的時候需要設定解構出來的按鈕顏色值，給文字也設定解構出來的文字和文字顏色。
最後我們再給按鈕新增一個圓角的修飾符屬性，程式碼如下所示：

@Composable
fun ButtonDemo() {

    val interactionState = remember { InteractionState() }

    val (text, textColor, buttonColor) = when {
        Interaction.Pressed in interactionState -> ButtonState("Just Pressed", Color.Red, Color.Black)
        else -> ButtonState( "Just Button", Color.White, Color.Red)
    }

    Button(
        onClick = { },
        interactionState = interactionState,
        elevation = null,
        colors = ButtonConstants.defaultButtonColors(
            backgroundColor = buttonColor,
            disabledBackgroundColor = Color.Gray,
        ),
        modifier = Modifier
            .clip(RoundedCornerShape(50))
    ) {
        Text(
            text = text,
            color = textColor
        )
    }
}

上面程式碼中我們去除了按鈕的陰影效果，然後實現的點選效果如下，預設紅底白字，點選時變為黑底紅字：
在這裡插入圖片描述

2、IconButton

2.1、屬性一覽：

相比Button還是少了很多屬性的：

@Composable fun IconButton(
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    enabled: Boolean = true, 
    interactionState: InteractionState = remember { InteractionState() }, 
    content: () -> Unit
): Unit

onClick: () -> Unit
點選回撥；
modifier: Modifier = Modifier
修飾符；
enabled: Boolean = true
是否被禁用；
interactionState: InteractionState = remember { InteractionState() }
同上文Button中相關屬性；
content: () -> Unit
要在IconButton內部繪製的內容（圖示）。通常是一個圖示。

2.2、使用示例

其實我一開始使用的時候我看它名字覺得可能是可以在按鈕的左側新增一個Icon圖示的特殊按鈕，然而事實並不是這樣，官方文件是這麼寫的：

IconButton是可單擊的圖示，用於表示操作。 IconButton的整體最小觸控目標大小為48 x 48dp，以滿足輔助功能準則。內容位於IconButton內部。

最後來了一句內容位於IconButton的內部，什麼意思呢，來看下面的程式碼：

@Composable
fun IconButtonDemo() {
    IconButton(
        onClick = {},
    ) {
        Icon(Icons.Filled.Favorite)
        Text(text = "這是一個按鈕")
    }
}

然後預覽效果是這樣的：
在這裡插入圖片描述
所以這個IconButton你就只用來展示單個可點選的圖示就好了，如果需要做 按鈕中包含圖示和文字的效果 建議直接使用Button然後在其content中組合這兩個控制元件即可。

3、IconToggleButton

官方描述為：具有兩個狀態的IconButton，我覺得可以是那種點贊和取消點讚的圖示，並不是那種開關型別的控制元件，因為關於開關有Switch。

3.1、屬性一覽

@Composable fun IconToggleButton(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionState: InteractionState = remember { InteractionState() },
content: () -> Unit
): Unit

屬性同樣不多，我們只介紹一個特殊的引數：

onCheckedChange: (Boolean) -> Unit
選擇此圖示時要呼叫的回撥；

3.2、使用示例

這就很簡單了，主要在於需要一個狀態，但是這個狀態卻不是普通的布林值，重點是這個val checkedState = remember { mutableStateOf(true) }，這就表示這個狀態是可以被觀察和記錄的，只要更新，Compose元件就會進行相應的變化：

@Composable
fun IconToggleButtonDemo() {

    val checkedState = remember { mutableStateOf(true) }

    IconToggleButton(
        checked = checkedState.value,
        onCheckedChange = {
            Log.e("Button", "點選了：$it")
            checkedState.value = it
        },
    ) {
        Icon(
            asset = Icons.Filled.Favorite,
            tint = if (checkedState.value) {
                Color.Red
            } else {
                Color.Gray
            }
        )
    }
}

上述程式碼執行後就可以看到預設狀態是紅色的喜歡效果，點選後切換為灰色的喜歡效果，這裡不再展示效果圖了。

Jetpack Compose - Button