Flutter中如何让Column内的Row占满所在Column的全部宽度

要让第二个Column里的Row占满所在Column的全部宽度，核心是让右侧Column获得足够的宽度约束，具体修改如下：

修改步骤 #

• 给包裹右侧Column的Padding组件外层添加Expanded，让它占据外层Row的剩余空间，确保右侧Column有足够宽度可用。
• 目标Row保持mainAxisAlignment: MainAxisAlignment.spaceBetween，并显式设置mainAxisSize: MainAxisSize.max（默认值，但显式声明更清晰），让Row撑满Column的宽度。

修改后的完整代码 #

Padding(
  padding: const EdgeInsets.all(10.0),
  child: Row(
    children: [
      Column(
        children: [
          CircleAvatar(
            radius: 25,
            child: Image(
              image: getCategoryImage(task.type),
            ),
          )
        ],
      ),
      // 新增Expanded包裹右侧Padding，占据Row剩余空间
      Expanded(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(task.title, style: Theme.of(context).textTheme.headlineMedium,),
                  const Image(
                      width: 20, image: AssetImage("assets/icons/task/tickbox.png"))
                ],
              ),
              Text(generateBirdList(task.assignedBirds), style: Theme.of(context).textTheme.titleSmall,),
              Row(
                children: [

                ],
              )
            ],
          ),
        ),
      ),
    ],
  ),
),

原理说明 #

外层Row默认让子组件按内容宽度排列，右侧Column原本只能获取自身内容的宽度，导致内部Row无法撑满。通过Expanded将右侧区域设为填充Row剩余空间，Column会继承这个宽度约束，内部Row设置MainAxisAlignment.spaceBetween后，就能让子元素分别对齐左右两端。

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