Преобразовать / перевести виджет Flutter на отрицательные 50% его ширины - PullRequest
0 голосов
/ 06 августа 2020

Предположим, у нас есть пустой родительский виджет (Контейнер), без размера и абсолютно позиционированный (внутри своего родителя) по координате вверху / слева (x / y). Затем мы помещаем дочерний виджет (с переменным размером, который заранее не известен) внутри родительского. Есть ли способ расположить дочерний элемент на -50% от его собственной ширины, чтобы горизонтальный центр дочернего элемента отображался в координате x его родителя? Я не хочу использовать глобальные ключи, так как экземпляров будут сотни. Я пробовал Transform.translate (принимает только известное смещение по x), FractionalOffsets, FractionallySizedBoxes, Alignments et c, но, похоже, ничего не делает то, что я пытаюсь достичь. Кто-нибудь знает решение?

Edit: изображение, демонстрирующее цель введите описание изображения здесь

Ответы [ 2 ]

1 голос
/ 08 августа 2020

Согласно комментарию @ pskink, мне удалось добиться этого, объединив Positioned и FractionalTranslation

Positioned(
    left: childWidget.x,
    top: childWidget.y,
    child: FractionalTranslation(
        translation: Offset(-0.5, -0.5),
        child: childWidget,
    )
);
1 голос
/ 06 августа 2020

Вы можете использовать AlignPositioned виджет из align_positioned package.

AlignPositioned(
  alignment: Alignment.topLeft,
  moveByChildWidth: -0.5,          //negative 50% of child width
  child: Icon(
    Icons.info,
    size: 200,
  ),
),

Edit:

  Widget build(BuildContext context) {
    return Stack(
      children: [
        Transform.translate(
          offset: Offset(100, 200),
          child: Container(
            child: AlignPositioned(
              alignment: Alignment.topLeft,
              moveByChildWidth: -0.5,
              child: Icon(
                Icons.info,
                size: 100,
              ),
            ),
          ),
        ),
      ],
    );
  }

Дает тот же результат без Container тоже, т.е. создание самого Transform.translate в качестве родителя.

Результат:

введите описание изображения здесь

...