Based on the API

Fun Button(onClick: () -> Unit, // Click event Modifier: modifier = modifier, // modifier enabled: Boolean = true, // Whether interactionSource is available: MutableInteractionSource = remember {MutableInteractionSource()} = ButtonDefaults. Elevation (), / / gradient shape: shape = MaterialTheme. Shapes. Small, / / the shape of the button, the background is not effective border: BorderStroke? = null, / / the border around the button, the background is not effective colors: ButtonColors = ButtonDefaults. ButtonColors (), / / in the different state of the button and the color of the background contentPadding: PaddingValues = ButtonDefaults ContentPadding, / / padding, the default 8 dp, up and down around 16 dp content: @composable RowScope.() -> Unit (Composable RowScope)Copy the code

We can think of a Button as a FrameLayout in Android, that is, a FrameLayout, which can put any child View inside, whereas a Button provides clickable properties, and can also add various top layer decorations. Let’s take a look at the Demo:

The examples directly illustrate several common buttons, which is certainly simple, but they don’t require any XML layout to be created, and are basically implemented in two or three lines of code.

For example, the second rounded border button:

Button( onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }, Shape = RoundedCornerShape(8.dp), // round 8dp border = BorderStroke(2.dp, color = color.magenta) // RoundedBorder (RoundedBorder) {RoundedBorder (RoundedBorder)}Copy the code

Or the third image button:

Button(onClick = { Toast.makeText(context, "Click Button", Toast.length_short).show()}) {// Add an Image to the Image(painterResource(id = r.rawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier ) }Copy the code

Basically, because it’s a layout, you can put anything in it, and there’s infinite possibilities.

Basic but non-mainstream APIS

Let’s start with a demo:

@Composable fun ButtonDemo1(context: Context) { Button( onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }, Shape = RoundedCornerShape(16.dp), // 16dp rounded border = BorderStroke(2.dp, color.darkgray), {Text(Text = "Button", modifier = modifier. Background (color.red), // background-red)}}Copy the code

The effect is as follows:

We can see that the Text Text exists independently of the Button. This proves that the Button is a layout and the Text is an internal child View. Now let’s add a background to the Button.

Modifier = modifier. Background (color.green) // Add a Green background to the ButtonCopy the code

The effect is as follows:

We can see that the Button background is green and the border is drawn on the background. This is because for the Compose control, the background and the content of the control are two layers, and the content of the control is drawn on top of the background.

Now let’s get rid of Text

Modifier = modifier. Background (color.red) // The background is RedCopy the code

Then use the colors attribute that comes with Button as follows:

@Composable fun ButtonDemo1(context: Context) { Button( onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }, Shape = RoundedCornerShape(16.dp), // 16dp rounded border = BorderStroke(2.dp, color.darkgray), Background-color (color.green), // Add a Green background-contentpadding = PaddingValues(40.dp), Color = object: ButtonColors {// Add color @composable override fun backgroundColor(enabled: Boolean): State<Color> {// Background Color of content: Yellow when available, Gray return rememberUpdatedState(if (enabled) color.yellow else color.gray)} @composable override fun ContentColor (enabled: Boolean): State<Color> {// contentColor: Green when available, Return rememberUpdatedState(if (enabled) color.green else color.blue)}} enabled = true ) { Text(text = "Button") } }Copy the code

The effect is as follows:

Now let’s change enabled to false:

enabled = false
Copy the code

The effect is as follows:

For Compose’s UI, add a background color and a Text color to the Text, as shown below:

Text(text = "Button", color = Color.White, modifier = Modifier.background(Color.Red))
Copy the code

The effect is as follows:

No surprise at all.

The API of Button is very simple, which can be seen as FrameLayout in Android native XML.

@Composable fun ButtonDemo2(context: Var onClick = {toast. makeText(Context, "Click Button", Toast.LENGTH_SHORT).show() } val sizeModifier = Modifier.size(width = 32.dp, height = 32.dp) Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, Modifier = modification.fillmaxSize () {onClick = onClick, elevation = ButtonDefaults.elevation(pressedElevation = 8.dp)) { Text(text = "TextButton") } Spacer(modifier = Modifier.size(width = 10.dp, height = 8.dp)) Button( onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }, shape = RoundedCornerShape(8.dp), border = BorderStroke(2.dp, color = Color.Magenta) ) { Text(text = "RoundedBorder") } Spacer(modifier = Modifier.size(width = 10.dp, Button(onClick = onClick) {Image(painter = painterResource(id = r.rawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier ) } Spacer(modifier = Modifier.size(width = 10.dp, Column(verticalArrangement = Arrangement.center, Column(verticalArrangement = Arrangement.center, Column(verticalArrangement = Arrangement.center) horizontalAlignment = Alignment.CenterHorizontally) { Image(painter = painterResource(id = R.drawable.ic_google), contentDescription = "ImageButton", Spacer(modifier = modificer.size (width = 10.dp,)} Spacer(modifier = modificer.size (width = 10.dp,) Button(onClick = onClick) {Column(verticalArrangement = Arrangement.center, HorizontalAlignment = Alignment. CenterHorizontally) {Text (Text = "figure on the word") Image (painter = painterResource (id = R.drawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier) } } Spacer(modifier = Modifier.size(width = 10.dp, Button(onClick = onClick) {Row(horizontalArrangement = arrangement.center, verticalAlignment = Alignment.CenterVertically) { Image(painter = painterResource(id = R.drawable.ic_google), contentDescription = "ImageButton", Spacer(modifier = modificer.size (width = 10.dp,)} Spacer(modifier = modificer.size (width = 10.dp, Button(onClick = onClick) {Row(horizontalArrangement = arrangement.center, VerticalAlignment = Alignment. CenterVertically) {Text (Text = "figure right words left") Image (painter = painterResource (id = R.drawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier) } } } }Copy the code

The full code is available here: gitee.com/lloydfinch/…