Compose 里自定义Button
简单的:
Button(onClick = {
Log.d(TAG, ": Button @@")
}) {
Text(
modifier = Modifier,
text = "Button"
)
}
复杂:
Button(
modifier = Modifier.size(30.dp),
contentPadding = PaddingValues(0.dp,0.dp,0.dp,0.dp),
shape = RoundedCornerShape(0),
colors = ButtonDefaults.buttonColors(
Color.Transparent,
),
onClick = {
Log.d(TAG, "xxxxxxxxxxxxxxx")
}) {
Image(
painter = painterResource(id = R.drawable.cam_ic_back_n),
contentDescription = ""
)
}
- modifier: 大小为30
- contentPadding:button里的内容没有pading
- shape: 形状
- colors: 颜色 ButtonDefaults.buttonColors 有四个参数
@Composable
fun buttonColors(
containerColor: Color = FilledButtonTokens.ContainerColor.toColor(),
contentColor: Color = FilledButtonTokens.LabelTextColor.toColor(),
disabledContainerColor: Color =
FilledButtonTokens.DisabledContainerColor.toColor()
.copy(alpha = FilledButtonTokens.DisabledContainerOpacity),
disabledContentColor: Color = FilledButtonTokens.DisabledLabelTextColor.toColor()
.copy(alpha = FilledButtonTokens.DisabledLabelTextOpacity),
): ButtonColors = ButtonColors(
containerColor = containerColor,
contentColor = contentColor,
disabledContainerColor = disabledContainerColor,
disabledContentColor = disabledContentColor
)
class ButtonColors internal constructor(
private val containerColor: Color,
private val contentColor: Color,
private val disabledContainerColor: Color,
private val disabledContentColor: Color,
)
- onClick:点击事件
- Image:填充一个图形,也可以是其他例如TextView
button源码
/**
* <a href="https://m3.material.io/components/buttons/overview" class="external" target="_blank">Material Design button</a>.
*
* Buttons help people initiate actions, from sending an email, to sharing a document, to liking a
* post.
*
* ![Filled button image](https://developer.android.com/images/reference/androidx/compose/material3/filled-button.png)
*
* Filled buttons are high-emphasis buttons. Filled buttons have the most visual impact after the
* [FloatingActionButton], and should be used for important, final actions that complete a flow,
* like "Save", "Join now", or "Confirm".
*
* @sample androidx.compose.material3.samples.ButtonSample
* @sample androidx.compose.material3.samples.ButtonWithIconSample
*
* Choose the best button for an action based on the amount of emphasis it needs. The more important
* an action is, the higher emphasis its button should be.
*
* - See [OutlinedButton] for a medium-emphasis button with a border.
* - See [ElevatedButton] for an [OutlinedButton] with a shadow.
* - See [TextButton] for a low-emphasis button with no border.
* - See [FilledTonalButton] for a middle ground between [OutlinedButton] and [Button].
*
* The default text style for internal [Text] components will be set to [Typography.labelLarge].
*
* @param onClick called when this button is clicked
* @param modifier the [Modifier] to be applied to this button
* @param enabled controls the enabled state of this button. When `false`, this component will not
* respond to user input, and it will appear visually disabled and disabled to accessibility
* services.
* @param shape defines the shape of this button's container, border (when [border] is not null),
* and shadow (when using [elevation])
* @param colors [ButtonColors] that will be used to resolve the colors for this button in different
* states. See [ButtonDefaults.buttonColors].
* @param elevation [ButtonElevation] used to resolve the elevation for this button in different
* states. This controls the size of the shadow below the button. Additionally, when the container
* color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay.
* See [ButtonElevation.shadowElevation] and [ButtonElevation.tonalElevation].
* @param border the border to draw around the container of this button
* @param contentPadding the spacing values to apply internally between the container and the
* content
* @param interactionSource the [MutableInteractionSource] representing the stream of [Interaction]s
* for this button. You can create and pass in your own `remember`ed instance to observe
* [Interaction]s and customize the appearance / behavior of this button in different states.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Button(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
shape: Shape = ButtonDefaults.shape,
colors: ButtonColors = ButtonDefaults.buttonColors(),
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
border: BorderStroke? = null,
contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
content: @Composable RowScope.() -> Unit
) {
val containerColor = colors.containerColor(enabled).value
val contentColor = colors.contentColor(enabled).value
val shadowElevation = elevation?.shadowElevation(enabled, interactionSource)?.value ?: 0.dp
val tonalElevation = elevation?.tonalElevation(enabled, interactionSource)?.value ?: 0.dp
Surface(
onClick = onClick,
modifier = modifier,
enabled = enabled,
shape = shape,
color = containerColor,
contentColor = contentColor,
tonalElevation = tonalElevation,
shadowElevation = shadowElevation,
border = border,
interactionSource = interactionSource
) {
CompositionLocalProvider(LocalContentColor provides contentColor) {
ProvideTextStyle(value = MaterialTheme.typography.labelLarge) {
Row(
Modifier
.defaultMinSize(
minWidth = ButtonDefaults.MinWidth,
minHeight = ButtonDefaults.MinHeight
)
.padding(contentPadding),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
content = content
)
}
}
}
}