Flutter - выровнять только один виджет внутри строки

У меня есть текст, который может различаться по высоте, за которым следует PopupMenuButton. Я хочу, чтобы текст был выровнен по центру по вертикальной оси (чтобы не было странного белого пространства, когда есть только 1 линия текста), но PopupMenuButton оставался в верхнем правом углу, независимо от высоты текста . Таким образом, использование crossAxisAlignement здесь не работает, поскольку затрагиваются все виджеты. Использование виджета Align для текста или PopupMenuButton не работает, и textAlign тоже не работает. Кажется, любое решение должно быть реализовано на уровне Row, а не в его дочерних элементах, что имеет смысл.

На данный момент я использую строку для хранения этих двух виджетов, но я не уверен, что это то, что мне нужно, если я хочу, чтобы поведение упоминалось ранее. Есть ли решение для строки или другой виджет, который я могу использовать для этого?

Вот код в его нынешнем виде. Спасибо.

Row(
  children: [
    Expanded(
      child: RichText(
        text: TextSpan(), // bunch of text in there
        )
      )
    ),
    SizedBox( // To box in the 3 dots icon (material design forces 48px otherwise)
      height: 24,
      width: 24,
      child: PopupMenuButton(
        padding: EdgeInsets.all(0),
        onSelected: menuSelect,
        itemBuilder: (BuildContext context) {
          return [
            PopupMenuItem(value: 0, child: Text('Read', textAlign: TextAlign.center,),),
            PopupMenuItem(value: 1, child: Text('Delete', textAlign: TextAlign.center,),)
          ];
        },
      ),
    )
  ],
)

flutter alignment row-height
person ouai    schedule 02.07.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вот способ сделать это:

  • Оберните свой SizedBox Align(alignment: Alignment.topRight)
  • Оберните Row IntrinsicHeight, чтобы поперечная ось не растягивалась

Кроме того, вы можете изучить виджет Stack, если вы не знакомы с Это.

person MickaelHrndz    schedule 03.07.2021
comment
Спасибо за решение. Я изучил Stack, но подумал, что, возможно, есть более элегантный способ решить эту проблему, который вы предоставили. Хотя это решает мою проблему, я не совсем уверен, почему IntrinsicHeight имеет такой эффект. Это потому, что спекулятивный макет проходит до финального этапа макета, как описано здесь api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html? То есть PopupMenuButton не заботится об этом, в то время как RichText, в результате чего разница? Спасибо ! - person ouai; 06.07.2021
comment
Ответ находится в этом предложении: Этот класс полезен, например, когда доступна неограниченная высота, и вы хотите, чтобы дочерний элемент, который в противном случае пытался бы бесконечно расширяться, вместо этого увеличивал бы себя до более разумной высоты. Здесь более разумная высота - это один из самых высоких виджетов в Row. Я думаю, что это в основном как Row(mainAxisSize: MainAxisSize.min), но для поперечной оси, или как ListView(shrinkWrap: true). - person MickaelHrndz; 06.07.2021