Flutter组件对齐问题：如何实现用户名靠左、班级文本靠右的布局

问题根因 #

承载用户名和班级文本的内层Row默认只会收缩到刚好包裹内容的宽度，没有多余的横向空间供MainAxisAlignment.spaceBetween分配两端间距，所以对齐规则不生效。

修复方案 #

只需修改两处布局即可实现需求：

• 给头像右侧的Column外层套Expanded组件，让它占满外层Row剩余的全部可用宽度
• 内层放用户名和班级的Row设置mainAxisSize: MainAxisSize.max，撑满父容器的宽度

修改后的完整代码如下：

Container(
  width: 180,
  decoration: BoxDecoration(
    color: const Color(0xffe8d9c3),
    border: Border.all(color: Colors.transparent),
    borderRadius: const BorderRadius.all(
      Radius.circular(4),
    ),
    boxShadow: const [
      BoxShadow(
        color: Colors.black,
        blurRadius: 2.0,
        spreadRadius: 0.0,
        offset: Offset(0, 1),
      ),
    ],
  ),
  child: Row(
    children: [
      const CircleAvatar(
        backgroundImage: NetworkImage(
          'https://www.woolha.com/media/2020/03/eevee.png',
        ),
      ),
      const SizedBox(
        width: 5,
      ),
      // 新增Expanded让Column占满剩余宽度
      Expanded(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              // 新增属性让Row撑满父容器宽度
              mainAxisSize: MainAxisSize.max,
              children: [
                StreamBuilder<DocumentSnapshot>(
                  stream: userdoc.snapshots(),
                  builder: (BuildContext context,
                      AsyncSnapshot<DocumentSnapshot> snapshot) {
                    return Text(
                      "${snapshot.data?["username"]}",
                      style: const TextStyle(
                        fontSize: 10,
                        color: Colors.black,
                      ),
                    );
                  },
                ),
                const Text(
                  "Class 8",
                  style: TextStyle(
                    fontSize: 10,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
            Stack(
              clipBehavior: Clip.none,
              children: const [
                SizedBox(
                  width: double.infinity,
                  height: 15,
                  child: LinearProgressIndicator(
                    value: 0.3,
                    backgroundColor: Color(0xff816840),
                    color: Color(0xffffc518),
                  ),
                ),
                Positioned(
                  right: 10,
                  top: 2,
                  child: Text(
                    "2918",
                    style: TextStyle(
                      fontSize: 10,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ],
  ),
)

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