Как я могу разместить текстовый виджет на горизонтальном конце контейнера с максимальной шириной, не раскрывая его - PullRequest
0 голосов
/ 13 ноября 2018

У меня есть виджет карты, который оборачивает виджет контейнера с заданной ему максимальной шириной, вот как он выглядит:

enter image description here

thisэто код ниже:

Card(
          child: Container(
        constraints: new BoxConstraints(
          maxWidth: 250.0,
        ),
        margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[

            new Flexible(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  new Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child:  new Text(messageSnapshot.inbox),
                  ),




                ],
              ),
            ),
          ],
        ),
      ))

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

enter image description here

2-й текстовый виджет, который я добавил, расширяется, переходит в крайний конец, как я хотел, но также расширяет карту до максимальной ширины, которую я установил.Вот код для этого:

Card(
     child: Container(
    constraints: new BoxConstraints(
      maxWidth: 250.0,
    ),
    margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[

        new Flexible(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[

              new Container(
                margin: const EdgeInsets.only(top: 5.0),
                child:  new Text(messageSnapshot.inbox),
              ),


              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Text("3:18am")
                ],
              )

            ],
          ),
        ),
      ],
    ),
  ))

Но это то, что я хочу

enter image description here

где дата находится горизонтально вконец пространства контейнера начальный текст, созданный без его расширения.

Как мне решить эту проблему?

1 Ответ

0 голосов
/ 13 ноября 2018

Обернуть элементы внутри виджета Flexible внутри виджета IntrinsicWidth. Это сделает все дочерние элементы в Column одинаковой ширины. Затем внутри Row для второго элемента добавьте свойство MainAxisSize.max, чтобы оно имитировало ширину первого элемента и подчинялось свойству MainAxisAlign.end так, как вы хотите.

new Flexible(
            child: new IntrinsicWidth(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Container(
                    margin: const EdgeInsets.only(top: 5.0),
                    child: new Text(
                      messageSnapshot.inbox,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Text(
                        "3:18am",
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...