Flutter中Row内Column的mainAxisAlignment不生效，不使用Stack如何解决？

问题根因 #

你当前代码不生效的核心原因是Row的crossAxisAlignment配置为CrossAxisAlignment.end，这会让左右两个Container的高度仅适配自身内容（也就是内部Text的高度），没有撑满Row的整体高度，内部Column的mainAxisAlignment因为没有足够的竖直布局空间自然无法生效。

解决方案 #

仅需要修改Row的crossAxisAlignment属性为CrossAxisAlignment.stretch即可，这个配置会让Row的所有子元素在竖直方向填充满Row的高度（Row的高度由最高的中间Expanded子项动态决定），左右两个Column拿到完整高度后mainAxisAlignment配置就会正常生效。

修改后的完整代码如下：

Container(
  child: Row(
    // 把CrossAxisAlignment.end替换为CrossAxisAlignment.stretch
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Container(
        width: 60,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [Text("firstttt")],
        ),
      ),
      Expanded(
        child: Column(
          children: [
            Text(
                "secondddddddddddddddddddddddddddddseconddddddddddddddddddddddddddddddddddseconddddddddddddddddddddddddddddddddddseconddddddddddddddddddddddddddddddddddddddd"),
            SizedBox(
              height: 40,
            ),
          ],
        ),
      ),
      Container(
        width: 40,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.end,
          children: [Text("third")],
        ),
      ),
    ],
  ));

修改后第一个Container的文字会对齐Row顶部，第三个Container的文字对齐Row底部，刚好形成你要的对角分布效果，全程无需借助Stack实现。

内容的提问来源于stack exchange，提问作者dontknowhy