Button
Кнопки — это основные компоненты, позволяющие пользователю выполнять определённое действие. Существует пять типов кнопок. В следующей таблице описан внешний вид каждого из пяти типов кнопок, а также области их применения.
Тип | Появление | Цель |
|---|---|---|
Заполненный | Сплошной фон с контрастным текстом. | Кнопки с высоким уровнем акцента. Они предназначены для основных действий в приложении, таких как «отправить» и «сохранить». Эффект тени подчёркивает важность кнопки. |
Заполненный тональный | Цвет фона варьируется в зависимости от поверхности. | Также для основных или важных действий. Заполненные кнопки визуально более выразительны и подходят для таких функций, как «добавить в корзину» и «Войти». |
Повышенный | Выделяется наличием тени. | Выполняет ту же функцию, что и тональные кнопки. Увеличьте высоту, чтобы кнопка стала ещё заметнее. |
Очерченный | Имеет границу без заливки. | Кнопки средней важности, содержащие важные, но не основные действия. Они хорошо сочетаются с другими кнопками для обозначения альтернативных, второстепенных действий, таких как «Отмена» или «Назад». |
Текст | Отображает текст без фона и границ. | Кнопки с низким акцентом, идеально подходящие для менее важных действий, таких как навигационные ссылки или второстепенные функции, например «Узнать больше» или «Просмотреть подробности». |
На следующем изображении показаны пять типов кнопок в Material Design.
API поверхность
-
onClick: Функция вызывается, когда пользователь нажимает кнопку. -
enabled: если этот параметр установлен на значение false, кнопка становится недоступной и неактивной. -
colors: экземплярButtonColors, который определяет цвета, используемые в кнопке. -
contentPadding: Отступ внутри кнопки.
Заполненная кнопка
Компонент «Заполненная кнопка» использует базовый компонуемый элемент Button . По умолчанию он залит сплошным цветом. В следующем фрагменте кода показано, как реализовать этот компонент:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Эта реализация выглядит следующим образом:
Заполненная тональная кнопка
Компонент кнопки с заливкой в тон использует компонуемый объект FilledTonalButton . По умолчанию он заполнен тональным цветом.
В следующем фрагменте показано, как реализовать компонент:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Эта реализация выглядит следующим образом:
Кнопка с контуром
Компонент кнопки с контуром использует компонуемый объект OutlinedButton . По умолчанию он отображается с контуром.
В следующем фрагменте показано, как реализовать компонент:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Эта реализация выглядит следующим образом:
Поднятая кнопка
Компонент «Приподнятая кнопка» использует компонуемый объект ElevatedButton . По умолчанию у него есть тень, которая отражает эффект приподнятости. Обратите внимание, что по сути это кнопка с контуром и тенью.
В следующем фрагменте показано, как реализовать компонент:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Эта реализация выглядит следующим образом:
Текстовая кнопка
Компонент текстовой кнопки использует компонуемый элемент TextButton . До нажатия он отображается только в виде текста. По умолчанию он не имеет сплошной заливки или контура.
В следующем фрагменте показано, как реализовать компонент:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Эта реализация выглядит следующим образом:
