Flutter适配屏幕宽度：TextField在Row/Column中切换的问题

希望根据屏幕宽度让TextField在Row或Column组件中布局：横向布局时需用Expanded限制宽度避免报错，但纵向布局时Expanded会导致TextField消失，必须移除该组件。使用Flex组件根据宽度切换布局方向，但不想编写两套重复组件，当前代码仅在纵向模式下可用，求简洁解决方法。

当前代码：

Flex(
            direction: MediaQuery.sizeOf(context).width < 500
                ? Axis.vertical
                : Axis.horizontal,
            // direction: Axis.vertical,
            children: [
              TextField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'name',
                  floatingLabelAlignment: FloatingLabelAlignment.start,
                  isDense: true,
                ),
                textAlign: TextAlign.right,
                controller: customerNameCon,
              ),
              const SizedBox(
                width: 10,
              ),
              TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'phone',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: customerPhoneCon,
              ),
              const SizedBox(
                width: 10,
              ),
              TextField(
                decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'email',
                    floatingLabelAlignment: FloatingLabelAlignment.start,
                    isDense: true,
                    labelStyle: TextStyle()),
                textAlign: TextAlign.right,
                controller: customerEmailCon,
              ),
            ],
          )

可以通过两个关键优化解决重复代码问题：

1. 封装一个动态包裹组件，根据当前Flex的方向决定是否用Expanded包裹子组件
2. 动态调整间隔组件（SizedBox）的尺寸方向

优化后代码示例 #

// 定义动态包裹的工具组件
Widget _responsiveWrapper({required Widget child, required Axis direction}) {
  return direction == Axis.horizontal ? Expanded(child: child) : child;
}

// 在Flex中使用
Flex(
  direction: MediaQuery.sizeOf(context).width < 500 ? Axis.vertical : Axis.horizontal,
  children: [
    _responsiveWrapper(
      direction: MediaQuery.sizeOf(context).width < 500 ? Axis.vertical : Axis.horizontal,
      child: TextField(
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'name',
          floatingLabelAlignment: FloatingLabelAlignment.start,
          isDense: true,
        ),
        textAlign: TextAlign.right,
        controller: customerNameCon,
      ),
    ),
    SizedBox(
      width: MediaQuery.sizeOf(context).width < 500 ? 0 : 10,
      height: MediaQuery.sizeOf(context).width < 500 ? 10 : 0,
    ),
    _responsiveWrapper(
      direction: MediaQuery.sizeOf(context).width < 500 ? Axis.vertical : Axis.horizontal,
      child: TextField(
        decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'phone',
            floatingLabelAlignment: FloatingLabelAlignment.start,
            isDense: true,
            labelStyle: TextStyle()),
        textAlign: TextAlign.right,
        controller: customerPhoneCon,
      ),
    ),
    SizedBox(
      width: MediaQuery.sizeOf(context).width < 500 ? 0 : 10,
      height: MediaQuery.sizeOf(context).width < 500 ? 10 : 0,
    ),
    _responsiveWrapper(
      direction: MediaQuery.sizeOf(context).width < 500 ? Axis.vertical : Axis.horizontal,
      child: TextField(
        decoration: const InputDecoration(
            border: OutlineInputBorder(),
            labelText: 'email',
            floatingLabelAlignment: FloatingLabelAlignment.start,
            isDense: true,
            labelStyle: TextStyle()),
        textAlign: TextAlign.right,
        controller: customerEmailCon,
      ),
    ),
  ],
)

进一步简化（提取方向变量） #

为避免重复判断屏幕宽度，可先提取方向变量：

final isVertical = MediaQuery.sizeOf(context).width < 500;
final direction = isVertical ? Axis.vertical : Axis.horizontal;

Flex(
  direction: direction,
  children: [
    _responsiveWrapper(direction: direction, child: /* 第一个TextField */),
    SizedBox(width: isVertical ? 0 : 10, height: isVertical ? 10 : 0),
    _responsiveWrapper(direction: direction, child: /* 第二个TextField */),
    SizedBox(width: isVertical ? 0 : 10, height: isVertical ? 10 : 0),
    _responsiveWrapper(direction: direction, child: /* 第三个TextField */),
  ],
)

核心逻辑说明 #

• 横向布局时，用Expanded包裹TextField，确保它们平分可用宽度，避免溢出报错
• 纵向布局时，直接返回TextField，让它自适应内容高度，不会因Expanded导致消失
• 间隔组件SizedBox根据布局方向切换宽高，横向用水平间距，纵向用垂直间距

这样既不用写两套重复的TextField代码，又能适配两种布局方向的需求。

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