Flutter Row/Column布局无法占满宽度 MainAxisAlignment不生效无法右对齐元素

问题原因 #

你设置的MainAxisAlignment.end不生效的核心原因是：承载tag和Priority文本的父容器宽度仅自适应内容大小，没有撑满屏幕横向剩余可用空间，对齐规则只能在有限的内容宽度范围内生效，自然无法实现Priority靠最右侧展示的效果。

两步修改即可解决 #

1. 给蓝色边框的Container外层套上Expanded组件，让它自动占满图标右侧的所有可用横向空间
2. 调整内层放文本的Row的主轴对齐规则，用两端对齐或者Spacer占位实现左侧放tag、右侧放Priority文本的效果

修改后的参考代码 #

child: Column(
  children: [
    Padding(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(Icons.task_alt_sharp , size: 50.0),
              SizedBox(width: 20.0),
              // 新增Expanded撑开剩余宽度
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blueAccent)
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children:[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(task.tag,style: const TextStyle(fontSize: 20, color: Colors.blue)),
                          // 两个Priority文本打包放在右侧
                          Row(
                            children: [
                              Text(" Priority "),
                              Text(" Priority "),
                            ],
                          )
                        ],
                      ),
                      SizedBox(height: 5.0),
                      Text(task.omschrijving),
                    ]
                  ),
                ),
              )
            ]
          ),

补充说明 #

如果你需要调整多个Priority文本之间的间距，直接在两个Text之间加SizedBox设置对应宽度即可，外层Expanded已经确保整个蓝色边框区域占满剩余宽度，后续的所有对齐规则都会在全宽范围内生效。

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