Обрезать путь в наложении - PullRequest
0 голосов
/ 10 июля 2020

У меня есть несколько элементов, которые нужно отобразить с помощью виджета Wrap(), который при нажатии должен insert() наложение (или Opacity() с AbsorbPointer()), скрывающее другие элементы / виджеты вокруг него, и я хотел бы, чтобы текущий выбранный виджет для выделения (над наложением или может быть вырезан через наложение).

List of Items in the Wrap() widget

And the a user taps on any item,

here's the Result what i want to get -

При выборе элемента показывать наложение

Вот как я визуализирую список элементов.

Когда пользователь нажимает на элемент, отображается наложение (а предыдущее закрывается).

ПРИМЕЧАНИЕ. Я использую глобальный ключ, чтобы получить ширину, высоту, положение по оси x и положение по оси Y для каждого элемента при нажатии.

Container(
  child: Column(
    children: [
      SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Wrap(
          direction: Axis.horizontal,
          runSpacing: MediaQuery.of(context).size.height * 0.015,
          alignment: WrapAlignment.spaceBetween,
          runAlignment: WrapAlignment.spaceBetween,
          crossAxisAlignment: WrapCrossAlignment.start,
          children: infrastructureTypes
              .map<Widget>((type) => MkInfrastructureComponent(
                    type: type,
                    onTap: (type, config, id) {
                      if (overlayEntry != null) {
                        _hideOverlay();
                      }

                      _showOverlay(context, type: type, childConfig: config);
                    },
                  ))
              .toList(),
        ),
      ),
    ],
  ),
),

Показать и скрыть наложение

void _showOverlay(
  BuildContext ctx, {
  @required InfrastructureType type,
  @required WidgetConfig childConfig,
}) {
  OverlayState overlayState = Overlay.of(context);
  overlayEntry = OverlayEntry(
      builder: (ctx) => Positioned(
            left: 0 + MediaQuery.of(context).size.width * 0.02,
            right: MediaQuery.of(context).size.width * 0.02,
            top: childConfig.yPosition + childConfig.height,
            height: type.children.length * childConfig.height + _arrowHeight,
            child: CustomDropDown(),
          ));


  WidgetsBinding.instance.addPostFrameCallback((_) => overlayState.insert(overlayEntry));
}

void _hideOverlay() {
  overlayEntry?.remove();
  overlayEntry = null;
}

Мой вопрос в том, как я могу добиться макета пользовательского интерфейса на изображении 2. .

Возможно, вырежьте путь на оверлее для выбранный в данный момент элемент?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...