Эффект подсветки выделения без полей в Flutter - PullRequest
Новая
       25

Эффект подсветки выделения без полей в Flutter

1 голос
/ 02 июля 2019

Контекст: я переписываю свое приложение для Android с помощью Flutter.На Android этот интересный эффект обратной связи был интересным, когда для свойства View, доступного для кликабельности, было установлено значение ?android:selectableItemBackgroundBorderless:

enter image description here

Обратите внимание, чтокрасная граница не была в реальном интерфейсе, она просто показывает границы View.Как вы можете видеть, чернила образуют круг, который ограничен вокруг прямоугольного вида.

Я бы хотел, чтобы чернила в приложении Flutter были также ограничены вокруг вида, то есть область выбора должна быть круглой и охватывать вид. Я пытаюсь добиться этого, используя InkResponse компонент, но результат выглядит жалким:

enter image description here

Тело Scaffold, использованное в примере: 

body: Center(
  // Center is a layout widget. It takes a single child and positions it
  // in the middle of the parent.
  child: Material(
    color: Color(0xff008080),
    child: Center(
      child: InkResponse(
        onTap: () {
          /* ... */
        },
        child: Container(
          child: Center(
            child: Text('BUTTON'),
          ),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red),
          ),
          width: 200.0,
          height: 200.0,
        ),
        highlightColor: Colors.transparent,
      ),
    ),
  ),
),

Если я сделаю свойство radius InkResponse достаточно большим, оно может выйти за пределыграницы представления, и если мой вид имел статический размер, я мог бы настроить свойство для достижения желаемого эффекта, но в моем реальном приложении оно динамическое.

Возможно ли это сделать без создания пользовательского компонента

1 Ответ

0 голосов
/ 02 июля 2019

Вы пробовали это, его щелчок привязан к красной области. 

Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: Material(
            color: Color(0xff008080),
            child: Center(
              child: InkWell(
                onTap: () {
                  /* ... */
                },
                child: Container(
                  child: Center(
                    child: Text('BUTTON'),
                  ),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.red),
                  ),
                ),
                highlightColor: Colors.transparent,
              ),
            ),
          ),
        ),
...