Выровнять текстовые виджеты в виджете строки

Question

У меня есть строка с 3 текстовыми виджетами.

Средняя текстовая запись может занимать несколько строк, но первые две будут очень маленькими.

Я хочучтобы первый виджет имел текст вверху строки, а третий виджет имел текст внизу строки.

Это в основном что-то похожее на это изображение

Так что в основном первый виджет будет открывающей цитатой, а третий - окончаниемquote.

Я могу установить crossAxisAlignment в строке, чтобы он начинался или заканчивался, и это будет перемещать кавычки, но он будет перемещать их обоих.

В данный момент у меня есть кое-чтонапример:

return Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Text('"'),
      ),
      Expanded(
        child: Text(
          entry.text,
          style: style,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),
        color: Colors.yellow,
        child: Text(
          '”',
          textAlign: TextAlign.start,
        ),
      ),
    ],
  );

, но я не уверен, как выровнять нижнюю кавычку с нижней частью текста, в данный момент она находится сверху.

Answer 1

Одной из идей было бы создать стек, а затем обернуть Text() виджетом Positioned.поместите левую кавычку на top: и left: и правую кавычку на bottom: right:.и оберните средний текст с помощью Container, рассчитайте оставшийся размер из MediaQuery.of(context).size.width - qouoteWidth*2 и установите фиксированный размер для контейнера и поместите его в вычисленные координаты.

Я уверен, что есть и другие решения

Answer 2

Вы всегда можете сделать Столбец -> [Развернутый (текст), Развернутый (Контейнер (), Развернутый (текст)] и отрегулировать изгиб пустого поля по необходимости.

Есть также Контейнер (или Столбец)/ Row) -> Stack -> [Column (начало mainAxis), Column (конец mainAxis)].

Работать умнее, а не сложнее. Виджет IntrinsicHeight требует больших вычислительных ресурсов, и я бы не рекомендовал использовать его для этого.

Answer 3

IntrinsicHeight - это виджет, который вы ищете.С этим виджетом все в порядке.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new IntrinsicHeight(
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Align(
            alignment: Alignment.topLeft,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text('"'),
            ),
          ),
          Expanded(
            child: Text(
              "The middle text entry can span several lines, but the first two will be really small. I'm wanting to have the first widget have the text at the top of the row and the 3rd widget to have the text at the bottom of the row. It's basically something similar to this image"
            ),
          ),
          new Align(
            alignment: Alignment.bottomRight,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 10.0),
              child: Text(
                '”',
                textAlign: TextAlign.start,
              ),
            ),
          ),
        ],
        ),
      ));
  }