InkWell

This page has not been translated into English yet. The Russian original is below.

Делает любой элемент нажимаемым: ловит нажатие, двойное нажатие и долгое нажатие и показывает отклик — рябь в приложении, подсветку при наведении и нажатии на сайте. Это самый частый способ сделать «кликабельным» произвольный блок — карточку, строку списка, иконку.

Тип: single-child

@taps:0
InkWell onTap:{taps = taps + 1}
  Padding
    #padding all 16
    Text "Нажми меня"

Параметры

Обработчик пишется в любой из трёх форм, как у Button :

• тело {…} — выполняется при нажатии (например, onTap:{opened = !opened} );
• строка-действие "navigate:/home" — вызывается действие приложения;
• переменная с функцией, onTap:$copy .

Элемент без обработчика ничего не обещает: на сайте он не получает ни курсора-руки, ни подсветки.

Вложенные структуры

#borderRadius и #customBorder

Форма, по которой обрезается рябь (в приложении). Для скругления — #borderRadius circular 12 , для произвольной формы — #customBorder (формат как у #shape кнопок).

@opened:false
InkWell onTap:{opened = !opened}
  #borderRadius circular 12
  Padding
    #padding all 16
    Text "Со скруглённой рябью"

Примеры

Кликабельная карточка

@selected:false
InkWell onTap:{selected = !selected} hoverColor:#1A36345E
  DecoratedBox
    #decoration color:#36345E
      #borderRadius circular 16
    Padding
      #padding all 20
      Column spacing:4 crossAxisAlignment:start
        Text "Тариф «Базовый»"
        Text "Нажмите, чтобы выбрать"

Ссылка по нажатию

InkWell onTap:"navigate:/pricing"
  Padding
    #padding symmetric horizontal:12 vertical:8
    Text "Цены"

Различия между приложением и сайтом

• В приложении отклик — рябь от точки нажатия на ближайшем Material-слое. Непрозрачная заливка ребёнка ( ColoredBox , DecoratedBox с цветом) лежит поверх ряби и скрывает её; если нужна заметная рябь, не закрашивайте ребёнка целиком.
• На сайте ряби нет: вместо неё нижний слой подсветки при наведении и нажатии. Курсор становится рукой, только если есть обработчик.
• onDoubleTap , onLongPress , focusColor , #borderRadius и #customBorder на сайте не читаются. InkWell без ребёнка на сайте — пустой блок.

Bad practices

Нажимаемый элемент без обработчика

// BAD — InkWell без onTap: выглядит нажимаемым только в приложении, и то лишь рябью
InkWell
  Text "Нажми"

// GOOD — обработчик есть, отклик честный
@clicked:false
InkWell onTap:{clicked = true}
  Text "Нажми"

See also

• Button — кнопка на основе InkWell , с onHover / onExit
• Padding — область нажатия обычно задают отступами внутри InkWell