Flutter实现Row子项空间不足时可横向滚动的方案

要同时实现「空间足够时子项自动分配间距」和「空间不足时可横向滚动」的效果，核心是根据可用空间动态切换布局逻辑：

• 当父容器宽度能容纳所有子项+最小间距时，用Row的MainAxisAlignment.spaceBetween让间距自动填充剩余空间；
• 当空间不足时，将Row嵌套在SingleChildScrollView中，并给子项添加固定最小间距。

具体代码实现 #

替换原HomePage的build方法即可：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) => LayoutBuilder(
        builder: (context, parentConstraints) {
          // 定义子项和最小间距
          final leftChild = Container(color: Colors.green, child: Text("${'l' * 30}"));
          final rightChild = Container(color: Colors.red, child: Text("${'r' * 30}"));
          const minSpacing = 16.0; // 可自定义子项间的最小间距

          return Scaffold(
            appBar: AppBar(title: const Text('scroll test')),
            body: Column(
              children: [
                // 用IntrinsicWidth获取子项总宽度
                IntrinsicWidth(
                  child: LayoutBuilder(
                    builder: (context, intrinsicConstraints) {
                      final totalChildWidth = intrinsicConstraints.maxWidth;
                      // 判断空间是否足够
                      if (totalChildWidth + minSpacing <= parentConstraints.maxWidth) {
                        // 空间充足：用spaceBetween分配间距
                        return Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [leftChild, rightChild],
                        );
                      } else {
                        // 空间不足：开启横向滚动，子项间保留最小间距
                        return SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Row(
                            children: [
                              leftChild,
                              const SizedBox(width: minSpacing),
                              rightChild,
                            ],
                          ),
                        );
                      }
                    },
                  ),
                ),
              ],
            ),
          );
        },
      );
}

关键逻辑说明 #

1. LayoutBuilder：获取父容器的可用宽度，作为空间判断依据；
2. IntrinsicWidth：计算所有子项的总宽度（不含间距），用来和父容器宽度对比；
3. 动态布局切换：
   • 空间充足时，Row的spaceBetween会自动让子项贴紧两端，剩余空间平均分配为间距；
   • 空间不足时，SingleChildScrollView允许横向滚动，同时用SizedBox保证子项间的最小间距。

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