Кнопка

ключевые слова: 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

Примечание: если вы хотите создать собственную кнопку, используйте компонуемую Button .

Эта реализация выглядит так:

Рисунок 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. Текстовая кнопка.

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

• Плавающая кнопка действия
• Обзор кнопок Material Design 3