如何对同一列的不同行使用不同的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

您可以尝试将“列”窗口小部件的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(),