Flutter如何让TextFormField文本输入框自适应不同手机屏幕尺寸？

问题根因 #

你当前的写法存在逻辑错误：maxLines属性控制的是输入框最多可展示的文本行数，不是直接对应像素高度，直接传入屏幕高度的整数值会导致尺寸计算完全不符合预期，自然无法实现多设备适配。

解决方案 #

要实现响应式适配的多行输入框，只需要调整输入框的属性配置，配合外层响应式容器即可：

1. 删掉原代码中的maxLines: MediaQuery.of(context).size.height.toInt()配置
2. 给TextFormField新增三个核心属性，让输入框自动填充满父容器的高度，同时支持多行滚动输入
3. 外层用响应式容器（Expanded/按屏幕比例计算高度的SizedBox）包裹，实现不同设备的尺寸适配
4. 边框不需要额外配置，只要父容器是响应式的，边框会自动适配输入框尺寸

完整修改后的代码示例 #

// 输入框组件代码
Widget buildDescription() => TextFormField(
        // 核心适配配置
        minLines: null,
        maxLines: null,
        expands: true,
        // 让输入文字从顶部开始，避免默认垂直居中
        textAlignVertical: TextAlignVertical.top,
        initialValue: widget.description,
        style: const TextStyle(color: Colors.black, fontSize: 18),
        decoration: InputDecoration(
            hintText: 'Tell us what you feel',
            hintStyle: const TextStyle(color: Colors.black54),
            border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15.0),
                borderSide: BorderSide(
                    color: Colors.grey.shade500,
                    width: 2,
                    style: BorderStyle.solid))),
        validator: (description) => description != null && description.isEmpty
            ? "I'm here to listen. Don't hesitate to open up when you're ready"
            : null,
        onChanged: widget.onChangedDescription,
      );

// 外层布局示例（放在页面Column中）
Widget build(BuildContext context) {
  return Padding(
    padding: MediaQuery.of(context).padding,
    child: Column(
      children: [
        const Text("输入你的感受", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
        const SizedBox(height: 16),
        // Expanded会自动占满Column除其他控件外的剩余高度，自动适配不同手机尺寸
        Expanded(
          child: buildDescription(),
        ),
        const SizedBox(height: 16),
        ElevatedButton(onPressed: () {}, child: const Text("提交"))
      ],
    ),
  );
}

// 如果是点击弹出弹窗的场景，外层响应式容器示例
GestureDetector(
  onTap: () => showDialog(
    context: context,
    builder: (context) => AlertDialog(
      content: SizedBox(
        // 按屏幕比例设置弹窗尺寸，自动适配不同设备
        height: MediaQuery.of(context).size.height * 0.6,
        width: MediaQuery.of(context).size.width * 0.9,
        child: buildDescription(),
      ),
      actions: [
        TextButton(onPressed: () => Navigator.pop(context), child: const Text("取消")),
        TextButton(onPressed: () {}, child: const Text("确定")),
      ],
    )
  ),
  child: const Text("点击输入描述"),
)

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