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") } }
Эта реализация выглядит следующим образом:
