dart - 如何对同一列的不同行使用不同的 crossAxisAlignment？

Question

我想以不同方式对齐两段文本，其中每段文本位于不同的行但位于同一列。

这是这个小部件的粗略结构图

如您所见，“信息文本”位于“视频持续时间”旁边，但我希望它位于顶部，并且我希望始终将“视频持续时间”保留在底部。

我尝试使用对齐设置，但我不知道为什么一个似乎不起作用(我在下面的代码中评论了它)

class MiniVideoCell extends StatelessWidget {
  final lesson;

  MiniVideoCell(this.lesson);

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Container(
          padding: new EdgeInsets.all(12.0),
          child: new Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              new Column(

                children: <Widget>[
                  new Image.network(
                    lesson.imageUrl,
                    width: 150.0,
                  ),
                ],
              ),
              new Column(
                crossAxisAlignment: CrossAxisAlignment.start, //meant to align elements to the left - seems to be working
                children: <Widget>[
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
                    children: <Widget>[
                      new Text("info text"),
                    ],
                  ),
                  new Row(
                    children: <Widget>[
                      new Text("video duration"),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
        new Divider(),
      ],
    );
  }
}

Answer 1

您可以尝试将 Column 小部件的 mainAxisAlignment 属性设置为 MainAxisAlignment.spaceBetween。这会将所有可用空间放在 Row 小部件之间。

new Column(
    crossAxisAlignment: CrossAxisAlignment.start, //meant to align elements to the left - seems to be working
    mainAxisAlignment: MainAxisAlignment.spaceBetween, // Add this line
    children: <Widget>[
        new Row(
            mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
            children: <Widget>[
                new Text("info text"),
                ],
              ),
        new Row(
            children: <Widget>[
                new Text("video duration"),
                ],
        ),
    ],
)

而且我们还需要像这样指定 Container 小部件的 height 和 width:

Container(
    padding: EdgeInsets.all(12.0),
    width: double.infinity, // Added width 
    height: 124.0, // Set your preferred height
    child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
...

输出看起来像这样:

部分代码如下:

Column(
      children: [
          Container(
            padding: EdgeInsets.all(12.0),
            width: double.infinity, // Added this 
            height: 124.0, // Set your preferred height
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Column(
                  children:[
                    Container(
                      color: Colors.blue,
                      width: 150.0,
                      height: 100.0, // Assuming that the height of the thumbnail is 100 pixels
                      )
                  ]
                  ),

                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween, // Place all available space between the children
                    children:[

                        Row(
                          mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
                          children: <Widget>[
                            new Text("info text"),
                          ],
                        ),

                       Row(
                          mainAxisAlignment: MainAxisAlignment.start, //trying to bring this text up, not working
                          children: <Widget>[
                            new Text("video duration"),
                          ],
                        ),
                    ]
                    )
              ]
              ),
            ),

          Divider(),