Flutter：如何不指定高度实现Column内按钮紧密垂直排列？

我想实现一组紧凑的按钮组，当前代码里按钮之间不够紧凑。尝试用Expanded包裹每个按钮时，出现错误：

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

已知原因是缺少高度限制，但因为要复用组件且按钮数量不固定，不想手动指定高度，求解决办法。

原代码：

Column(
  children: <Widget>[
    FilledButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.arrow_forward),
      iconAlignment: IconAlignment.end,
      label: const Align(
        alignment: Alignment.centerLeft,
        child: Text("Item A"),
      ),
      style: FilledButton.styleFrom(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
        ),
      ),
    ),
    const Divider(height: 0, indent: 0, thickness: 1),
    FilledButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.arrow_forward),
      iconAlignment: IconAlignment.end,
      label: const Align(
        alignment: Alignment.centerLeft,
        child: Text("Item B"),
      ),
      style: FilledButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0),
        ),
      ),
    ),
    const Divider(height: 0, indent: 0, thickness: 1),
    FilledButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.arrow_forward),
      iconAlignment: IconAlignment.end,
      label: const Align(
        alignment: Alignment.centerLeft,
        child: Text("Item C"),
      ),
      style: FilledButton.styleFrom(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(12)),
        ),
      ),
    ),
  ],
),

不需要用Expanded，也不用固定高度，通过以下方式实现紧凑效果：

1. 移除独立Divider，用按钮的side属性实现分隔线
   直接在按钮样式里设置side属性替代Divider，让按钮之间完全贴合，消除额外间距。

2. 按需调整按钮内边距
   如果觉得按钮本身高度过大，可通过padding属性缩小内边距，进一步提升紧凑感。

修改后的代码：

Column(
  children: <Widget>[
    FilledButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.arrow_forward),
      iconAlignment: IconAlignment.end,
      label: const Align(
        alignment: Alignment.centerLeft,
        child: Text("Item A"),
      ),
      style: FilledButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), // 可选：调整内边距
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
        ),
      ),
    ),
    FilledButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.arrow_forward),
      iconAlignment: IconAlignment.end,
      label: const Align(
        alignment: Alignment.centerLeft,
        child: Text("Item B"),
      ),
      style: FilledButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), // 可选：调整内边距
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.zero,
        ),
        side: const BorderSide(color: Colors.grey, width: 1), // 顶部分隔线
      ),
    ),
    FilledButton.icon(
      onPressed: () {},
      icon: const Icon(Icons.arrow_forward),
      iconAlignment: IconAlignment.end,
      label: const Align(
        alignment: Alignment.centerLeft,
        child: Text("Item C"),
      ),
      style: FilledButton.styleFrom(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), // 可选：调整内边距
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(12)),
        ),
        side: const BorderSide(color: Colors.grey, width: 1), // 顶部分隔线
      ),
    ),
  ],
),

如果按钮数量不固定，可封装成动态生成的方法：

Widget buildButtonList(List<String> items) {
  return Column(
    children: List.generate(items.length, (index) {
      BorderRadius borderRadius;
      BorderSide? side;

      if (index == 0) {
        borderRadius = const BorderRadius.vertical(top: Radius.circular(12));
        side = null;
      } else if (index == items.length - 1) {
        borderRadius = const BorderRadius.vertical(bottom: Radius.circular(12));
        side = const BorderSide(color: Colors.grey, width: 1);
      } else {
        borderRadius = BorderRadius.zero;
        side = const BorderSide(color: Colors.grey, width: 1);
      }

      return FilledButton.icon(
        onPressed: () {},
        icon: const Icon(Icons.arrow_forward),
        iconAlignment: IconAlignment.end,
        label: Align(
          alignment: Alignment.centerLeft,
          child: Text(items[index]),
        ),
        style: FilledButton.styleFrom(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          shape: RoundedRectangleBorder(borderRadius: borderRadius),
          side: side,
        ),
      );
    }),
  );
}

调用buildButtonList(["Item A", "Item B", "Item C"])即可生成任意数量的紧凑按钮组，无需固定高度。

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