持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
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()
}
}
