«Обучение серии Jetpack Compose» - 8 Простая кнопка управления Compose

Кнопки по-прежнему очень распространены и очень важны. Имя кнопки в Compose такое же, как и в представлении Android — Button, давайте посмотрим на ее создание:

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

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

В коде мы создаем кнопку и устанавливаем ее размер, текст и событие клика, эффект такой же, как и выше. Давайте еще раз посмотрим на исходный код класса 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 // 内容
) {
    // 省略...
}
复制代码

Параметров Button по-прежнему сравнительно немного, некоторые параметры повторяются с предыдущими элементами управления, давайте взглянем на некоторые незнакомые параметры.

по щелчку

Параметр onclick является блочной функцией, и он не может быть пустым.Если кнопка не имеет события нажатия, она не имеет значения.

включено

Это активное состояние кнопки управления, которое очень часто встречается в Android View. Когда оно равно true, кнопку можно нажимать как обычно, в противном случае на нее нельзя нажимать.

взаимодействиеИсточник

Представляет поток взаимодействия кнопки и имеет тип MutableInteractionSource. Если вы хотите наблюдать за взаимодействием и настраивать внешний вид и поведение кнопки при различных взаимодействиях, вы можете создать и передать MutableInteractionSource, который кнопка запоминает. Аналогичен пользовательскому файлу selector.xml в представлении Android.

возвышение

Высота кнопки в разных состояниях, тип ButtonElevation, а также размер тени под кнопкой также можно контролировать.Взгляните на его исходный код:

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

Это интерфейс.Если вы хотите изменить высоту кнопки, вам нужно реализовать этот метод интерфейса, чтобы изменить ее. Значение высоты по умолчанию — ButtonDefaults.elevation(), которое реализовано следующим образом:

@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 реализует код интерфейса ButtonElevation.Он возвращает ButtonElevation, а возвышение получает некоторые параметры.Когда вы хотите использовать возвышение, вы также можете использовать ButtonDefaults.elevation.Вам нужно только настроить высоту конкретной ситуации.Давайте посмотрим пример:

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

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

граница

Тип параметра границы — BorderStroke, значение по умолчанию — null, которое можно использовать для рисования границы кнопки:

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

Мы видим границу 6dp.

форма

Я узнал о фигуре раньше. Я не буду здесь много говорить. Форма очень полезна для кнопок. В представлении Android, если мы хотим добавить фигуру к кнопке, мы настроим файл shape.xml; в Compose это сделает кнопка. Не нужно этого, мы видим, как добавить:

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

Мы видим кнопку с размером закругленного угла 20dp. Разве это не просто.

цвета

colors используется для установки цвета кнопки в разных состояниях, тип ButtonColors, это тоже интерфейс.

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

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

Цвета в Button по умолчанию являются ButtonDefaults.buttonColors(), давайте взглянем на 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
)
复制代码

Здесь то же самое, что и высота, мы можем использовать метод системы по умолчанию, когда мы его используем, нам нужно только передать значение, которое нужно изменить, чтобы увидеть, как используются цвета:

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

Отступы, такие же, как отступы в Android View. Его тип — PaddingValues, который является интерфейсом. Значение по умолчанию для contentPadding в Button — 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 // 下
    )
    // 省略
}
复制代码

Есть значения по умолчанию, 16dp для левого и правого и 8dp для верхнего и нижнего, Если мы хотим изменить его, мы можем напрямую использовать метод PaddingValues, чтобы установить соответствующий отступ. Compose предоставляет несколько методов, которые мы можем использовать:

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

Используйте на:

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

На самом деле, в целом, использование все еще очень простое, и другие интересные варианты использования можно использовать самостоятельно. Соответствующий код был отправлен на github github.com/Licarey/com…