Кнопки – это основные элементы, позволяющие пользователю выполнять определенные действия. Существует пять типов кнопок. В таблице ниже описано, как выглядят кнопки каждого из пяти типов и где их следует использовать.
| Тип | Внешний вид | Назначение |
|---|---|---|
| Заполненный | Однотонный фон с контрастным текстом. | Кнопки с высокой степенью выделения. Они предназначены для основных действий в приложении, например "Отправить" и "Сохранить". Эффект тени подчеркивает важность кнопки. |
| Заливка тона | Цвет фона меняется в зависимости от платформы. | Также для основных или важных действий. Кнопки с заливкой имеют больший визуальный вес и подходят для таких функций, как "Добавить в корзину" и "Войти". |
| Повышенная | Выделяется благодаря тени. | Выполняет ту же функцию, что и тональные кнопки. Увеличьте высоту, чтобы кнопка выглядела ещё более заметной. |
| С контуром | Имеет рамку без заливки. | Кнопки со средним акцентом, содержащие важные, но не основные действия. Они хорошо сочетаются с другими кнопками, обозначая альтернативные или второстепенные действия, например "Отмена" или "Назад". |
| Текст | Отображает текст без фона и границ. | Кнопки с низкой степенью выделения, которые подходят для менее важных действий, например навигационных ссылок или второстепенных функций, таких как "Подробнее" или "Посмотреть детали". |
На этом изображении показаны пять типов кнопок в 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") } }
Вот как выглядит реализация:
Кнопка с контуром
В компоненте кнопки с обводкой используется composable-функция OutlinedButton. По умолчанию он отображается с контуром.
Во фрагменте кода показано, как реализовать компонент:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Вот как выглядит реализация:
Кнопка с тенью
В компоненте "Кнопка с тенью" используется composable-функция ElevatedButton. По умолчанию у него есть тень, которая создает эффект высоты. Это заполненная кнопка с тенью.
Во фрагменте кода показано, как реализовать компонент:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Вот как выглядит реализация:
Кнопка "Текст"
В компоненте текстовой кнопки используется функция TextButton. До нажатия она выглядит как обычный текст. По умолчанию у него нет сплошной заливки или контура.
Во фрагменте кода показано, как реализовать компонент:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Вот как выглядит реализация:
