Flutter响应式设计：屏幕宽度超阈值时动态切换Column与Row

嘿，这个需求在Flutter开发里太常见啦，尤其是做跨设备适配的时候，我给你分享几种实用的实现方式，按需选就行～

这是最灵活的方式，因为它能拿到当前组件实际能用到的宽度（不是整个屏幕的宽度），适合嵌套在其他容器里的场景。比如你设置阈值为600dp（平板常用的宽度临界点）：

LayoutBuilder(
  builder: (context, constraints) {
    // 自定义你的宽度阈值
    final isWideScreen = constraints.maxWidth > 600;
    // 用Flex组件代替直接切换Column/Row，减少代码重复
    return Flex(
      direction: isWideScreen ? Axis.horizontal : Axis.vertical,
      children: [
        Expanded(child: Container(color: Colors.orange, height: 120)),
        Expanded(child: Container(color: Colors.green, height: 120)),
        // 更多子组件...
      ],
    );
  },
)

Column和Row本质上就是预设了方向的Flex，用Flex能避免写两套几乎一样的代码哦

如果你的布局切换是基于整个设备屏幕的宽度，而不是父容器的可用空间，直接用MediaQuery更简单：

// 在build方法里获取屏幕宽度
final screenWidth = MediaQuery.of(context).size.width;
final isWideScreen = screenWidth > 600;

return isWideScreen 
    ? Row(children: [/* 子组件 */])
    : Column(children: [/* 子组件 */]);

不过要注意，如果你的组件被AppBar、侧边栏这些元素占据了部分空间，MediaQuery的宽度就不是组件实际可用的宽度了，这时候还是LayoutBuilder更准确。

如果你的需求是横屏自动变Row，竖屏用Column，那直接用OrientationBuilder最省心，不用自己设置阈值：

OrientationBuilder(
  builder: (context, orientation) {
    return Flex(
      direction: orientation == Orientation.landscape 
          ? Axis.horizontal 
          : Axis.vertical,
      children: [
        // 你的子组件列表
      ],
    );
  },
)

这种方式特别适合手机横屏或者平板切换方向时的布局适配。

要是想让布局切换不那么生硬，给用户更好的体验，可以搭配AnimatedSwitcher做过渡：

LayoutBuilder(
  builder: (context, constraints) {
    final isWideScreen = constraints.maxWidth > 600;
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 300),
      transitionBuilder: (child, animation) {
        return FadeTransition(opacity: animation, child: child);
      },
      // 一定要给Row和Column设置不同的key，不然动画不会触发
      child: isWideScreen 
          ? Row(key: const ValueKey('wide-layout'), children: [/* 子组件 */])
          : Column(key: const ValueKey('narrow-layout'), children: [/* 子组件 */]),
    );
  },
)

你还可以换成SizeTransition或者自定义过渡动画，让切换效果更贴合你的App风格～

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