Flutter Row内添加Container报错及任务信息布局优化咨询

错误原因 #

你遇到的参数报错和能不能嵌套Container无关，Row完全支持内部嵌套Container，报错是代码语法问题：你把右侧时间展示的Container放在了Row的children数组的闭合]之外，相当于给Row构造函数传入了第二个位置参数，而Row的构造函数没有定义这个位置参数，所以抛出了位置参数过多的异常。

布局合理性说明 #

这种「左侧标识+中间核心信息+右侧辅助信息」的三列横向布局，是任务类列表项的标准设计，逻辑完全合理，只需要做少量细节优化即可。

优化点&修正代码 #

可以从几个方面优化：

• 把右侧时间Container移到Row的children数组内
• 给中间的标题Column套上Expanded，占用Row的剩余空间，避免标题过长时出现溢出警告
• 左侧日期方块的圆角可以直接用Container的decoration实现，不需要额外嵌套ClipRRect，减少组件层级
• 给Row设置crossAxisAlignment: CrossAxisAlignment.center，让三个子元素垂直方向居中对齐

修正后的代码如下：

Widget build(BuildContext context) {
  return Row(
    // 子元素垂直居中
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // 左侧日期方块
      Container(
        height: 60.0,
        width: 60.0,
        decoration: BoxDecoration(
          color: const Color(0xffFF0E58),
          borderRadius: BorderRadius.circular(20.0),
        ),
        child: const Center(
          child: Text(
            "27 juillet ",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 16,
            ),
          ),
        ),
      ),
      const SizedBox(width: 20.0),
      // 中间任务标题，Expanded占用剩余空间
      Expanded(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              "Task title",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 16,
              ),
            ),
            // 后续可扩展任务描述、标签等其他内容
          ],
        ),
      ),
      const SizedBox(width: 12.0),
      // 右侧时间/进度展示
      Container(
        width: 40.0,
        height: 20.0,
        decoration: BoxDecoration(
          color: Theme.of(context).primaryColor,
          borderRadius: BorderRadius.circular(30.0),
        ),
        alignment: Alignment.center,
        child: const Text(
          "8/34",
          style: TextStyle(
            color: Colors.white,
            fontSize: 12,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ],
  );
}

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