Buttons are still very common and very important. The name of the button in Compose is the same as the name in the Android View called Button, let's take a look at its creation:
// 按钮的用法
Column {
Button(
modifier = Modifier.height(50.dp).width(150.dp), // 大小
onClick = {
// 点击事件
}) {
Text(text = "按钮") // 按钮文案，对应content
}
}
复制代码In the code, we create a Button and set its size, text and click event, the effect is as above. Let's look at the source code of the Button class again:
@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 // 内容
) {
// 省略...
}
复制代码The parameters of Button are still relatively few. Some parameters are repeated with the previous controls. Let's take a look at some unfamiliar parameters.
onclick
The onclick parameter is a block function, and it is not allowed to be empty. If the button has no click event, it has no meaning.
enabled
It is the enabled state of the control button, which is very common in Android View. When it is true, the button can be clicked normally, otherwise it cannot be clicked.
interactionSource
Represents the interaction flow of the button, and its type is MutableInteractionSource. If you want to observe the interaction and customize the appearance and behavior of the button in different interactions, you can create and pass the MutableInteractionSource that the button remembers. Similar to custom selector.xml in Android View
elevation
The height of the button in different states, the type is ButtonElevation, and the size of the shadow below the button can also be controlled. Take a look at its source code:
@Stable
interface ButtonElevation {
/**
* 按钮中使用的标准高度，具体取决于enabled和interactionSource
*
* @param 按钮是否可点击
* @param 按钮的InteractionSource
*/
@Composable
fun elevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
}
复制代码It is an interface. If you want to modify the height of the button, you need to implement this interface method to modify it. The default value of elevation is ButtonDefaults.elevation(), which is implemented as follows:
@Composable
fun elevation(
defaultElevation: Dp = 2.dp, // 启用按钮时的默认高度
pressedElevation: Dp = 8.dp, // 启用并按下按钮时的高度
disabledElevation: Dp = 0.dp // 禁用按钮时的高度
): ButtonElevation {
return remember(defaultElevation, pressedElevation, disabledElevation) {
DefaultButtonElevation(
defaultElevation = defaultElevation,
pressedElevation = pressedElevation,
disabledElevation = disabledElevation
)
}
}
复制代码DefaultButtonElevation implements the code of the ButtonElevation interface. It returns ButtonElevation, and the elevation receives some parameters. When you want to use the elevation, you can also use ButtonDefaults.elevation. You only need to configure the height of the specific situation. Let's see an example:
Column {
Button(
modifier = Modifier
.height(100.dp)
.width(250.dp), // 大小
onClick = {
// 点击事件
},
elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp)
) {
Text(text = "按钮") // 按钮文案，对应content
}
}
复制代码border
The border parameter type is BorderStroke, the default value is null, which can be used to draw the border of the button:
Column {
Button(
modifier = Modifier
.height(100.dp)
.width(250.dp), // 大小
onClick = {
// 点击事件
},
elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp),
border = BorderStroke(6.dp, Color.Yellow)
) {
Text(text = "按钮") // 按钮文案，对应content
}
}
复制代码We can see the 6dp border.
shape
I have learned about shape before. I won't say much here. Shape is very useful in buttons. In Android View, if we want to add a shape to a Button, we will customize a shape.xml; in Compose, Button does not need this, we See how to add:
Column {
Button(
modifier = Modifier
.height(100.dp)
.width(250.dp), // 大小
onClick = {
// 点击事件
},
elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp),
border = BorderStroke(6.dp, Color.Yellow),
shape = RoundedCornerShape(20.dp) // 添加的shape
) {
Text(text = "按钮") // 按钮文案，对应content
}
}
复制代码We see a button with a 20dp rounded corner size. Is not it simple.
colors
colors is used to set the color of the button in different states, the type is ButtonColors, it is also an interface.
@Stable
interface ButtonColors {
/**
* 背景颜色
*/
@Composable
fun backgroundColor(enabled: Boolean): State<Color>
/**
* 内容颜色
*/
@Composable
fun contentColor(enabled: Boolean): State<Color>
}
复制代码The colors in Button are ButtonDefaults.buttonColors() by default, let's take a look at buttonColors.
@Composable
fun buttonColors(
backgroundColor: Color = MaterialTheme.colors.primary, // 背景颜色
contentColor: Color = contentColorFor(backgroundColor), // 内容颜色
disabledBackgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
.compositeOver(MaterialTheme.colors.surface), // 未启用时的背景色
disabledContentColor: Color = MaterialTheme.colors.onSurface
.copy(alpha = ContentAlpha.disabled) // 未启用时内容颜色
): ButtonColors = DefaultButtonColors(
backgroundColor = backgroundColor,
contentColor = contentColor,
disabledBackgroundColor = disabledBackgroundColor,
disabledContentColor = disabledContentColor
)
复制代码Here is the same as elevation, we can use the default method of the system when we use it, we only need to pass in the value that needs to be modified to see how colors are used:
Column {
val context = LocalContext.current
Button(
modifier = Modifier
.height(100.dp)
.width(250.dp), // 大小
onClick = {
// 点击事件
Toast.makeText(context, "点击按钮", Toast.LENGTH_LONG).show()
},
elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp),
border = BorderStroke(6.dp, Color.Yellow),
shape = RoundedCornerShape(20.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.Green,
disabledBackgroundColor = Color.Yellow,
disabledContentColor = Color.Magenta
)
) {
Text(text = "按钮") // 按钮文案，对应content
}
}
复制代码contentPadding
Padding, the same as padding in Android View. Its type is PaddingValues, which is an interface. The default value of contentPadding in Button is ButtonDefaults.ContentPadding,
object ButtonDefaults {
private val ButtonHorizontalPadding = 16.dp
private val ButtonVerticalPadding = 8.dp
/**
* The default content padding used by [Button]
*/
val ContentPadding = PaddingValues(
start = ButtonHorizontalPadding, // 左
top = ButtonVerticalPadding, // 上
end = ButtonHorizontalPadding, // 右
bottom = ButtonVerticalPadding // 下
)
// 省略
}
复制代码There are default values, which are 16dp for left and right, and 8dp for top and bottom. If we want to modify it, we can directly use the PaddingValues method to set the corresponding padding. Compose provides several methods for us to use:
@Stable
fun PaddingValues(
start: Dp = 0.dp,
top: Dp = 0.dp,
end: Dp = 0.dp,
bottom: Dp = 0.dp
): PaddingValues = PaddingValuesImpl(start, top, end, bottom)
复制代码Use on:
// 按钮的用法
Column {
val context = LocalContext.current
Button(
modifier = Modifier
.height(100.dp)
.width(250.dp), // 大小
onClick = {
// 点击事件
Toast.makeText(context, "点击按钮", Toast.LENGTH_LONG).show()
},
elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp),
border = BorderStroke(6.dp, Color.Yellow),
shape = RoundedCornerShape(20.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.Green,
disabledBackgroundColor = Color.Yellow,
disabledContentColor = Color.Magenta
),
contentPadding = PaddingValues(8.dp)
) {
Text(text = "按钮") // 按钮文案，对应content
}
}
复制代码In fact, in general, the usage is still very simple, and other interesting usages can be used by yourself. The relevant code has been submitted to github github.com/Licarey/com…