Flutter Row布局文本长短变化时对齐不符合预期如何修复

VScode中查看Flutter布局效果时，出现文本内容较长时左对齐、内容较短时右对齐的异常情况，预期效果为左侧文本始终左对齐，右侧文本始终右对齐。
当前调试窗口未返回任何错误，布局窗口也未提示存在布局溢出问题。

原始实现代码 #

return Column(
  children: <Widget>[
    Visibility(
      visible: true,
      child: Container(
        width: widget.c1Width + widget.columnGap + widget.c2Width,
        child: Row(children: <Widget>[
          Container(
            alignment: Alignment.topLeft,
            width: widget.c1Width,
            child: Text(widget.r1C1, style: defualtParahTextStyle),
          ),
          SizedBox(
            width: widget.columnGap,
          ),
          Container(
            alignment: Alignment.topRight,
            width: widget.c2Width,
            child: Text(
              widget.r1C2,
              style: defualtParahTextStyle,
            ),
          )
        ])
      )
    )
  ]); 

布局效果截图 #

对齐异常是因为仅给Container设置了alignment，缺少Text组件自身的对齐配置以及Row的主轴对齐配置，按以下方式修改即可实现预期效果：

修正后代码 #

return Column(
  children: <Widget>[
    Visibility(
      visible: true,
      child: Container(
        width: widget.c1Width + widget.columnGap + widget.c2Width,
        // 新增Row的主轴对齐配置，保证左右容器贴靠两端
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              alignment: Alignment.topLeft,
              width: widget.c1Width,
              // 新增textAlign指定文本左对齐
              child: Text(
                widget.r1C1, 
                style: defualtParahTextStyle,
                textAlign: TextAlign.left,
              ),
            ),
            SizedBox(
              width: widget.columnGap,
            ),
            Container(
              alignment: Alignment.topRight,
              width: widget.c2Width,
              // 新增textAlign指定文本右对齐
              child: Text(
                widget.r1C2,
                style: defualtParahTextStyle,
                textAlign: TextAlign.right,
              ),
            )
          ]
        )
      )
    )
  ]); 

核心修改点 #

• 给Row添加mainAxisAlignment: MainAxisAlignment.spaceBetween，确保左右两个容器始终分别贴靠行的左右两端，不会出现内容短就偏移的问题
• 给左侧Text添加textAlign: TextAlign.left、右侧Text添加textAlign: TextAlign.right，保证文本在自身绘制区域内的对齐方式符合预期，不会受文本长度影响
• 可选优化：如果业务不需要固定左右容器宽度，可以将左右两个Container用Expanded包裹，适配不同屏幕尺寸的布局需求

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