Flutter TextField设expands=true配OutlineInputBorder时文字如何垂直置顶

你只需要在原有代码基础上修改两处配置即可实现需求，修改后的完整代码如下：

SizedBox(
  height: MediaQuery.of(context).size.height * 0.5,
  width: MediaQuery.of(context).size.width * 0.85,
  child: TextField(
    controller: _controller,
    keyboardType: TextInputType.multiline,
    expands: true,
    maxLines: null,
    // 新增：指定文字垂直顶部对齐
    textAlignVertical: TextAlignVertical.top,
    decoration: InputDecoration(
      // 新增：手动指定内边距，覆盖OutlineInputBorder默认的上下边距
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      border: const OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(4)),
        borderSide: BorderSide(width: 1),
      ),
    ),
  ),
)

修改说明 #

• textAlignVertical: TextAlignVertical.top：强制指定输入文字的垂直对齐规则为顶部对齐，不受OutlineInputBorder默认样式的对齐规则影响
• contentPadding参数：手动配置输入框的内边距，数值可根据设计需求自行调整，避免默认内边距将文字挤压到容器中间
• 已修正原代码中size.heigh的拼写错误为size.height，避免运行时报错

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