Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

InkWell

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

Тип: single-child

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

Параметры

Параметр	Тип	Описание
`onTap`	callback	Нажатие
`onDoubleTap`	callback	Двойное нажатие (только приложение)
`onLongPress`	callback	Долгое нажатие (только приложение)
`splashColor`	color	Цвет ряби (на сайте — цвет подсветки при нажатии)
`highlightColor`	color	Цвет подсветки при нажатии
`hoverColor`	color	Цвет подсветки при наведении курсора
`focusColor`	color	Цвет подсветки при фокусе (только приложение)

Обработчик пишется в любой из трёх форм, как у 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 "Нажми"