Jetpack Composes 学习【07】 Button

Button

1. Button属性

了解Button还是非常有必要的，

@OptIn(ExperimentalMaterialApi::class)
@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
)

Compose 的 ​​Button​​ 是基于 Material Design 理念设计的

2. 使用示例

2.1 基本使用

以下是简单创建一个默认的 ​​Button​​ 代码：

import androidx.compose.material.Button
import androidx.compose.material.Text

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

效果如图所示：

也许您想添加图标在文字的旁边，也只需：

package com.example.composestudy

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent

import androidx.compose.foundation.layout.*

import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview


import androidx.compose.ui.Modifier

import com.example.composestudy.ui.theme.ComposestudyTheme


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme {
                ButtonDemo()
            }
        }
    }
}



@Composable
fun ButtonDemo() {
    Button(onClick = { /*TODO*/ }) {
        Icon(
            // Material 库中的图标，有 Filled, Outlined, Rounded, Sharp, Two Tone 等
            Icons.Filled.Favorite,
            contentDescription = null,
            modifier = Modifier.size(ButtonDefaults.IconSize)
        )
        // 添加间隔
        Spacer(Modifier.size(ButtonDefaults.IconSpacing))
        Text("喜欢")
    }
}

@Preview(name = "Light Mode")

@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        ButtonDemo()
    }
}

2.2 不同点击状态下的按钮状态

创建 ​​Data class​​ 来记录不同状态下按钮的样式

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

使用 ​​​MutableInteractionSource()​​​ 获取状态，根据不同状态创建样式

// 获取按钮的状态
val interactionState = remember { MutableInteractionSource() }

// 使用 Kotlin 的解构方法
val (text, textColor, buttonColor) = when {
    interactionState.collectIsPressedAsState().value  -> ButtonState("Just Pressed", Color.Red, Color.Black)
    else -> ButtonState( "Just Button", Color.White, Color.Red)
}

​​Button​​ 的实现

package com.example.composestudy

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material.*

import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview


import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

import com.example.composestudy.ui.theme.ComposestudyTheme


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme {
                ButtonDemo()
            }
        }
    }
}

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


@Composable
fun ButtonDemo() {
    // 获取按钮的状态
    val interactionState = remember { MutableInteractionSource() }

// 使用 Kotlin 的解构方法
    val (text, textColor, buttonColor) = when {
        interactionState.collectIsPressedAsState().value  -> ButtonState("按钮1", Color.Red, Color.Black)
        else -> ButtonState( "按钮", Color.White, Color.Red)
    }
    Button(
        onClick = { /*TODO*/ },
        interactionSource = interactionState,
        elevation = null,
        shape = RoundedCornerShape(50),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = buttonColor,
        ),
        modifier = Modifier.width(IntrinsicSize.Min).height(IntrinsicSize.Min)
    ) {
        Text(
            text = text, color = textColor
        )
    }
}

@Preview(name = "Light Mode")

@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        ButtonDemo()
    }
}

更多

Button 参数详情