Question

我有一个卡片小部件，它包装了具有最大宽度的容器小部件，这就是它的样子：

这是下面的代码：

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),
                  ),




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

当我尝试在其下创建另一个文本小部件时出现问题，我特别想移至第一个文本下方的最右边，这就是我得到的：

我添加的第二个文本小部件会扩展，并根据需要扩展到最末端，同时还将卡扩展到我设置的最大宽度。这是它的代码：

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")
                ],
              )

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

但这就是我想要的

日期在容器空间末尾的水平位置，初始文本创建时未展开。

我该如何解决这个问题？

Answer 1

将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",
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),

如何将文本小部件以最大宽度放置在容器的水平端，而又不扩展它

1 个答案: