Button

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

Тип

Появление

Цель

Заполненный

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

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

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

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

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

Повышенный

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

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

Изложил

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

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

Текст

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

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

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

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

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

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

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

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

@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
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

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

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

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