"Jetpack Compose Series Learning" -8 Botón de control simple de Compose

Los botones siguen siendo muy comunes y muy importantes. El nombre del botón en Redactar es el mismo que el nombre en la Vista de Android llamado Botón, echemos un vistazo a su creación:

// 按钮的用法
Column {
    Button(
        modifier = Modifier.height(50.dp).width(150.dp), // 大小
        onClick = {
            // 点击事件

        }) {
            Text(text = "按钮") // 按钮文案，对应content
           }
}
复制代码

En el código, creamos un botón y establecemos su tamaño, texto y evento de clic, el efecto es el anterior. Veamos de nuevo el código fuente de la clase 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 // 内容
) {
    // 省略...
}
复制代码

Los parámetros de Button aún son relativamente pocos. Algunos parámetros se repiten con los controles anteriores. Echemos un vistazo a algunos parámetros desconocidos.

al hacer clic

El parámetro onclick es una función de bloque y no se permite que esté vacío. Si el botón no tiene un evento de clic, no tiene significado.

activado

Es el estado habilitado del botón de control, que es muy común en Android View. Cuando es verdadero, se puede hacer clic en el botón normalmente, de lo contrario no se puede hacer clic.

interacciónFuente

Representa el flujo de interacción del botón y su tipo es MutableInteractionSource. Si desea observar la interacción y personalizar la apariencia y el comportamiento del botón en diferentes interacciones, puede crear y pasar el MutableInteractionSource que recuerda el botón. Similar a selector.xml personalizado en Android View

elevación

La altura del botón en diferentes estados, el tipo es ButtonElevation, y también se puede controlar el tamaño de la sombra debajo del botón, mira su código fuente:

@Stable
interface ButtonElevation {
    /**
     * 按钮中使用的标准高度，具体取决于enabled和interactionSource
     *
     * @param 按钮是否可点击
     * @param 按钮的InteractionSource
     */
    @Composable
    fun elevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
}
复制代码

Es una interfaz Si desea modificar la altura del botón, debe implementar este método de interfaz para modificarlo. El valor predeterminado de elevación es ButtonDefaults.elevation(), que se implementa de la siguiente manera:

@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 implementa el código de la interfaz ButtonElevation. Devuelve ButtonElevation, y la elevación recibe algunos parámetros. Cuando quieras usar la elevación, también puedes usar ButtonDefaults.elevation. Solo necesitas configurar la altura de la situación específica. Veamos. un ejemplo:

Column {
    Button(
        modifier = Modifier
            .height(100.dp)
            .width(250.dp), // 大小
        onClick = {
            // 点击事件

        },
        elevation = ButtonDefaults.elevation(3.dp, 10.dp, 0.dp)
        ) {
            Text(text = "按钮") // 按钮文案，对应content
    }
}
复制代码

frontera

El tipo de parámetro de borde es BorderStroke, el valor predeterminado es nulo, que se puede usar para dibujar el borde del botón:

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
          }
}
复制代码

Podemos ver el borde 6dp.

forma

He aprendido sobre la forma antes. No diré mucho aquí. La forma es muy útil en los botones. En Android View, si queremos agregar una forma a un botón, personalizaremos un shape.xml; en Compose, Button no No hace falta esto, vemos como agregar:

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
          }
}
复制代码

Vemos un botón con un tamaño de esquina redondeada de 20dp. ¿No es sencillo?

colores

colors se usa para establecer el color del botón en diferentes estados, el tipo es ButtonColors, también es una interfaz.

@Stable
interface ButtonColors {
    /**
     * 背景颜色
     */
    @Composable
    fun backgroundColor(enabled: Boolean): State<Color>

    /**
     * 内容颜色
     */
    @Composable
    fun contentColor(enabled: Boolean): State<Color>
}
复制代码

Los colores en Button son ButtonDefaults.buttonColors() por defecto, echemos un vistazo a 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
)
复制代码

Aquí es lo mismo que la elevación, podemos usar el método predeterminado del sistema cuando lo usamos, solo necesitamos pasar el valor que debe modificarse para ver cómo se usan los colores:

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
          }
}
复制代码

relleno de contenido

Relleno, lo mismo que relleno en Android View. Su tipo es PaddingValues, que es una interfaz. El valor predeterminado de contentPadding en Button es 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 // 下
    )
    // 省略
}
复制代码

Hay valores por defecto, 16dp para izquierda y derecha, y 8dp para arriba y abajo, si queremos modificarlo podemos usar directamente el método PaddingValues ​​para configurar el relleno correspondiente. Compose proporciona varios métodos para que los usemos:

@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)
复制代码

Usar en:

// 按钮的用法
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
          }
}
复制代码

De hecho, en general, el uso sigue siendo muy simple, y usted mismo puede usar otros usos interesantes. El código relevante ha sido enviado a github github.com/Licarey/com…