为何给TextField添加SizedBox后会出现大量空白？

我尝试调整TextField的尺寸，但每次添加SizedBox后都会出现大量空白。该TextField嵌套在MaterialApp和Scaffold中。

无SizedBox时的代码 #

TextField(
  decoration: InputDecoration(
    hintText: "输入你的邮箱地址",
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.all(30),
  ),
),

无SizedBox时的效果 #

添加SizedBox后的代码 #

SizedBox(
  height: 100,
  width: 100,
  child: TextField(
    decoration: InputDecoration(
      hintText: "输入你的邮箱地址",
      border: OutlineInputBorder(),
      contentPadding: EdgeInsets.all(30),
    ),
  ),
),

添加SizedBox后的效果 #

解决方案 #

出现这个问题的核心原因是你设置的SizedBox(100x100)尺寸过小，同时TextField的contentPadding: EdgeInsets.all(30)占用了大量内部空间，再加上OutlineInputBorder的边框宽度，导致可输入区域被严重挤压，视觉上呈现大量空白。

你可以通过以下几种方式解决：

1. 匹配容器尺寸与内部内边距
   缩小contentPadding的值，同时根据输入内容调整SizedBox的宽高，让容器和内部内容适配：

   SizedBox(
     height: 100,
     width: 250, // 加宽以适配输入内容
     child: TextField(
       decoration: InputDecoration(
         hintText: "输入你的邮箱地址",
         border: OutlineInputBorder(),
         contentPadding: EdgeInsets.symmetric(horizontal: 15, vertical: 20), // 调整内边距
       ),
     ),
   )
   

2. 开启紧凑模式
   在InputDecoration中设置isDense: true，可以减少TextField默认的额外空白，让布局更紧凑：

   SizedBox(
     height: 80,
     width: 250,
     child: TextField(
       decoration: InputDecoration(
         hintText: "输入你的邮箱地址",
         border: OutlineInputBorder(),
         contentPadding: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
         isDense: true, // 启用紧凑模式
       ),
     ),
   )
   

3. 用Container替代SizedBox实现灵活约束
   如果需要更灵活的尺寸控制，用Container的constraints限制大小，同时配合内边距调整：

   Container(
     constraints: BoxConstraints(
       maxWidth: 300,
       maxHeight: 80,
     ),
     child: TextField(
       decoration: InputDecoration(
         hintText: "输入你的邮箱地址",
         border: OutlineInputBorder(),
         contentPadding: EdgeInsets.symmetric(horizontal: 15, vertical: 18),
       ),
     ),
   )
   

4. 直接通过InputDecoration控制尺寸
   若不需要强制固定尺寸，可直接调整contentPadding和constraints来改变TextField大小，避免额外容器带来的空白：

   TextField(
     decoration: InputDecoration(
       hintText: "输入你的邮箱地址",
       border: OutlineInputBorder(),
       contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 25), // 通过内边距调整高度
       constraints: BoxConstraints(maxWidth: 300), // 限制宽度
     ),
   )
   

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