Кнопка

ключевые слова: AiAssisted, продукт:JetpackCompose

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

Тип Появление Цель
Заполненный Сплошной фон с контрастным текстом. Кнопки с высоким уровнем акцента. Они предназначены для основных действий в приложении, таких как «отправить» и «сохранить». Эффект тени подчёркивает важность кнопки.
Заполненный тональный Цвет фона варьируется в зависимости от поверхности. Также для основных или важных действий. Кнопки с заливкой в ​​тон придают больше визуального веса и подходят для таких функций, как «добавить в корзину» и «Войти».
Повышенный Выделяется наличием тени. Выполняет ту же функцию, что и тональные кнопки. Увеличьте высоту, чтобы кнопка выглядела ещё заметнее.
Очерченный Имеет границу без заливки. Кнопки средней важности, содержащие важные, но не основные действия. Они хорошо сочетаются с другими кнопками для обозначения альтернативных, второстепенных действий, таких как «Отмена» или «Назад».
Текст Отображает текст без фона и границ. Кнопки с низким акцентом, идеально подходящие для менее важных действий, таких как навигационные ссылки или второстепенные функции, например «Узнать больше» или «Просмотреть подробности».

На этом изображении показаны пять типов кнопок в 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. Текстовая кнопка.

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