代码之家 › 专栏 › 技术社区 › C. Rib

如何对同一列上的不同行使用不同的横轴定位?

flutter dart

C. Rib · 技术社区 · 6 年前

我希望将两段文本不同地对齐,其中每段文本位于不同的行中,但位于同一列中。

下面是这个小部件的一个粗略的说明结构

如你所见,“信息文本”在“视频持续时间”旁边,但我希望它在顶部,我希望“视频持续时间”始终保持在底部。

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

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(),
      ],
    );
  }
}

1 回复 | 直到 6 年前

marc_s 6 年前

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

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

我们还需要详细说明 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(),