Button

Кнопки — это основные компоненты, которые позволяют пользователю запускать определенное действие. Существует пять типов кнопок. В следующей таблице описывается внешний вид каждого из пяти типов кнопок, а также то, где их следует использовать.

Тип

Появление

Цель

Заполненный

Сплошной фон с контрастным текстом.

Кнопки с высоким акцентом. Они предназначены для основных действий в приложении, таких как «отправить» и «сохранить». Эффект тени подчеркивает важность кнопки.

Заполненный тональный

Цвет фона варьируется в зависимости от поверхности.

Также для основных или значимых действий. Заполненные кнопки обеспечивают больший визуальный вес и подходят для таких функций, как «добавить в корзину» и «Войти».

Повышенный

Выделяется наличием тени.

Выполняет ту же роль, что и тональные кнопки. Увеличьте высоту, чтобы кнопка стала еще заметнее.

Очерченный

Имеет границу без заливки.

Кнопки средней важности, содержащие действия, которые важны, но не являются основными. Они хорошо сочетаются с другими кнопками для указания альтернативных, второстепенных действий, таких как «Отмена» или «Назад».

Текст

Отображает текст без фона и рамки.

Кнопки с низким акцентом, идеально подходящие для менее важных действий, таких как навигационные ссылки или второстепенные функции, такие как «Узнать больше» или «Просмотреть подробности».

На следующем изображении показаны пять типов кнопок в Material Design.

Пример каждого из пяти компонентов кнопки с выделенными их уникальными характеристиками.
Рисунок 1. Пять компонентов кнопки.

API поверхность

  • onClick : Функция вызывается, когда пользователь нажимает кнопку.
  • enabled : если установлено значение false, кнопка становится недоступной и неактивной.
  • colors : экземпляр ButtonColors , определяющий цвета, используемые в кнопке.
  • contentPadding : Отступ внутри кнопки.

Заполненная кнопка

Заполненный компонент кнопки использует базовый Button composable. Он заполнен сплошным цветом по умолчанию. Следующий фрагмент демонстрирует, как реализовать компонент: 

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Эта реализация выглядит следующим образом:

Заполненная кнопка с фиолетовым фоном, на котором написано «заполнено».
Рисунок 2. Заполненная кнопка.

Заполненная тональная кнопка

Компонент кнопки с заполненным тоновым цветом использует компонуемый объект FilledTonalButton . По умолчанию он заполнен тоновым цветом.

Следующий фрагмент демонстрирует, как реализовать компонент: 

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Эта реализация выглядит следующим образом:

Тональная кнопка со светло-фиолетовым фоном, на которой написано «заполнено».
Рисунок 3. Тональная кнопка.

Кнопка с контуром

Компонент кнопки с контуром использует компонуемый OutlinedButton . По умолчанию он отображается с контуром.

Следующий фрагмент демонстрирует, как реализовать компонент: 

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Эта реализация выглядит следующим образом:

Прозрачная контурная кнопка с темной рамкой, на которой написано «Контур».
Рисунок 4. Контурная кнопка.

Кнопка с приподнятым краем

Компонент повышенной кнопки использует компонуемый ElevatedButton . Он имеет тень, которая по умолчанию представляет эффект возвышения. Обратите внимание, что по сути это контурная кнопка с тенью.

Следующий фрагмент демонстрирует, как реализовать компонент: 

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Эта реализация выглядит следующим образом:

Приподнятая кнопка с серым фоном и надписью «Приподнятая».
Рисунок 5. Приподнятая кнопка.

Текстовая кнопка

Компонент текстовой кнопки использует TextButton composable. Пока не нажато, отображается только текст. По умолчанию не имеет сплошной заливки или контура.

Следующий фрагмент демонстрирует, как реализовать компонент: 

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Эта реализация выглядит следующим образом:

Текстовая кнопка с надписью «Текстовая кнопка»
Рисунок 6. Текстовая кнопка.

Дополнительные ресурсы