Buttons are still very common and very important. The name of the Compose Button is the same as the name of the Android View Button, so let’s look at its creation:

Column {Button(modifier = modifier.height (50.dp).width(150.dp), Column {Button(modifier = modifier.height (50.dp).width(150.dp), // size onClick = {// click event}) {Text(Text = "button ") // button Text, corresponding content}}Copy the code

In this code we create a Button and set its size, copy, and click event to look like this. Let’s look at the source of the Button class:

@ OptIn (ExperimentalMaterialApi: : class) @ Composable fun Button (onClick () - > Unit, / / click event modifier: Modifier = Modifier, // Enabled: Boolean = true, // Whether to click interactionSource: MutableInteractionSource = remember {MutableInteractionSource()}, // = ButtonDefaults. Elevation (), / / the shadow and the height of the different stages of shape: shape = MaterialTheme. Shapes. Small, / / shape border: BorderStroke? = null, / / border colors: ButtonColors = ButtonDefaults. ButtonColors (), / / different states the background and content of color contentPadding: PaddingValues = ButtonDefaults ContentPadding, / / padding content: @ Composable RowScope. () - > Unit) {/ / / / content to omit... }Copy the code

Button parameters are relatively few, some of the parameters and the previous controls repeat not to mention, let’s look at a few strange parameters have not seen.

onclick

The onclick argument is a block function that cannot be empty, and the button has no meaning without a click event.

enabled

Is the enabled state of the control button, which is already common in Android View. When true, the button can be clicked normally, otherwise it cannot be clicked.

interactionSource

Represents the interaction flow of the button, of type 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 a 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 be controlled.

@stable Interface ButtonElevation {/** * the standard height used in buttons, * @composable fun elevation(Enabled: enabled) @composable fun elevation(enabled: enabled) Boolean, interactionSource: InteractionSource): State<Dp> }Copy the code

It is an interface, and if you want to change the height of the button, you need to implement the interface method to change it. The default value for elevation is buttondefaults.elevation (), which is implemented as follows:

@composable fun Elevation (defaultElevation: Dp = 2.dp, // Enable button default height pressedElevation: Dp = 8.dp, // disabledElevation: Dp = 0.dp // Height when the button is disabled): ButtonElevation { return remember(defaultElevation, pressedElevation, disabledElevation) { DefaultButtonElevation( defaultElevation = defaultElevation, pressedElevation = pressedElevation, disabledElevation = disabledElevation ) } }Copy the code

DefaultButtonElevation Is the code that implements the ButtonElevation interface. It returns ButtonElevation, and elevation receives some parameters. When you want to use elevation, You can also use ButtonDefaults.elevation to configure the height of a specific case. Here’s an example:

Column {Button(modifier = modifier.height (100.dp).width(250.dp), // onClick = {// click on event}, Elevation = buttondefaults. elevation(3. Dp, 10. Dp, 0.Copy the code
border

The border parameter is of type BorderStroke and defaults to null. It can be used to draw the border of the button:

Column {Button(modifier = modifier.height (100.dp).width(250.dp), // onClick = {// click on event}, elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp), border = BorderStroke(6.dp, Color.yellow)) {Text(Text = "button ") // button Text, corresponding content}}Copy the code

We can see the border of 6DP.

shape

Shape is very useful for buttons. In Android View, if we want to add shape to a Button, we will define shape.xml. In Compose, Button doesn’t need to do this. Let’s see how to add:

Column {Button(modifier = modifier.height (100.dp).width(250.dp), // onClick = {// click on event}, elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp), border = BorderStroke(6.dp, Color.Yellow), Shape = RoundedCornerShape(20.dp) // Add shape) {Text(Text = "button ") // button Text, corresponding to content}}Copy the code

We see a button with a rounded corner size of 20DP. Isn’t that easy?

colors

Colors sets the colors of buttons in different states. The type is ButtonColors, which is also an interface.

@stable Interface ButtonColors {** ** color */ @composable fun backgroundColor(enabled: Boolean): State<Color> /** * content */ @composable fun contentColor(enabled: Boolean): State<Color>}Copy the code

Colors in the Button is the default ButtonDefaults. ButtonColors (), let’s take a look at buttonColors.

@ Composable fun buttonColors (backgroundColor: Color = MaterialTheme. Colors. Primary, / / background Color contentColor: Color = contentColorFor(backgroundColor), // disabledBackgroundColor: Color = MaterialTheme. Colors. OnSurface. Copy (alpha = 0.12 f.) compositeOver (MaterialTheme. The colors. The surface). // disabledContentColor: Color = MaterialTheme. Colors. OnSurface. Copy (alpha = ContentAlpha. Disabled) / / is not enabled when the content of Color) : ButtonColors = DefaultButtonColors( backgroundColor = backgroundColor, contentColor = contentColor, disabledBackgroundColor = disabledBackgroundColor, disabledContentColor = disabledContentColor )Copy the code

Here, as with elevation, we use the system’s default methods. We just pass in the values we need to change, and see how colors work:

Column { val context = LocalContext.current Button( modifier = Modifier .height(100.dp) .width(250.dp), OnClick = {toast.maketext (context, "click button ", 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 = "button ") // button Text, corresponding to content}}Copy the code

contentPadding

The padding is the same as the padding in the Android View. The type is PaddingValues, which is an interface. ContentPadding Button in the default value 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, // Left top = ButtonVerticalPadding, // top = ButtonHorizontalPadding, // right bottom = ButtonVerticalPadding // bottom) // omit}Copy the code

The default values are 16dp for left and 8dp for up and down. To change this, use PaddingValues to set the corresponding inner margin. 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)
Copy the code

To use:

Column {val Context = localcontext. current Button(modifier = modifier.height (100.dp).width(250.dp), Column {val Context = localcontext. current Button(modifier = modifier.height (100.dp).width(250.dp), OnClick = {toast.maketext (context, "click button ", 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 = "button ")Copy the code

In fact, in general, the usage is very simple, other interesting use can try to use it yourself. The code has been submitted to github github.com/Licarey/com…