Flutter如何阻止TextField横向扩展并实现纵向自动换行？

问题根源在于这几点：

• 外层SizedBox固定了height:150，限制了底部表单的纵向扩展空间
• TextField未被约束宽度，导致它会持续横向拉伸而非自动换行
• 第二个TextField未配置多行输入参数

按以下方式修改即可解决：

修改后的代码 #

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  builder: (BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(
        bottom: MediaQuery.of(context)
            .viewInsets
            .bottom, // 保持在键盘上方
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(height: 8), // 替换自定义间距组件，保证兼容性
          // 用Expanded约束宽度，允许TextField纵向扩展
          Expanded(
            child: TextField(
              keyboardType: TextInputType.multiline,
              autofocus: true,
              maxLines: null,
              decoration: const InputDecoration(
                contentPadding: EdgeInsets.only(left: 10),
                border: InputBorder.none,
                hintText: "Title",
              ),
            ),
          ),
          Expanded(
            child: TextField(
              style: const TextStyle(height: 1),
              keyboardType: TextInputType.multiline,
              maxLines: null,
              decoration: const InputDecoration(
                border: InputBorder.none,
                contentPadding: EdgeInsets.only(left: 20),
                hintText: "Description",
              ),
            ),
          ),
          TextButton(onPressed: () {}, child: const Text("Save"))
        ],
      ),
    );
  });

关键改动说明 #

• 移除固定高度的SizedBox，让Column根据内容自动调整高度，配合mainAxisSize: MainAxisSize.min避免过度占用空间
• 给每个TextField套上Expanded，约束其宽度为父容器宽度，文本到边缘时自动换行，同时允许纵向扩展
• 给第二个TextField补充keyboardType: TextInputType.multiline和maxLines: null，开启多行输入支持

内容的提问来源于stack exchange，提问作者Sunken In Time